Щось давно я нічого не писав про CSS, але ж використовувати цю технологію доводиться практично постійно.
Крім того, останнім часом я починаю помічати, що все частіше використовую CSS фреймворки. Тому сьогодні мова піде саме про них. А точніше, про один з них, під назвою 960 Grid System .
Чому саме про нього? Тут все дуже просто. Я більш-менш щільно працював з двома фреймворками: Blueprint і 960 grid. При цьому, на мій погляд, розробникам 960 grid system вдалося домогтися дуже доброго ставлення можливості / розмір фреймворку.
Розглянемо його докладніше.
Почнемо з недоліків.
Якщо ви хоч трохи цікавилися темою, то, звичайно, знаєте, що є багато заперечень проти застосування CSS фреймворків як таких.
Основні заперечення такі.
1) Фреймворки збільшують розмір сторінки.
2) Заганяють розробника в певні рамки. Наприклад, 960 grid призначений для верстки сторінок з шириною 960рх.
3) Багатьом не подобаються імена класів на кшталт «grid-16».
4) Хтось вважає, що потрібно самому створювати фреймворк «під себе».
Але давайте подивимося наскільки істотні ці недоліки.
1) Обсяг файлів дійсно збільшується. Але 960 Grid System складається з трьох файлів, сумарний розмір яких - 8 кБ (стисла версія). Якщо використовувати архівацію розмір зменшується до 1,6кБ.
Ви, звичайно, зможете обійтися меншою кількістю коду для конкретної сторінки, але різниця навряд чи буде більше 1 кБ, тобто якщо на вашій сторінці є хоча б парочка картинок, виграш в загальному обсязі виявиться менше 1%.
2) З приводу обмежень. Фреймворк, як і будь-яку бібліотеку, має сенс використовувати у випадках, для яких він розроблявся. Тобто якщо потрібна «гумова» верстка, 960 Grid - не підходящий рішення (хоча є проект Fluid 960 Grid System ). Але якщо в тих. завданні сказано, що сторінка повинна мати фіксовану ширину 960px, то ситуація змінюється.
3) Імена класів. На мій погляд - це питання звички. Цифри в імені означають ширину блоку і по ним досить просто орієнтуватися. Крім того, ніхто не забороняє використовувати одночасно кілька класів, наприклад,
<Div class = "grid_4 sidebar"> ... </ div>Клас grid_4 буде використовувати фреймворк, sidebar - вашими стилями.
4) Свій фреймворк - це добре ... якщо у вас є час на його розробку і ви впевнені, що він вийде краще існуючих рішень.
Тепер про переваги.
1) Час розробки. Воно скорочується і значно, особливо якщо у вас є досвід роботи з фреймворком і ви використовуєте його у відповідній ситуації. Тобто потрібно витратити якийсь час на вивчення, але окупається воно дуже швидко.
2) Фреймворки містять «хакі» для найбільш поширених браузерів. Кожен раз вирішувати одні й ті ж проблеми з позиціонуванням елементів в IE дуже швидко набридає 😉
3) Спрощується підтримка. Вам буде легше прочитати свій же код, написаний півроку тому, якщо ви весь час використовуєте однакові імена класів.
Примітка. До речі, якщо ви цікавитеся темою, дуже раджу почитати статтю « Верстка за допомогою Grid «.
А тепер невеликий приклад.
Припустимо, нам потрібно зверстати сторінку з таким розміщенням блоків.
Я відразу покажу рішення.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "xml: lang =" en "lang =" en "> <head> <title> Test 960 Grid System </ title> <link rel =" stylesheet "href =" css / reset.css "/> <link rel =" stylesheet "href =" css / text.css "/> <link rel =" stylesheet "href =" css / 960.css "/> <style type =" text / css "> p {border: solid 1px #eee; } </ Style> </ head> <body> <div class = "container_12"> <div class = "grid_12"> <p> Тема </ p> </ div> <div class = "clear"> </ div> <div class = "grid_4"> <div class = "grid_4 alpha"> <p> Лівий блок №1 </ p> </ div> <div class = "grid_4 alpha"> <p> Лівий блок №2 </ p> </ div> </ div> <div class = "grid_4"> <div class = "grid_4 alpha"> <p> Центральний блок №1 </ p> </ div> <div class = "grid_2 alpha "> <p> Центральний блок №2 </ p> </ div> <div class =" grid_2 omega "> <p> Центральний блок №3 </ p> </ div> </ div> <div class = "grid_4"> <p> Правий блок. <br /> <br /> Може бути будь-якої висоти. </ p> </ div> <div class = "clear"> </ div> <div class = "grid_12" > <p> Хвостовик </ p> </ div> <div class = "clear"> </ div> </ div> </ body> </ html>Як бачите, ми обійшлися практично мінімальним кількість тегів div. Вкладені діви використовувалися тільки для лівої і центральної колонок, тому що вони містять кілька блоків.
Тепер про номери класів.
Загальна ширина макета 960px. Фреймворк дозволяє розбити її на 12, 16 і 24 рівні частини. В даному випадку нам досить розбиття на 12 частин. Тобто клас grid_12 має ширину 940px плюс відступи по 10px справа і зліва.
Точно також клас grid_4 має ширину 960 * 4/12 = 320px з яких 20px доводиться на відступи.
Якщо ми помістимо поспіль три блоки з класами grid_1, grid_7 і grid_4, то вони займуть всю ширину сторінки.
Крім того, є кілька спеціальних класів, наприклад, alpha і omega. Вони дозволяють прибрати відступи зліва (alpha) і праворуч (omega) у блоку. В даному прикладі ця можливість використовується для того, щоб прибрати відступи у вкладених блоків. Інакше вони будуть додані до відступами контейнера і, наприклад, відстань між лівою колонкою і центральної буде не 20, а 40px.
Також ви можете використовувати клас clear для завершення рядка з блоками, а також класи prefix_X, suffix_X, push_X і pull_X для створення різних відступів (замість X підставте число).
Примітка. Якщо ви плануєте використовувати цей (або будь-який інший CSS фреймворк) я дуже раджу вам поглянути на вихідні файли зі стилями. Як я вже писав, вони зовсім невеликі і при наявності мінімальних знань в CSS ви швидко розберетеся що до чого.
Як бачите, використовувати фреймворк не складно і його вивчення навряд чи відніме у вас багато часу.
На закінчення хочу провести невеличке опитування.
Голосування закрито. результати:
Чи використовуєте ви CSS фреймворки?
- Ні, але планую спробувати - 71%, 898 голосів
- Так - 21%, 265 голосів
- Немає і пробувати не збираюся - 8%, 108 голосів
Всього проголосувало: 1 271
Успіхів!
постовий
Для малого бізнесу бухгалтерські послуги: Москва і область
Чому саме про нього?
