CSS Framework: ускорение работы над проектом (видеоурок)

CSS-framework, или Как упростить процесс вёрстки

Приветствую вас, уважаемый читатель. Сегодня я познакомлю вас с очень интересной и удобной штуковиной под названием CSS-framework.

В своей работе по созданию сайтов я использую CSS-framework в качестве отличного помощника и «упростителя» рутинной вёрстки «админки».

«Админка» — внутренняя часть сайта, предназначенная для служебных целей. Видит и пользуется ей только администратор сайта.

Давайте рассмотрим, какой функционал, зачастую, применяется в «админке»:

Меню переключения разделов «админки». Обычно, я формирую переключение разделов при помощи ссылок в горизонтальном меню сайта с использованием выпадающих пунктов. В «мощных» сайтах может пригодиться вертикальное меню (как дополнительный способ навигации в разделе).
Вывод данных. Для формирования выводимых данных могут применяться таблицы, расположение в блоках абзаца, разделение блоков логическими заголовками.
Редактирование данных. Для редактирования данных применяются различные поля ввода, селекторы, выпадающие списки.

Весь этот функционал должен быть хорошо структурирован (т. е. должна быть выдержана иерархия размеров шрифта, отступов, чтобы было понятно, какой элемент и к чему имеет отношение), а интерфейс — приятен глазу. Также функционал должен одинаково хорошо выполнять все свои функции в любом популярном браузере.

При этом, как вы понимаете, для «админки» не требуются разработка индивидуального дизайна и какие-то особые ухищрения юзабилити-структурирования (по крайней мере, в подавляющем большинстве случае).

Сократить усилия по вёрстке админ-части сайта и сэкономить драгоценное время вам поможет тот самый CSS-framework, о котором и пойдёт речь в данной статье.

Итак, что же такое CSS-framework?

Это уже готовый, свёрстанный и одинаково хорошо отображающийся во всех браузерах HTML- и CSS-каркас с набором всех необходимых функций для реализации «админки» довольно сложного сайта.

Вы можете с лёгкостью скопировать и отредактировать только те элементы, которые необходимо задействовать, не тратя время на вёрстку. «Админка» легко собирается из готовых «кубиков».

Ещё одним плюсом в использовании CSS-framework является его бесплатность. Достаточно просто зайти на официальный сайт, скачать свежую версию и…

А вот что с ней делать дальше, я наглядно расскажу в видеоуроках.

Автор: Андрей Морковин.

Ещё материалы по этой теме:

Андрей Морковин
Мое мнение, красота админки заключается в понятной структуре элементов управления, а никак не в красивых ярких шкурках.
Красивая админка — это понятная и аккуратная админка

Never Lex
Согласен. Шаблоны админок вроде не особо красивы. Упор идёт на выделение определённых объектов. Но сам не пользовался. Рекламировать не буду

gashek
Вещь полезная, только он уже почти год не обновлялся.
Я думаю лучше использовать зарубежные аналоги.

Андрей Морковин
А чего там обновлять? Я использую, все работает нормально, никакие навороты пока не требовались.

Ян
А зачем вообще админку то делать? Есть же joomla например. И сайт сделать можно любой сложности и админка уже есть, да и о безопасности профессионалы позаботились.

Андрей Морковин
Ну по поводу «Сделать сайт любой сложности на Joomla» — это Вы уж хватили лишнего. С чего Вы только такое взяли?
А в принципе, для создания админки, эту штуковину применяю я, Вам же она может пригодится для каких-то еще случаев (будите страничку дополнительную делать, а joomla не даст вам возможности нормально с HTML работать, вот и придется ручками что-то новое ваять; при этом, чтобы руки зря об клавиатуру не тереть, вспомните про CSS-framework).

Never Lex
Полностью согласен. Джумла для извращенцев или новичков, ещё не осознавших всю её косячность

Ольга
Это первый урок который я к сожалению не поняла, наверное сначала (для ноничков) надо было объяснить, что такое админка и с чем её едят.
А то получается, что уроки по вёрстке отличные, а дальше галопом по Европам.

Андрей Морковин
Я в тексте данной статьи рассказываю, что такое админка.

