Grid.css - Ett minimalt nätverkssystem för webbutvecklare

Större frontendramar som Bootstrap kommer med deras egna nätverksinställningar. Men också de komma med mycket bagage i form av förkonstruerade sidelement och JavaScript-komponenter.

Om du letar efter ett mycket mindre och strömlinjeformat nät system kommer du att älska Grid.css.

Detta gratis open source-bibliotek kommer förpackat med det traditionella 12-col grid system som du kan strukturera för vilken layout som helst. CSS är verkligen lätt att använda och själva filen mäter endast 560 byte (det är en halv KB!)

Komma igång är super lätt och du behöver bara en CSS-fil läggs till i ditt huvud.

Du kan hitta direkt nedladdningslänk på Grid.css hemsida eller i den officiella GitHub repo. Du kan till och med använda rå CDN-version att bädda in den här filen direkt från GitHub utan att vara värd för det själv.

Nu kan du ställa in din kolumnstruktur använder några element du vill ha (divs, sektioner, etc).

Detta innefattar i allmänhet a .rad element (behållaren) tillsammans med många inre kolumnelementen. Kolumnklasserna använd nummer att definiera sitt totala utrymme inuti behållaren, så till exempel, .col4 tar upp fyra kolumner av de tolv totalt.

Här är en exemplarbit från demo:

Du kan använda vilken kombination av kolumnklasser du vill, bara så länge som de lägg till upp till 12.

Det betyder att du också kan omstrukturera sidan men du vill, genom att använda olika radbehållare. Du kan till exempel ha en stor spänn för ditt huvud men använda två olika rad / kol-inställningar för sidokroppen.

Naturligtvis är detta bibliotek 100% gratis och öppen källa, så du är fri att göra ändringar men du vill.

Skaparen Ahmed Tarek, gjorde också Butns vilket är en variant av de många knappen UI-kits där ute. Det par snyggt med Grid.css, så de är båda utmärkta bibliotek att hämta när man startar ett nytt webbprojekt.