Перейти до основного вмісту

CSS фреймворк. Що це, і кому воно потрібно?

Що таке фреймворк і навіщо воно потрібно?

На сьогодні існує велика кількість фреймворків для всього-всього-всього. Це стосується веб-програмування серверної частини, javascript-фреймворків клієнтської частини, а також в багатьох інших сферах. В загальному, можемо розуміти фреймворк як деяку кодовую базу, що вирішує набір стандартних задач, і яка задає архітектуру та стиль створення додатку. Ну, зі всім цим зрозуміло. Наприклад, javascript-фреймворки дозволяють не паритись з крос-браузерністю і вирішувати задачі на порядок швидше.

Що ж із CSS?

Крос-браузерність в CSS - це також наболіла проблема. Але, наскільки мені відомо, кожен досвідчений CSS майстер має свій набір правил верстки, що допомагає йому практично безпомилково писати крос-браузерний код, тим більше для сучасних браузерів, де аналіз CSS-стилів не так вже й сильно відрізняється, як було, наприклад, 2-3 роки тому. Розглянемо CSS фреймворк на прикладі blueprint CSS. Є й багато інших фреймворків, які вирішують схожі задачі, але я зупинився на цьому.

Що нам дає CSS фреймворк?

Зразу зазначу, що сам його почав недавно використовувати, і, хоча CSS верстка - не моя повсякденна робота (в даному випадку, це дуже важливо), деколи доводиться з цим ділом стикатись. CSS фрейморк - це набір CSS-стилів для крос-браузерної колонкової верстки, де ви можете робити такі операції як "задати ширину колонки", "зміщуватти колонку на деяку кількість пікселів зліва", робити "перехід на нову колонку", і т.д. Тобто все для того, щоб створювати і розміщувати контейнери для "функціонуючих елементів керування" клієнтської частини веб-додатку, що часто є найбільш трудомісткою задачею верстки.

Мої враження

Маючи деякий досвід верстки без фреймворка, з використанням останнього все виходить дійсно швидше. Якщо оцінювати себе, то можу сказати, що створив досить неординарну верстку сторінки (в т.ч. для IE6).

Плюси:
  • швидкість верстки і створення базового html-коду
  • легкість внесення змін в верстку
  • вся верстка div-контейнерами
  • html-код виходить чистий і короткий (це дуже важлиов як з точки зору розробки, підтримки, так і SEO)
  • Накладання стилів працює "ієрархічно", тобто ніяких проблем з вбудовуванням контейнерів в контейнери
Мінусы:
  • У зв'язку з тим, що застосовуються класи з "несемантичними" іменами, більше того, до одного і того ж контейнера може застосовуватись від одного до трьох класів з фреймворку, код виглядає трошки "дивно" (але завжди можна доддати якийсь клас-маркер, щоб не забути, для чого створювався той чи інший контейнер)
  • 15 кб базового CSS (в деяких випадках це може бути багато)

Кому це потрібно?

Зі всього сказаного зроблю невеличке резюме. Я б рекомендував використовувати CSS-фреймворки наступним категоріям:
  1. Недосвідчені верстальщики, які тільки починають свій важкий бойовий шлях. Такий підхід дозволяє швидко вирішувати задачі верстки і не зривати строки по проекту.
  2. Програмісти, які роблять свій проект/стартап, але поки не мають засобів для того, щоб найняти досвідченого верстальщика.
Всім вдалої верстки.

Коментарі

  1. мне еще понравился YUI3, даже больше чем BluePrint/BlueTrip

    ВідповістиВидалити
  2. YUI3 хрош, если его использовать цельно, то есть вместе с js-фреймворком, который входит в YUI3. К тому же там разметка (YUI3 CSS grid) находится в бете. CSS base, fonts, reset прикольные, но не решают проблему позиционирования и разметки.
    А в общем то, что есть решает те же задачи немножко другим образом. Радует то, что ко всему этому Yahoo! выпустили свой фреймворк под BSD-лицензией. За это им большущий +.

    ВідповістиВидалити

Дописати коментар

Популярні дописи з цього блогу

Регулярні вирази в Python: вивчення та оптимізація

Writing a regular expression is more than a skill -- it's an art. Jeffrey Friedl Що це таке? Рано чи піздно майже кожному програмісту в своєму житті доводиться стикатись з регулярними виразами. Термін "Регулярні вирази" є перекладом з англійської словосполучення "Regular expressions" і не є зовсім точним, а для тих, хто перший раз почув цей термін, мабуть, навіть спантеличуючим (я, наприклад, коли вперше почув, ніяк не міг собі второпати по назві, хоча б приблизно, що це, і для чого використовується). Літературний і більш осмислений переклад звучав би, мабуть, як "шаблонні вирази". Але назва вже прижилась, а скажете "шаблонні вирази" - вас просто не зрозуміють :). Звідси: Регулярний вираз -  це рядок, що задає шаблон пошуку під-рядків в рядку. Регулярні вирази використовуються для аналізу текстів на предмет відповідності текстової інформації деякому шаблону. Наприклад , шаблон, що задає слово, яке містить букву "к". Де застосовують

Python: як програмно перемкнути розкладку клавіатури в Windows

Дослідивши дане питання, я побачив, що Python не має засобів "з коробки" для вирішення цієї задачі. Відвоідно, задача повинна вирішуватись для каждої ОС своїм шляхом. Дане рішення було знайдено мною для ОС Windows XP +. Панацея - Win API Для того, щоб виконати завдання необхідно встановити додатково бібліотеку pywin32 , яка надає доступ до функцій Windows API з Python. З цієї бібліотеки нам знадобиться модуль win32api . >>> import win32api Дослідивши його вміст, можна побачити, що для роботы з розкладкою клавіатури є декілька функцій і одне системне повідомлення Windows - WM_INPUTLANGCHANGE : GetKeyboardLayout GetKeyboardLayoutList LoadKeyboardLayout В даному випадку для нас важлива саме остання функція - LoadKeyboardLayout . Дана функція завантажує нову розкладку (якщо вона ще не завантажена) і виконує після цього ще якісь дії; приймає в якості аргументів два: рядок з ідентифікатором розкладки. дію. Більш детально про їхні можливі значення можна почитати в MSDN . О

wxPython: Gif-анімація і прозорість

Коротко про анімацію в wxPython Дядечко робить анімацію на wxPython В wxPython засоби для роботи з анімацією - це пакет wx.animate . Пакет досить нехитрий - всього декілька класів, з яких частіше за все в роботі використовуються 2: wx.animate.Animation - інкапсулює параметри анімації, а також підтримує завантаження анімації з файлу. Підтримує Gif і Ani   формати анімацій. wx.animate.GifAnimationCtrl - Контрол для рендера і Gif-анімації в графічному інтерфейсі додатку. Останній - дуже класний засіб, оскільки дозволяє фактично в декілька рядків додати в вікно готовуу анімацію: ag_fname = r"progress.gif" ag = wx.animate.GIFAnimationCtrl(self, -1, ag_fname, pos=(0, 0), size=(64,64)) ag.GetPlayer().UseBackgroundColour(True) ag.Play() Досить непогано. І навіть більше ... прозорість. Прозрачность Третій рядок наведеного коду натякає нам, що анімація буде використовувати замість кольору, який в ній встановлений прозорим - фоновий колір вікна. Кажуть, що на GTK воно так і