Willkommen bei Simplex
Das Simplex-Theme wurde entwickelt, um die HTML5- und CSS3-Funktionalität von CMS Made Simple™ zu demonstrieren.
Es wird mit einem CSS-Framework ausgeliefert, das es Ihnen ermöglicht, mit Leichtigkeit responsive und mobile-fähige Layouts zu erstellen.
Was ist enthalten?
Mit dieser Vorlage werden Sie vier Stylesheets mitgeliefert.
- Simplex Kern
- Simplex Layout
- Simplex Mobil
- Simplex Drucken
Die Hauptfunktionalität dieser Vorlage ist im Core Stylesheet enthalten. Es enthält ein einfaches Fluid Grid Framework basierend auf dem 960 Grid System.
In diesem Stylesheet werden auch CSS Media Queries verwendet, die ein flexibles Layout je nach Bildschirmbreite ermöglichen.
Mit dem Simplex-Theme ist es sehr einfach, das Aussehen der gesamten Website auf einmal zu ändern. Wenn Sie sich den Code der Seitenvorlage ansehen, werden Sie im <body>-Tag die ID "boxed" finden.
Wenn diese ID entfernt wird, ändert sich das Layout der Website und Sie sehen ein einfaches Layout mit weißem Hintergrund.
Sie können auch schnell die Ausrichtung der gesamten Website ändern. Wenn Sie die Klasse des "Wrapper"-Divs auf "leftaligned" oder "rightaligned" ändern, wird die gesamte Seite nach links oder rechts ausgerichtet.
Unterstützung für mobile Geräte
Wie bereits erwähnt, wird dieses Theme mit einem Stylesheet Framework ausgeliefert, das Ihnen einen Ausgangspunkt für die einfache Entwicklung eines Responsive Layouts bietet.
Die mobile Welt ist sehr vielseitig und das Framework selbst ist keineswegs perfekt, es ist nur ein Ausgangspunkt, aber als Entwickler sollten Sie entscheiden, welche Technik Sie für Ihr aktuelles Projekt verwenden sollten.
Ein Responsive Template ist nur ein kleiner Schritt in Richtung Mobile Support.
Dieses Theme benötigt jQuery, das mit dem Tag {cms_jquery} eingebunden ist.
Hinweis: Der {cms_jquery}-Tag ist am unteren Ende des Templates enthalten. Sie sollten damit vorsichtig sein, wenn Sie Module verwenden, die jQuery im <head>-Abschnitt enthalten.
In der Datei functions.js ist ein Abschnitt enthalten, der das Navigieren durch die Website mit einigen mobilen Geräten ermöglicht. Dieser Teil des Codes deckt nur wenige Geräte ab und ist nur als Beispiel und Ausgangspunkt für Entwickler gedacht.
Dies und das
Als Beispiel für die Leistungsfähigkeit von Smarty innerhalb der CMS Made Simple™ Templates wurde ein sehr einfacher Slider eingefügt, der demonstriert, wie einfach es ist, schnell eine Slideshow ohne ein einziges Modul zu erstellen.
{assign var='teaser' value='uploads/simplex/teaser/*.jpg'|glob}
{foreach from=$teaser item='one'}
<div><img src='{root_url}/{$one}' width='852' height='275' alt='' /></div>
{/foreach}
Wenn Sie diesen Slider responsive machen möchten, sollten Sie ein zusätzliches jQuery Plugin wie z.B. SwipeJS einbinden
In den mitgelieferten Stylesheets wurde auch Smarty verwendet. Dies sollte es Ihnen ermöglichen, das Farbschema des Themes schnell zu ändern, indem Sie einfach den HEX-Code innerhalb der Tags ändern.
[[assign var='boxed_bg' value="#d1d1d1 url(`$path`/boxed-bg.gif)"]][[assign var='light_grey' value='#f1f1f1']]
[[assign var='grey' value='#e9e9e9']]
[[assign var='dark_grey' value='#555']]
[[assign var='white' value='#fff']]
[[assign var='orange' value='#f39c2c']]
[[assign var='dark_orange' value='#e6870e']]
[[assign var='yellow' value='#fdbd34']]
Wenn Sie einen modernen Browser verwenden, werden Sie feststellen, dass das Thema einige CSS3-Techniken verwendet. Es gibt keine Fallbacks für den Internet Explorer, aber das bedeutet nicht, dass es im Internet Explorer nicht funktioniert.
Ein Besucher, der den Internet Explorer verwendet, wird einfach ein Layout mit gracefull Fallback sehen, d.h. Animationen werden nicht animiert, abgerundete Ecken werden zu Kanten...
Anmerkung von Theme-Entwickler Goran Ilic (uniqu3e):
Das Simplex-Theme wurde sehr einfach gehalten, was es einem Entwickler ermöglichen sollte, den im Theme verwendeten Code leicht zu lesen und entweder ein neues Layout daraus zu erstellen oder dieses Theme zu bearbeiten.
Auf eine volle Internet Explorer oder Mobile Unterstützung wurde bewusst verzichtet, da jeder Entwickler selbst entscheiden sollte, inwieweit er einen alten Browser wie den Internet Explorer (7,8) oder welche Mobile Geräte er unterstützen möchte und welche Technik er verwenden wird.
Jedes Projekt ist anders und mit jedem Projekt gibt es einen Bedarf an verschiedenen Techniken.