Grid.css - Минимална мрежа за уеб разработчици

По-големите фронтендни рамки като Bootstrap идват с техните собствени настройки на мрежата. Но те също идват с много багаж под формата на предварително проектирани елементи на страницата и JavaScript компоненти.

Ако търсите много по-малка и опростена мрежа, тогава ще ви хареса Grid.css.

Тази безплатна библиотека с отворен код се предлага в комплект с традиционните 12-col grid system които можете да структурирате за всяко оформление. CSS е много лесен за използване и самият файл измерва само 560 байта (това е половин КБ!)

Първи стъпки е супер лесно и просто трябва един CSS файл добавени към заглавката ви.

Можете да намерите директна връзка за изтегляне на началната страница на Grid.css или в официалния GitHub repo. Можете дори да използвате сурова CDN версия да вградите този файл директно от GitHub, без да го хоствате сами.

Сега можете да настроите структурата на колоните си използване на елементи, които искате (div, секции и т.н.).

Това обикновено включва: a .ред елемент (контейнер) заедно с много елементи на вътрешни колони. Класовете на колоните използвайте номера да определи общото им пространство в контейнера, например, .col4 заема четири колони от общо дванадесетте.

Ето едно примерен фрагмент от демото:

Можете да използвате всякаква комбинация от класове на колони, която желаете, само докато са добавете до 12.

Това означава, че можете също преструктурирайте страницата колкото искате, като използвате различни контейнери ред. Например, може да имате един голям участък за заглавката, но да използвате две различни настройки за ред / цвят за тялото на страницата си.

Естествено, тази библиотека е 100% безплатно и отворен код, така че сте свободни да правите редакции, колкото искате.

Създателят, Ахмед Тарек, също направиха Бътнс което е вариант на множеството UI комплекти с бутони там. То двойки добре с Grid.css, така че и двамата са отлични библиотеки, които да започнат да правят нов уеб проект.