Свой минимальный grid CSS-фреймворк. Что в нем должно быть?

    Сделав вид, что не знаю о холиварах вокруг css-фреймворков и ненависти к велосипедам, поделюсь своими мыслями («Еще один все понял» © Лепрозорий) по поводу надобности и удобства использования сабжа.

    Их есть куча и они обладают своей идеологией, а, например 960gs, Blueprint, YUI grids — самые мне известные и опробованные на собственной коже.

    Blueprint с 960gs считают, что вся наша жизнь — сетка, стили для ширины колонки нужно называть согласно количеству занимаемых минимальных ширин колонок. «Из коробки» первый считает, что колонок 24 (имеет какой-то скрипт-генератор, позволяющий стандартные количество и ширину менять); второй утверждает, что колонок может быть 12 или 16, об этом нужно сообщить в класснейме контейнера. Есть еще несколько нюансов, но вцелом они схожи. Если брать дизайн и верстать, стараясь обойтись одним только blueprint-ом — лучше не надо.

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

    К сожалению среднестатистические дизайны почему-то не вписываются ни в сетки(либо вписываются, но с какими-то своими нюансами), ни в лайауты, если специально под фреймворк не рисовать. В идеале при верстке у меня получалось использовать максимум 20% возможностей фреймворка (ну reset, вспомогательные классы типа ".clear"/".error"/".success", ). Стандартная фреймворчная типографика никуда не годится(нужно как минимум дополнять) хоть и красивенько смотрится на демках.

    Всего один раз мне приходилось видеть дизайн-документ, где вся типографика была расписана подробно: цвета, шрифты, размеры, line-height-ы; и не приходилось махать линейкой в фотошопе.

    Жизнь заставила подготовить себе набор классов-инструментов для упрощения и ускорения верстки, а точнее для рисования сетки, и что-то еще. Чаще нужно, чтобы колонки/блоки в дизайне имели какие-то пропорции(33/33/33, 70/30 и т.д.), а не фиксированный размер, элементы нужно иногда «клирить», прятать, выравнивать в них текст и выравнивать их сами.

    Итак, вот оно:

    .clear { clear:both; }
    .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    .clearfix { display: inline-block; }
    html[xmlns] .clearfix { display: block; }
    * html .clearfix { height: 1%; }

    .left { float:left; }
    .right { float:right; }
    .hidden { display:none; }

    .column { float: left; }
    .col-25 { width: 25%; }
    .col-50 { width: 50%; }
    .col-30 { width: 30%; }
    .col-33 { width: 33.3%; }
    .col-66 { width: 66.6%; }
    .col-70 { width: 70%; }
    .col-75 { width: 75%; }
    .col-100 { width: 100%; }

    .tleft { text-align: left; }
    .tright { text-align: right; }


    или pastie.org/816484

    Да, вообще ничего сложного и лишнего(как мне кажется), половину кода скопировал из Blueprint. Такое вот хозяйство я обычно называю util.css, подключаю и использую повсеместно, иногда беря в помощь чей-нибудь reset.css. Пригождается всегда.

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

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 15

      0
      я так смотрю что центровать Вы не любите :)
        0
        Хм, только сейчас заметил, что да, действительно «не люблю» :)

        Обычно выравнивание текста по центру мне попадалось настолько редко, что я даже не задумывался о том, чтобы выносить подобную деталь в класс.
          0
          Кто нибудь читает старые посты?
          +2
          Быт заел :)

          Хотя мне бы хотелось видеть CSS-фреймворк, который сам как-то с браузерами справлялся и их самодурством.

          И плюс, чтобы минимум дублирования кода было.

          Что-то подобное видел под названием xCSS или pCSS, типа там ещё PHP поверх проходит и уже CSS генерит.

          В идеале у верстальщика семантичный без дубляжа псевдо-CSS высокоуровневый, а клиенту уже выдаётся minified «сбилденный» чистый CSS, в котором все хаки учтены.

          0
          Можно продолжить список :)

          .color-red
          .color-green
          .color-blue
          .color-orange
          .color-white
          .color-black
          .border-1px-solid-red
          .border-1px-solid-green
            0
            Приведенный выше код нацелен в первую очередь на форматирование блоков, это есть упрощенная версия гридов. А вот цветовое оформление в фреймворке предсказать сложнее.
            Вот так то! К.О.
          • UFO just landed and posted this here
              0
              По поводу .clearfix:after. Многие люди считают, что в reset.сss достаточно написать "* {margin:0;padding:0;}", другие продолжают пользоваться его расширенной версией.

              Я ведь не утверждаю, что все написанное мной нужно использовать вразрез здравому смыслу. Мне пригождается.
              • UFO just landed and posted this here
                  0
                  Спасибо, полезные ссылки. Давно я Харисова не читал.
                    0
                    Когда то думал изучить чей-нибудь фреймворк, но было лень и лень эта вывела именно на этот доклад, который все наглядно рассказал. Я согласен с докладчиком.
                0
                .hidden {visibility: hidden;}
                .none {display: none;}

                наверное так лучше
                  0
                  Здравое замечание, если оперировать понятием «спрятать» в рамках того, как это понимает цсс.

                  На практике же с «visibility: hidden;» я сталкиваюсь только если нужно, например, использовать прием text image replacement
                    0
                    А еще полезно было во времена без FireBug
                    такие штуки:
                    /* Debug */
                    .debug-red {
                       border: 1px solid red !important;
                    }
                    .debug-green {
                       border: 1px solid Green !important;  
                    }
                    .debug-blue {
                       border: 1px solid blue !important;  
                    }
                    .bg-red {
                    	background-color: #ff97ae !important;
                    }
                    .bg-green {
                    	background-color: #80ff94 !important;
                    }
                    .bg-blue {
                    	background-color: #b8e1fc !important;
                    }
                    

                    Удобно выделить блок, чтобы видно было. Ведь иногда блоки в высоту не тянуться, потомучто забыт clearfix.

                    В основном такие классы полезны при отладке.

                  Only users with full accounts can post comments. Log in, please.