Om du är som många utvecklare har du haft din fyllning av nätbaserade CSS-ramar. Nåväl, du har tur, för idag ska vi titta på ett nytt begrepp om en CSS-ram.
EZ-CSS syftar till att ta itu med många av de saker som du hatar om rutnätbaserade ramar, samtidigt som du behåller funktionaliteten för att hjälpa till med att skapa flersidiga layouter med flera webbläsare.
Vad är EZ-CSS?
EZ-CSS är ett CSS-ramverk som utvecklats av Thierry Koblentz. Det är liknande i koncept med andra ramar som du har sett som 960.gs eller Blueprint CSS, och ändå är det också helt annorlunda.
Den primära skillnaden mellan EZ-CSS och andra ramverk som du har sett är att du här inte är förpliktigad till ett visst rutnät, utan snarare en stor frihet över bredden på dina kolumner. Faktum är att du kan skapa så många kolumner som du vill, med vilken bredd som helst och med vilken storlek som helst.
EZ-CSS använder också en unik modul layout som möjliggör super snabb prototypning. Vi kommer in i det här senare, men i huvudsak beror du mest på att kopiera och klistra in färdiga delar av en layout som du kan kombinera och bo, men du vill skapa en komplex helhet.
De sista fördelarna med att använda denna ram är storlek och enkelhet. Den nödvändiga CSS-filen är bara omkring 1 KB och hela systemet är faktiskt mycket lättare att lära sig än andra ramar du har sett. Bristen på restriktioner och extra hack som att infoga divs för att rensa dina floats gör det enklare att arbeta med (teoretiskt) mindre markup.
EZ.CSS
Det första du behöver göra är att ladda ner gratis ez.css-filen. För att göra detta, gå till EZ-CSS nedladdningsavsnitt och ta ez-min.css. Det finns många andra valfria filer, men det här är verkligen det enda du behöver för att komma igång.
Kasta det i en katalog med en grundläggande HTML-fil och länka den med följande kod:
Självklart måste du anpassa vägen för att passa med din egen mapphierarki.
Förstå moduler
Som jag nämnde ovan kretsar funktionaliteten hos EZ-CSS kring en serie förbyggda moduler som du enkelt kopierar och klistrar in i din kod för att definiera layouten.
Det finns sju moduler att välja mellan på webbplatsens layoutsidor: Plain Box, 2A, 2B, 3A, 3B, 4A och 4B. Som du kan se i bilden nedan innehåller varje modul antingen 1, 2, 3 eller 4 kolumner.
Med hjälp av dessa enkla byggstenar kan du skapa massor av otroligt komplexa layouter. Du åstadkommer detta genom att bo på. Så låt oss säga att du använder modul 2A för att skapa en layout med två kolumner och vill dela den vänstra mest kolumnen i tre sektioner. Du klistrar helt enkelt koden för modul 3A inuti koden för modul 2A och du är bra att gå!
På sidan Layout finns också flera vanliga förkonstruerade layouter som redan kombinerar modulerna och därmed uppnår mycket av arbetet för dig!
Ett exempel
För att få en känsla för hur allting fungerar, låt oss skapa en snabb och smutsig mockup med hjälp av EZ-CSS-ramen. Vi bygger i princip en av de prefab layouterna men från början så att du kan få en känsla för processen att skapa din egen.
Om du följde stegen ovan bör du ha en katalog med en HTML-fil och ez-min.css-filen. Lägg till här en style.css-fil och länka till den i din HTML. Hämta sedan texten för "Plain Box"? modul och klistra in den i din CSS-kropps kropp.
Viktig: Eftersom detta kommer att bli vår huvudsakliga behållare, ändrade jag? Ez-wr? klass till "ez-mw" klass. Detta stegcenter anpassar hela layouten, vänster justerar texten i behållaren och förhindrar att din nya layout eliminerar eventuella tidigare (vänster) floats.
Lägga till rubriken
Det första avsnittet vi vill lägga till är en rubrik. Eftersom detta kommer att sträcka hela vägen över sidan, behöver vi en annan? Plain Box? modulen (den här gången lämnar ez-wr-klassen). För att infoga detta nestar vi det inuti? Ez-mw? div, ersätter? ez-boxen? div som brukade vara där. Det här låter mer komplicerat än det verkligen är och resulterar i de få raderna av kod nedan.
Observera att jag också slängde in ett par anpassade id / klasstaggar så att vi kan stile dessa element enligt vår egen önskemål. Jag ville inte utforma de befintliga EZ-CSS klasserna eftersom jag kan använda dem olika på en webbplats.
Stilar i rubriken
För att få en glimt av hur allt detta visar sig, hoppar vi framåt och lägger till några stilar till huvudet och kroppen.
Det finns några viktiga saker att notera här. Först är standard EZ-CSS-layouterna flytande. Det här är häftigt för vissa ändamål men jag ville inte ha en vätskeformat så jag bara applicerade en bredd till behållaren för att dölja den. Allt annat är bara några snabba och röriga stilar som jag kastade på för att ge rubriken någon form av utseende. Jag ska upprepa dessa stilar för sidfoten så jag gjorde dem till en klass istället för ett id.
Resultatet är allt annat än anmärkningsvärt, men det är en början!
Skapa en 2-kolumnlayout
För att lägga till något innehåll tar vi modul 2A och slänger den inuti huvudomslaget efter rubriken. Vi lägger några dummybilder i den vänstra kolumnen och texten i den högra kolumnen.
Det finns fortfarande ingen brist på divs (nio att vara exakta), men det är bättre än det var. Ez-boxbehållarna är uppenbarligen för det mesta för valfri styling. Vi tog en annan väg till vår styling så att vi faktiskt inte behövde inkludera dem. Detta lägger till lite extra arbete för kopia och klistra in handling, men i verkligheten inte mycket. Var försiktig med vilka avdelningar du skär och titta noga på hur de påverkar din layout.
Slutsats
För några dagar sedan hade jag aldrig hört talas om EZ-CSS, så jag utreder fortfarande det och försöker bestämma om jag gillar det. Jag tycker att det är ett nytt sätt att ta fram ett CSS-ramverk som inte är samma nätbaserade struktur som vi har sett gjort femtio olika sätt som i slutändan är desamma på en konceptuell nivå.
När jag fortsätter att leka med EZ-CSS för att se vad som är och inte är möjligt, skulle jag gärna höra dina tankar. Du har gång på gång visat sig vara mer insiktsfull än mig själv när du analyserar användbarheten av dessa verktyg i den verkliga världen så jag kastar den här tillbaka till dig. Här är några frågor för konversationsstartare:
1. Lösar EZ-CSS de problem du har med 960 och andra gridramar?
2. Finns det några fördelar och nackdelar som jag saknade?
3. Vad är några begränsningar för detta system?
4. Är EZ-CSS något vi kan använda i den verkliga världen eller bara för prototypning?
Sätt in dina två cent på dessa och andra relaterade ämnen som kommer att komma ihåg!