Velkommen til Simplex

Simplex temaet er skabt for at demonstrere HTML5 og CSS3 funktionalitet i CMS Made Simple.
Det leveres med et CSS Framework, som gør det muligt for dig let at oprette responsive og mobil tilpassede layouts.

Hvad er inkluderet?

Til denne template vil du finde fire stylesheets tilknyttet.

  • Simplex Core
  • Simplex Layout
  • Simplex Mobile
  • Simplex Print

Den vigtigste funktionalitet i denne template er inkluderet i Core Stylesheet. Det indeholder et simpelt Fluid Grid Framework baseret på 960 Grid System.
I det samme stylesheet bliver der brugt css Media Queries, der muliggør en fleksibel tilpasning til skærmen bredde.

Med Simplex temaet er det meget nemt at hurtigt at ændre udseende på én gang. Hvis du ser i template koden vil du finde "boxed" id i <body> tag.
Hvis du fjerner denne id, ændres hjemmesidens layout og du få et mere simpelt layout med en hvid baggrund.
Du kan også hurtigt ændre allignement på hele hjemmesiden. Hvis du ændrer class på ​​"wrapper" div til leftaligned eller rightaligned, vil hele siden blive justeret til venstre eller højre.

Støtte til mobile enheder

Som nævnt ovenfor er dette tema leveret med Stylesheet Framework, der giver dig godt et udgangspunkt for nem udvikling af et responsive layout.

Den mobile verden er meget alsidig og et Framework i sig selv, er på ingen måde perfekt, det er et udgangspunkt, men som udvikler er det op til dig hvilken teknik, du vil bruge til dit nuværende projekt.
En responsive template er kun et lille skridt i retning af mobile understøtning.

Dette tema kræver jQuery, som er inkluderet med { cms_jquery } tag.

Bemærk: { cms_jquery } tag er inkluderet i bunden af templaten. Vær opmærksom på dette, når du bruger moduler, der omfatter jQuery i <head> sektion.

I filen functions.js en sektion inkluderet som gør det muligt at navigere gennem webstedet på mobile enheder. Denne del af koden, omfatter kun få enheder, og det er kun ment som et eksempel og et udgangspunkt for udvikling.

Lidt af hvert

Som et eksempel på styrken i Smarty tags i CMS Made Simple templates er en meget enkel slider er blevet medtaget, som demonstrerer, hvor nemt det er hurtigt at oprette et slideshow uden et modul.

{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}

Hvis du ønsker at gøre denne slider responsive, bør du inkludere et ekstra jQuery plugin, som f.eks SwipeJS

I de inkluderede stylesheets er Smarty også blevet anvendt. Dette gør det muligt for dig at hurtigt ændre farveskema på temaet ved blot at ændre HEX kode her.

[[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']]

Hvis du bruger en moderne browser, vil du bemærke, at temaet er at bruge nogle af CSS3 teknikker. Der er ingen Internet Explorer fallbacks inkluderet, men det betyder ikke, at det ikke virker i Internet Explorer.
En besøgende, der bruger tidligere versioner af Internet Explorer vil se et layout med gracefull fallback, hvilket betyder, animationer vil ikke animere, afrundede hjørner vil være kanter ...

Note fra tema udvikleren Goran Ilic (uniqu3e):

Simplex temaet er blevet holdt simpelt, hvilket skulle gøre det muligt for en udvikler nemt at læse koden, der bruges i temaet og enten oprette et nyt layout udfra det eller redigere dette tema. En fuld Internet Explorer eller mobilunderstøttelse err med vilje ikke medtaget, da hver udvikler må gøre op med sig selv i hvor høj grad en gammel browser som Internet Explorer (7,8) skal understøttes og hvilken teknik der skal bruges til at understøtte mobile enheder. Hvert projekt er forskelligt og i hvert project er der behov for forskellige teknikker.

Forrige side: Default Templates Næste side: Minimal template