Ольга
Конечно статью читала, но там вобщем то понятно для тех кто уже с этим сталкивался, а кто совсем с нуля не понятно. Как например её пользоваться? Мы же не сталкивались с этим ни разу.

Андрей Морковин
Значит оно вам, на данном этапе, и не нужно
Админка, в принципе, это такой интерфейс управления сайтом, который скрыт от обычных посетителей. С его помощью администратор может, без знания HTML, наполнять сайт контентом.
Т.е. в админке есть поля ввода, переключатели, кнопки и, благодаря всему этому функционалу, появляется возможность работать с контентом сайта, и при этом не лезть в HTML.
Вход в админку осуществляется по определенному адресу, по которому находится страница запроса логина и пароля и, если авторизация прошла успешно, вы попадаете в интерфейс админки. Вот и вся хитрость.

Levik
Спасибо за видео-уроки. Наглядно и в динамике. Можно отследить весь _процесс_ создания интерфейса для админки.

Артур
а в чем удобство, что-то не пойму?
проше самому написать шаблоны и вставлять в нужных местах

Андрей Морковин
Удобство как раз в том, чтобы самому не писать шаблоны.

Lardok
Вот так! Век живи, век учись, а я как-то о CSS-Framework и не слышал никогда! Спасибо, Андрей, есть чем ночь занять

Dмитрий
Если на сайте 15-20 страниц, то достаточно просто сделать страничку и самому. А вот если их более сотни, да они еще и обнавляются периодически, то ручками тяжеловато будет

Андрей Морковин
Дмитрий, фишка не совсем в этом, точнее даже, совсем не в этом Сейчас поясню.
На сайте есть 100 страниц и все они регулярно обновляются. Регулярно может обновляться только контент. Контент лежит себе в SQL-базе данных и, по запросу посетителя вставляется в один HTML + CSS шаблон. При помощи вставки в этот шаблон различного контента, получается множество страниц.
Мне сложно представить сайт из 100 страниц, где каждая новая страница имела бы свой HTML и CSS. Так никто не делает.
В результате, на любом сайте есть 15-20 индивидуально сверстанных страниц (и это в лучшем случае, обычно страниц бывает 3-4).
Теперь давайте разберемся с плюсами данного framework-а.
HTML + CSS — код нужно писать самому (как это делать, можно посмотреть в видеоуроках по div-верстке), если вы хотите получить хоть сколько-нибудь сложный или индивидуальный шаблон.
Когда вы верстаете админку, то только извращенный заказчик может потребовать индивидуальности ее дизайна. Из своей практики знаю, что для админки наиболее важен функционал, но, при этом, не должно быть косяков в отображении интерфейса. Все должно выглядеть аккуратно.
В этом случае серьезно сэкономить время и нервы помогает использование framework-а, т.к. все необходимые функциональные элементы интерфейса админки уже сверстаны, на них наложены симпотные стили, все выглядит красиво и стильно. А, главное, создатель framework-а почистил, в силу своих возможностей, баги и глюки и верстка кроссбраузерна.
Вот в чем приемущество framework.

Fantom-315
Действительно всё так я конечно понимаю что это прошлый пост и его вряд ли кто то увидеть но сказано правильно

sipa
Извините конечно за наглость, а продолжение будет?

red_lion
Возник вопрос, а что давно проблемы с сайтом css-framework, а то в начале этого года, было дело, заходил смотрел что к чему, а теперь большой облом, проблемы какие-то, толи на хостинге, толи просто ошибка в базе данных?
И как это владелец сайта ничего не предпринимает, а может сайт вообще куда-то переехал, а это просто остатки?

red_lion
Прошу прощения за наглую клевету, но сайт css-framework таки нормально работает.
Это просто у меня на работе шлюз что-то блокирует, потому и происходит ошибка, а так как я уже давно с другого места не выходил в интернет потому и возникло такое предположение.

Shandor
По видео больше похоже на не на фраймворк, а на кучу просто готовых верстанных кусков. Думаю удобно если влом писать свои блоки или мало времени.

Андрей
Уже тыщу лет не обновлялось сие творение

CSS-framework, или Как упростить процесс вёрстки

Итак, что же такое CSS-framework?

Ещё материалы по этой теме:

Комментарии:

Полезные ссылки: