CSS Framework «Object Oriented CSS»

    Оригинальный css фреймворк «Object Oriented CSS» от инженера Yahoo Nicole SULLIVAN-HAAS
    Очень молодой фреймворк (первый коммит — January 28, 2009), после беглого просмотра приятно удивила структура компонентов, а
    после просмотра презентации, захотелось немедлено скачать и опробовать его.

    Существует огромное количество css фреймворков, какой должен быть css велосипед фреймворк, чтобы облегчить жизнь веб-разработчикам?
    Очевидно, фреймворк созданный и поддерживаемый ведущими гигантами веб-индустрии (Yahoo,Google,Yandex) имеет гораздо больше шансов на успех,
    да и качество его будет на порядок выше.
    Вот наткнулся на презентацию CSS Framework своими руками от Яндекса,
    фреймворк YUI от Yahoo давно есть, а у Google есть GWT.
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 22
    • +1
      так и не нашел где скачать чего-нить чтобы ручками потрогать

      Просто там две части в докладе, вот презентация второй, там на предпоследнем слайде ссылка на архив с несколькими примерами.
      • 0
        ага спасибо, только там жиденкий архивчик все равно, хотелось бы еще скрипты для склейки этого всего (а то там тьма файлов)
      • +3
        в презентациях всегда всё красочно и красиво… пишите классы, не завязывайтесь на имена тэгов…
        а в коде: h1, h2, h3, h4, h5, h6, ul, ol,dl, p {padding:10px;}
        • +4
          ну тут классов нет :)
          он имел ввиду что плохо писать h1.myclass {} или span.elseclass{}

          а в h1, h2, h3, h4, h5, h6, ul, ol,dl, p {padding:10px;} ничего плохого нету
          • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            У Googla GWT
            • +1
              угу, там много всяких вкусностей, только где там CSS framework?
              я его несколько раз смотрел, так и не нашел что-нить, нашел что он да он есть, а что где скачать тоже не нашел :)
            • –1
              народ подкиньте кармы или сами перенесите в блог css
              • 0
                перенес :)
                • +3
                  Ну всё же этот фреймворк не от Yahoo, это персональный проект сотрудника Yahoo. И упоминать его в контексте YUI я бы не стал.
                  • 0
                    что-то совсем не впечатлило…

                    Сам пользуюсь вот этим
                    • +1
                      developer.yahoo.com/yui/grids/
                      devkick.com/lab/tripoli/
                      code.google.com/p/blueprintcss/
                      www.yaml.de/en/home.html
                      bluetrip.org/
                      code.google.com/p/malo/ — оч. компактный фрейворк malo
                      code.google.com/p/emastic/
                      css-framework.ru/
                      • 0
                        Добавлю 5 копеек csswizardry.com/typogridphy/
                        Я не дизайнер и вообще не веб-разработчик, мне пример понравился.
                      • +2
                        …немедлено скачать и опробОвать
                        • 0
                          поправил, спасибо.
                          • 0
                            немедленНо скачать и опробовать :)
                        • +4
                          > Вот наткнулся на презентацию CSS Framework своими руками от Яндекса
                          > так и не нашел где скачать чего-нить чтобы ручками потрогать

                          Говорить за автора — дело неблагодарное, но всё же. Мне кажется, что вы упустили смысл презентации, что звучит в его названии: «своими руками» значит своими руками, т.е. как сделать что-то самому, а не «скочать».

                          А данный фреймворк, конечно, гм… сомнительный:

                          .mediaExt {overflow:hidden; _overflow:visible; zoom:1;}
                          • –1
                            zoom для IE6 как-ни крути нужно добавлять если цель overflow — создать новый контекст позицирования.
                            Другое дело что добавлять нужно только для IE6, а сбрасывать overflow на дефолт — да, иногда это бывает полезно (пару раз встречал редкие глюки)… но правилом это нельзя считать.
                            • 0
                              Я скорее о том, что хаки и невалидный CSS лучше писать в отдельном файле…
                              Ну и сброс overflow обратно только для IE — полезность сомнительная.
                          • +4
                            Что-то сам фреймворк не соответствует принципам, описанным в презентации. Никакой гибкостью там и не пахнет, обычный набор (классы для модульной сетки + ресет + типографика + стили для основных элементов). Шаг влево шаг вправо и данный фреймворк уже не подходит. Плюс это все монолит (жестко захардкодены стили для элементов и лейаута). Да и качество кода сомнительное:

                            /* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
                            h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#DF2B72;}
                            h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}
                            h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}
                            h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}
                            h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}
                            h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}

                            А для чего тогда эти классы?

                            .line, .lastUnit {overflow: hidden; _overflow: visible; zoom:1;width:auto !important;}

                            И затем еще написано, что есть проблема с блоками, которые выходят за границы .line. Почему не использовать easyclearing?

                            .size1of2{width:50%;_width:49.9% !important;}
                            .size1of3{width:33.33333%;_width:33.25% !important;}
                            .size2of3{width:66.66666%;_width:66.65% !important;}
                            .size1of4{width:25%;_width:24.95% !important;}
                            .size3of4{width:75%;_width:74.95% !important;}
                            .size1of5{width:20%;_width:19.95% !important;}
                            .size2of5{width:40%;_width:39.95% !important;}
                            .size3of5{width:60%;_width:59.95% !important;}
                            .size4of5{width:80%;_width:79.95% !important;}

                            Это решение проблемы «прыгающих» блоков для лентяев.

                            P.S. Виталий Харисов лучше это делает :)
                            • +1
                              Согласен абсолютно. Этот фреймворк явно сделан под конкретную задачу и, судя по коду, проще написать свой, чем допиливать его до нормального состояния.

                              Я был в Яндексе на Субботнике, посвященном верстке. Дак вот, вариант Яндекса мне показался более гибким и удобным. Здесь же просто какая-то болванка, в которой не решена целая куча проблем, преследующих верстальщика. А если тогда проблемы не решены, то нафига тогда фреймворк?
                            • 0
                              Видимо, автор учится и ищет проблемы, вот и всё.

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое