Foundation
Foundation – потужний фреймворк, один з головних конкурентів Twitter Bootstrap. Підтримує будь-які розміри сіток, має ряд переваг, яких не вистачає в Bootstrap.
Компоненти відрізняються великим набором різних анімаційних ефектів, які можуть настроюватися. Для управління стилями використовується препроцесор SASS. У списку базових шаблонах містяться слайдери, панелі навігації, іконки Social Media.
Розміри задаються значеннями, наведеними в таблиці.
|
small |
0 |
|
smedium |
420px |
|
medium |
640px |
|
large |
1024px |
|
xlarge |
1200 px |
|
xxlarge |
1440px |
Grid Layout
Ще одна система, яка заслуговує уваги, – це Grid Layout. Являє собою набір пересічних вертикальних і горизонтальних ліній. Вони утворюють стовпці та рядки. Елементи розташовуються в сітку, їх розміри вказуються у відповідності з рядками і таблицями. Є можливість використовувати фіксовані розміри, такі як px, і гнучкі – відсотки, rem і em.
Спочатку grid контейнер потрібно оголосити.
display: grid
Для завдання ширини рядків використовується властивість grid-template-columns, а стовпців – grid-template-rows. Розміри можуть бути вказані в одному властивості grid-template-columns. Ширина вимірюється в одиницях fr, які являють собою частку доступного простору в контейнері. Передбачається можливість використання fx і px в одному властивості. Наприклад, grid-template-columns: 500px 1fr 2fr.
