Grid.css - Minimális rácsrendszer a webes fejlesztők számára

Nagyobb frontend keretek, mint például a Bootstrap, jönnek saját hálózati beállítások. De ők is jön egy csomó poggyász előre megtervezett oldalelemek és JavaScript összetevők formájában.

Ha sokkal kisebb és egyszerűbb rácsrendszert keres, akkor szeretni fogja Grid.css.

Ez az ingyenes, nyílt forráskódú könyvtár a hagyományos termékekkel van ellátva 12 colos hálózati rendszer hogy bármilyen elrendezést strukturáljon. A CSS nagyon könnyen használható és a fájl maga csak 560 byte-ot mér (ez fél KB!)

Az első lépések szuper könnyűek és csak szükséged van egy CSS fájl hozzáadta a fejlécéhez.

Megtalálja a közvetlen letöltési link a Grid.css honlapján vagy a hivatalos GitHub repóban. Ön is használhatja nyers CDN verzió beágyazni ezt a fájlt közvetlenül a GitHub-ból anélkül, hogy magad is tárolná.

Most beállíthatja az oszlopszerkezetét a kívánt elemekkel (divok, szakaszok stb.).

Ez általában a .sor elem (a konténer) sokan együtt belső oszlopelemek. Az oszloposztályok használjon számokat meghatározza a tárolóban lévő teljes területet, így például, .Coi4 a tizenkettő összesen négy oszlopát veszi fel.

Itt van egy példa részlet a demóból:

Az oszloposztályok tetszőleges kombinációját használhatja, csak annyira, ameddig csak adjon hozzá 12-et.

Ez azt jelenti, hogy Ön is az oldal átalakítása azonban szeretnéd, a különböző soros konténerek. Például lehet, hogy a fejléchez egy nagy átmérője van, de két különböző sor / col beállításokat használ az oldal testéhez.

Természetesen ez a könyvtár 100% ingyenes és nyílt forráskód, így szabadon szerkesztheted, de tetszik.

Az alkotó, Ahmed Tarek, is tett Butns ami a sok gombos felhasználói felületkészlet egyik változata. Azt párosul a Grid.css-vel, így mindketten kiváló könyvtárak, hogy új webprojekt indításakor vegyék fel magukat.