Знайомимося ближче з blueprint css framework
Blueprint - це один з найпопулярніших CSS фреймворков, який допоможе вам зберегти купу часу під час написання HTML і CSS. Класи даного фреймворка настільки зручні, що їх без зусиль можна впровадити через Rails, PHP або будь-який інший мову, що генерує HTML сторінку. У цьому уроці ми розберемо приклад, який надається в архіві з Blueprint фреймворком.
1. Що таке Blueprint CSS?
Якщо ви схожі на мене - більше розробник, ніж дизайнер, то вам швидше за все знайома ситуація, коли ви починаєте новий проект і зовсім не маєте поняття, з чого почати частина, що стосується CSS. Ви також знаєте, що дизайн буде змінюватися ще багато разів, проте необхідно, щоб він був акуратний і ярок з самого початку. Після цього ви витратите n-ну кількість часу на CSS, який буде однаково відображатися в Firefox, Safari і звичайно ж в IE. Потім ви наклепаного якийсь HTML, який на вашу думку, будете використовувати. Здорово! Закінчили! І ось ... через 3 дня вимоги змінилися, і вам знову потрібно починати все спочатку. Напевно, всі стикалися з подібними проблемами ...
Якщо ви є крутим верстальником, який знає все CSS фінти або людиною, що працює з PSD шаблоном, це не означає, що вам нема чого вчитися .... Blueprint - це дуже зручна річ, що надає дуже корисні інструменти ... так що ви з величезною користю проведете час.
Я думаю, що Blueprint цілком виправдовує всі очікування. Blueprint забезпечує міцну і якісну основу для створення вашого проекту. Це досягається кросбраузерності класами, дуже симпатичною друкарнею, сіткою, готовими стилями для форм, спеціальними стилями для друку і т.д. Давайте ж поглянемо ближче на архів, який ви можете завантажити з сайту Blueprint:
2. Вихідні тексти Blueprint
І що? Мені треба підключати всі 6 таблиць стилів?
Ні. Blueprint містить стислий варіант таблиць стилів для ваших HTML сторінок - screen.css, який включає в себе всі перераховані файли, включаючи print.css і ie.css. Причина, по якій я розписав кожен з файлів даного фреймворка, полягає в тому, що він складається з модулів, а це означає, що кожен з його компонентів (файлів) може працювати незалежно один від одного. Це дуже здорово, оскільки якщо ви вирішили, що якийсь файл Blueprint вам не підходить, наприклад, файл для сітки, а файли reset.css, typography.css навпаки, може послужити вам хорошу службу, то ви без праці і втрати функціоналу можете їх під'єднати, залишивши за бортом непотрібні вам файли стилів.
3. Давайте ж щось зварганити на Blueprint
Я прекрасно знаю, що можуть сказати про це дизайні поганого чи хорошого, однак, до вашого відома хочу сказати, що я створив цю розмітку без рядка CSS коду. Дизайн побудований виключно засобами Blueprint, і повністю задовольняє всім вимогам проекту. Якщо в процесі розробки мені необхідно буде щось змінити, то завдяки Blueprint я без особливих труднощів зможу це зробити, а коли функціональність буде готова, подумаю над тим, що туди можна додати від себе.
4. Розбір польотів
заголовок документа
Ось як повинен виглядати розділ head, якщо ми використовуємо Blueprint фреймворк. Вам необхідно підключити файли CSS, наприклад, screen.css, print.css і ie.css.
Ще одна фіча Blueprint: це код CSS, тому якщо нас щось не влаштовує, ми з легкістю можемо замінити існуючі селектори. Саме за цим принципом працюють Blueprint плагіни. У цьому прикладі я використовую плагін, призначений для моїх текстів. Підключати плагіни необхідно після викликів основних файлів фреймворка, для того щоб значення селекторів переписати і вступили в силу. Ось плагін, який я використовував.
В останню чергу ви можете підключити вашу власну таблицю стилів, звичайно ж якщо вона вам буде потрібно.
заголовок сторінки
основний контент
У цьому невеликому фрагменті коду застосовуватися дуже багато речей, про які ми зараз поговоримо. Почнемо ми з самого верху і розглянемо
Важливо: коли ви використовуєте клас 'colborder' для відображення рамки, хочете того чи ні, але одна колонка буде потрібно для цих цілей. Оскільки ширина нашого блоку становить 17 колонок (span-17), ви швидше за все припустити, що у вас залишилося 7 вільних (так як 17 + 7 = 24), але так як 'colborder' займає одну колонку для своїх потреб, то в вашому розпорядженні залишилося тільки 6 колонок для бічній панелі (17 + 1 + 6 = 24).
Перед тим як перейти до бічної панелі, нам необхідно обговорити 2 невеликих блоку з заголовками 'Upload a Book' і 'Write a Review'. Оскільки батьківський блок даних елементів складається з 17 колонок, то це відстань буде максимальним.
Отже, першого блоку, приписані класи 'span-8' і 'colborder', що означає, що ширина даного елемента буде займати насправді 8 колонок і з правого боку буде відділена тонкою рамкою. Другого блоку ми приписали класи 'span-8' і 'last'. Це дуже важливий момент в фреймворке Blueprint. Колонці, яку ви хочете відображати останньої необхідно вказати клас 'last'. Цей клас повідомляє BP, що даний елемент є останнім і йому не потрібно створювати ніяких відступів. Відзначте для себе, як ми розподілили наявні у нас 17 колонок, розділивши їх між блоками по вісім 8 і 1 для рамки 'colborder' (8 + 8 + 1 = 17).
OK, тепер з чистою совістю можемо приступити до бічної панелі. Даному елементу ми приписали класи 'span-6' і 'last'. Я думаю, що ви вже зрозуміли, як працюють дані класи. Бічна панель повністю заполоняє все, що залишився простір. Математика тут не складна 17 + 1 + 6 = 24.
Наведу ще один сторонній приклад HTML коду, для того щоб ви зрозуміли, як це все працює.
Давайте розглянемо ще деякі класи CSS, які ви можете використовувати:
- 'Caps': даний клас використовується для заголовків в бічній панелі. Його селектори зберігаються в CSS файлі плагіна, про який ми неодноразово говорили.
- 'Box': цей клас прекрасно підходить для оформлення елементів списку. Він без особливих зусиль відокремлює їх від усього вмісту сторінки і створює пропорційні відступи між внутрішніми і зовнішніми елементами.
- 'Quiet': даний клас CSS відповідає за колір тексту (сірий), який ви можете побачити в бічній панелі.
- 'Prepend-top': даний клас використовується в секції 'Recent Reviews' нашої бічній панелі. Він просто додає зовнішній відступ в 1.5em зверху. Так само існує клас з подібною функціональністю: 'append-bottom', який додає зовнішній відступ знизу.
- 'Prepend-5': цей клас я використовую, для того щоб перемістити заголовки 2х невеликих блоків в правий кут. У Blueprint існує кілька класів для подібних операцій: prepend, append, pull, і push. Класи Prepend і append додають внутрішні відступи справа і зліва. Класи Pull і push додають зовнішні відступи. Ще раз зазначу, що вам необхідно ретельно прораховувати застосування кожного класу, щоб вписатися в загальні розміри контейнера (який за замовчуванням становить 24 колонки).
Якщо ви мало знайомі з CSS і не знаєте різниці між внутрішніми та зовнішніми відступами, то ось вам невелика підказка. В CSS, внутрішні відступи додають відстань між елементом і його рамкою, що веде до збільшення ширини даного елемента. Наприклад, якщо у вас на сторінці є таблиця з рамкою, то додавання зовнішніх відступів, призведе до появи порожнього місця між цими елементами. У свою чергу, із застосуванням зовнішніх відступів все навпаки, відстань додається за межами рамки. Щоб було простіше зрозуміти те, про що я зараз говорю, раджу поглянути на дане зображення:
Головним завданням даного уроку було показати основні техніки роботи з фреймворком Blueprint CSS. Прочитавши цю статтю, ви без особливих зусиль можете застосувати її в вашому наступному проекті повністю або частково. Також якщо ви використовуєте Blueprint при написанні Rails додатків, то раджу відвідати цей репозиторій на Github. Там ви знайдете інструменти, які призначені для спрощення конфігурації Blueprint.
Наостанок залишу вам кілька джерел:
- Офіційний сайт Blueprint blueprintcss.org. Найкраще звідси качати даний фреймворк.
- За замовчуванням Blueprint працює з фіксованою шириною. Якщо ви віддаєте перевагу створювати гумові сайти, то цей плагін якраз для вас.
- Безліч плагінів для Blueprint
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!