CSS-layoutsramar är super hjälpsamma, men de kan vara en röra. Du måste alltid överensstämma med någons system, oavsett om det är meningslöst för dig.
Idag kommer vi att dölja den här uppfattningen och bygga ett ultralätt ramverk som kan implementeras varhelst och men du vill uppnå komplexa flerkolonnlayouter i några sekunder. Du bygger denna Frankenstein Framework när du går så det finns noll oanvända klasser och absolut ingen kod bloat. Nämnde jag att det också är lätt att göra för att göra det lyhörd? Läs vidare för att se att monsteret kommer till liv.
MINDER inte mindre
För att undvika förvirring borde jag säga framåt att vi ska använda MINDRE, det dynamiska CSS-språket, som inte har något att göra med den dåligt benämnda mindre ramen (var de påfrestande att förvirra oss?). Lyckligtvis har Mindre Ramverket omprövat och bytt namn till Frameless.
På jakt efter det perfekta layoutsystemet
Som någon lojal Design Shack-läsare vet, älskar jag CSS-ramar. Jag är inte särskilt lojal mot någon ram, och jag brukar inte heller använda någon på faktiska projekt, jag älskar bara att gräva i dem för att se hur de fungerar. Jag fascineras oavbrutet av smarta sätt att manipulera den CSS-baserade layoutprocessen.
? Du använder inte ens hälften av koden i ett ramverk, men du lämnar det där ändå bara för att vara säker på att du inte skruvas upp något.?Under det senaste året eller två har jag lagt stor vikt vid vad jag vill ha i ett layoutsystem. Svaren är ganska grundläggande, men de är en lång order. Först vill jag ha något som kräver en mycket liten kodbas. Mundar och högar av icke-semantiska, fula klasser gör inte mycket för mig. Helt manuellt layout är ofta inte så svårt att jag kan motivera att lägga upp uppblåsta layoutsystem som ingen förstår blandningen.
Därefter vill jag ha något som är lätt anpassningsbart när jag implementerar det. Det här är den svåraste delen, eftersom CSS-ramar inte typiskt erbjuder denna typ av flexibilitet. I stället får du en stor fil och en massa klassnamn som du är tvungen att arbeta med. Att anpassa någon del kan ta timmar att sortera genom kod för att se till att din tweak inte bryter något. Det är ofta så att du inte ens använder hälften av koden i ett ramverk, men du lämnar det där ändå bara för att vara säker på att du inte skruvas upp något.
Rullande dina egna nät
Nyligen kom jag ganska nära mitt drömlayoutsystem i min artikel med titeln Rolling Your Own Grid Layouts on the Fly utan ram. I denna artikel skisserade jag ett super enkelt system som använder en liten bit kod:
Med hjälp av procentsatser för bredd och marginal kan vi direkt skapa flera kolonnlayouter med nollfluff. Det finns bara ett problem med den här metoden: matematiken. För en viss layout måste du manuellt räkna ut vad kolumnbredden procent och marginal procent ska använda. Först måste du dela behållarens bredd med antalet kolumner, då måste du multiplicera den önskade individuella kolumnmarginalen med antalet kolumner minus en, subtrahera det numret från den totala bredden och dividerar sedan med det totala antalet kolumner igen. Det är faktiskt väldigt enkelt matte, men det låter som en mardröm när du förklarar det.
I artikeln gav jag ett enkelt verktyg för att du ska kunna beräkna de värden du behöver genom att bara skriva två siffror, men jag har alltid velat att den här funktionen kan utföras rätt i koden så att du enkelt kan klistra in i en CSS snippet som räknar ut matte för dig. Tyvärr är CSS helt enkelt inte så fantastiskt. Eller är det?
MINDER: CSS med supermakter
En annan sak som jag har fascinerat med ett tag är mindre. Det ger verkligen dina CSS-supermakter som variabler, mixins, operationer, etc. Med den senaste konverteringen till ett JavaScript-bibliotek är LESS lättare än någonsin att implementera under en testkörning (du kan fortfarande använda LESS.app för att kompilera den verkliga CSS innan publicering).
? Med MINDER Parametriska Mixins kan vi bygga ett litet layoutsystem som kan ändras för att passa dina behov när du implementerar det.?Jag har blivit klåda för att infoga lite mindre i mitt självbetjäningsnätverk eftersom jag visste att det äntligen skulle göra min uppfattning att CSS skulle kunna utföra matematiken för oss. Vidare kan vi med LESS Parametric Mixins bygga ett litet layoutsystem som kan ändras för att passa dina behov när du implementerar det.
Jag satte mig äntligen och tänkte ut allt och jag är ganska nöjd med resultaten så idag visar jag dig hur du bygger din egen enkla men extremt fina (och till och med lyhörda) layoutram.
Varning: Mycket experimentell
Koden som vi kommer att arbeta med är fortfarande i en mycket rå, frisk tillstånd. Det kan inte vara 100% perfekt och det har verkligen inte testats noggrant för att satsa din lönecheck på den. Denna artikel tjänar som ett bevis på konceptet för en intressant idé, inte som ett förslag om att du plötsligt ska börja använda detta system i ditt dagliga arbete. Med detta sagt är det super kul så du vill definitivt prova det.
Observera att läsning av min tidigare artikel om Rolling Your Own Grids hjälper oerhört med att förstå denna artikel. Du behöver också en grundläggande förståelse av MINDRE, eftersom jag inte kommer att få tid att lära mig det här.
Träffa Frankenstein
Snarare än att bygga detta en bit i taget, låt oss bara skära till jakten och titta på den färdiga produkten ska vi? Här är det kompletta LESS-powered layoutsystemet som jag har utformat. Det verkar som ett monster men är inte rädd, det är ganska vänligt.
Vad i helvete?
De som inte är bekanta med LESS bör vara ganska förvirrad vid denna tidpunkt. Dessa ser ut som klasser, men de har en riktigt konstig kod i dem. Detta beror på att de inte är klasser alls utan mindre PARAMETRIC Mixins.
Jag har utformat var och en av dessa för att fungera som en funktion. Du implementerar dem på ungefär samma sätt som hur du skulle implementera en JavaScript-funktion, som passerar i anpassade värden under vägen. Jag förklarar kortfattat hur var och en fungerar.
setColumnWidth
Som jag nämnde ovan finns det en stor bit av matematik som är inblandad i att manuellt installera kolonnbaserade layouter. Den här funktionen automatiserar den här uppgiften direkt i din CSS. Det är en ganska fantastisk kodkod som tar allt tungt att lyfta ut för att skapa lika fördelade kolumner.
Den övre raden innehåller de två värdena som du kan passera här med valfria standardvärden: @ kolumner, vilket är antalet kolumner du vill ha och @ margin, vilket är den mängd avstånd du vill ha mellan kolumnerna. Att skriva in endast dessa två siffror när du utför denna funktion utför alla typer av fantastiska prestationer. Den går automatiskt igenom en rad matematiska steg för att beräkna och ställa in kolumnbredd och kolumnmarginal.
Genomförandet av denna funktion ser så här ut:
Detta anger vårt antal kolumner till fyra och vår kolumnmarginal till 4%. Hur lätt är det? Om du vill använda den igen för att skapa en rad med 3 kolumner och en marginal på 5%, släng bara in det här:
setBigColumnWidth
Det är trevligt att låtsas att alla layouter har lika stora kolumner, men det är helt enkelt inte fallet. Som ett resultat behöver vi ett sätt att kombinera kolumner. I grund och botten gör det samma som den sista funktionen, det tar bara det extra steget att räkna ut den expanderade kolonnstorleken och resulterande marginal när två eller flera kolumner kombineras.
Låt oss säga att vi vill ha en kolumnlayout, men vi vill att en kolumn ska vara bredden av tre enkla kolumner. Vi ställer helt enkelt upp en fyra kolumnlayout och lägger sedan till @combine-värdet på 3 så att vår enkelspalt kan ta upp platsen för tre kolumner.
Få alltid att falla på plats
Om du fortfarande är med mig, bra. Om du är borttappad bör detta förhoppningsvis göra allt lite tydligare. Låt oss skapa lite HTML för att se hur allt fungerar.
HTML för en Four Column Setup
För att implementera detta system kan du markera ditt dokument i princip som du normalt skulle. Jag har satt upp en? Huvud? div och placera fyra platshållarkolumner inuti, var och en med en specialklass. Eftersom det här systemet är super flexibelt och fungerar som du vill ha det, Du kan namnge dina klasser och ID-nummer allt du vill! Semantisk, icke-semantisk eller Ubbi Dubbi, är det upp till dig.
Den viktiga delen är att varje kolumn får en klass som du kan rikta in och den första kolumnen blir en? Först? klass så att vi kan rensa vänstra marginalen. Det här är ett nödvändigt ont, vi kunde hantera det här utan någon markering med hjälp av en pseudofelektor, men webbläsarstöd skulle suga så det här är nog ett bättre sätt att gå.
CSS för en Four Column Setup
Först av allt måste vi kopiera och klistra in funktionen .setColumnWidth och .setBigColumnWidth i vår CSS. Dessa är 100% återanvändbara och visas bara en gång i alla våra CSS (eller mer exakt, våra mindre).
Därefter måste vi ange några grundläggande stilar för vårt Main ID. Eftersom jag vill illustrera hur denna ram kan vara responsiv ställer jag in bredden i procent, vilket kommer att skapa vätskekolumner (använd en uppsättning bredd om du inte vill ha vätskekolumner).
Nu kommer den magiska delen där vi sätter upp en flerfärgad layout så lätt att det får dig att gråta. Vi vet att vårt innehåll har fyra kolumner, jag slår på en 4% marginal och det här är all kod vi behöver!
Detta ger oss en perfekt, flytande, fyra kolumnlayout och det tog bara några rader kod!
Lägger till en annan rad
Låt oss fortsätta och lägga till en annan rad i vår layout. Den här gången lägger vi in en sidfot med två kolumner, den första kommer att vara en stor kolumn bredden på tre enkla kolumner. Här är HTML (notera att om vi ville använda generiska klassnamn kunde vi återvinna den enkelspaltklass som vi skapat tidigare).
CSS
Det första vi vill göra i vår CSS är de generiska stilarna för sidfoten. Dessa är desamma som i huvuddelen så vi kan helt enkelt uppdatera vår kod så här:
På samma sätt kan vi helt enkelt lägga till i rubriken footerColumn till koden för huvudkolumn-klassen (eller använd bara ett generiskt namn för båda).
Slutligen ställer vi upp vår klass för att kombinera de tre första kolumnerna.Vi använder fortfarande de fyra kolumnlayouten och en 4% -marginal, men vi använder ett @combine-värde på tre för att slå samman bredden på de tre första kolumnerna.
Med det har vi nu en andra rad som vi kunde helt anpassa på flugan med nästan ingen ansträngning. Vi behövde inte heller välja mellan förtio sju förinställda klasser, vi har bara gjort oss själva på vägen!
Gör det Responsive
Eftersom hela nätet som vi har satt upp är flytande svarar det redan ganska bra på olika fönsterstorlekar. Tyvärr börjar det procentuella marginalsystemet att göra för ganska smutsiga kolumner på små skärmar.
Att fixa detta är super enkelt med lite magi i mediafrågan. Du kan anpassa de stilar som du vill, så att de bäst passar olika skärmstorlekar (alla våra MINDER fungerar fortfarande bra). Här är ett snabbt exempel som helt enkelt tar allt i en enda kolumn för något mindre än 700px.
Se den i aktion
Nu när du vet hur det fungerar är det dags att ta en titt! Observera igen att det här är väldigt mycket en idé pågår, så om det inte fungerar i något som inte är Webkit eller Mozilla, är jag inte förvånad.
demo: Klicka här eller på bilden nedan för att starta. Var noga med att ändra storlek på sidan och se layouten anpassad till ändringarna.
Varför är det långsamt?
Jag har avsiktligt laddat upp den mindre versionen så att du kan ta en topp i vad som händer. Det är dock ganska trögt på detta sätt och egentligen bara menat för teständamål. Kör detta genom LESS.app ger oss en sammanställd version som består av ren gammaldags CSS och resulterar i en mycket snabbare sida.
demo: Klicka här för att se den sammanställda CSS-versionen.
Slutsats
Jag är förmodligen inte den första som försöker använda MINDRE för att skapa en layoutram (även om jag aldrig sett en), men jag försökte stanna helt original i min tankeprocess här och bestämde mig för att bygga upp något som representerade en ny sätt att tänka på och använda flera kolonnlayouter i CSS.
Min långa förklaring gör att detta verkar komplicerat, men i sanning är det ett super enkelt system som bara kräver två korta förbyggda mixins (som jag har inställningar mer som funktioner) som du kan kopiera och klistra in direkt i din kod. Från och med då bygger du din sida men du vill, ringer en mixin när du behöver det och sätter in dina egna värden.
Lämna en kommentar och låt mig veta vad du tycker om min Frankenstein Framework. Tror du att det lyckades förenkla layoutprocessen? Hur skulle du ändra det?