5 топ мрежови системи за уеб дизайнери

Когато започна нов проект, половината от битката започва с десния крак. Предполагам, че и другите се чувстват по същия начин, докато се ориентират в безброй инструменти и блогове, опитвайки се да разберат какво е ново и препоръчително. Независимо от това какъв проблем се опитваме да решим, винаги са необходими няколко елемента, а един от тях е мрежа мрежа.

Въпреки че Bootstrap и Foundation са чудесни в много случаи, може да отнеме много работа, за да ги персонализирате за всеки проект, а масивът от опции може да ги направи тежки и тромави, с много ненужни функции. С решетките е важно да намерите инструмент, който е лек и ви позволява веднага да започнете работа. Трябва да има CSS класове, които са лесни за използване и трябва да отговарят на дизайна.

Много инструменти разбиват нещата според типа устройство (напр. Мобилни устройства, таблети, настолни компютри), но с различни модели и Retina дисплеи не е толкова просто. Следвайте съветите на Трент Уолтън: въведете точка на прекъсване, когато самият дизайн се счупи, а не когато трябва да започне нов размер на устройството.



Добрите мрежови системи разчитат на принципите на проектиране, за да определят по-добри точки на прекъсване: подходяща ширина на колоните за типография; 12-, 16-, 18- или 24-колонови решетки, които позволяват гъвкавост при начина на разделяне на колоните; и последователност в разстоянието.

Разчитането на чисти и леки мрежови системи прави кодирането на нов сайт много по-лесно. Той изважда част от предположенията със структура, но без да ограничава това, което можете да направите.

01. Обикновена решетка

Simple Grid отговаря на името си с ясна система

Simple Grid отговаря на името си с ясна система

Simple Grid е с отворен код и го улеснява с 12-колонна мрежа, лесни за запомняне имена на класове и хубава документация.



02. Чисто

Pure е популярен инструмент за документиране

Pure е популярен инструмент за документиране

Pure се използва много от един от колегите ми от The Iron Yard. Документацията е толкова добре направена, сякаш учи разработчици за по-добри CSS, дизайн и отзивчиви практики.


03. Flexbox Grid

Flexbox Grid води пътя за гъвкаво показване

Flexbox Grid води пътя за гъвкаво показване

Flexbox Grid е особено интересен, тъй като е една от първите мрежови системи, които съм виждал, и която специално използва опцията flex display в CSS.


04. Bootstrap

Bootstrap предлага много безплатно

Bootstrap предлага много безплатно

Bootstrap е пригоден за разработка отпред и съдържа богатство от HTML и CSS-базирани шаблони за дизайн. Той е с отворен код, безплатен и съдържа разширения за JavaScript.

05. Фондация

Фондацията е чудесна за отзивчиви проекти

Фондацията е чудесна за отзивчиви проекти

Подходящ за всяко устройство и всякакъв носител, Foundation е универсална платформа за създаване на отзивчиви фронтови рамки. Той е лесен за използване, както и изключително гъвкав, а екипът от Foundation постоянно актуализира ресурсите си.

Тази статия първоначално е публикувана в нетно списание брой 282. Купете го тук.