CSS фреймворки: считаете их полезными?

     

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

    CSS фреймворки: считаете их полезными?

    • 11.8%Да, считаю полезными и использую (везде, где руки дотянутся)241
    • 30.6%Да, считаю полезными, но пользуюсь редко (или не пользуюсь, но все еще впереди)621
    • 23%Нет, считаю их бесполезными468
    • 34.3%CSS фреймворк? Не, не слыхал696
    Поделиться публикацией

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

      +3
      Собственно, если кто-где использует — отпишитесь, плиз, в комментах какой и дайте пару ссылок «заценить».
        +1
        Я имею ввиду ссылки на сайты, которые сделали вы, используя CSS фреймворк)
        +7
        Форма регистрации на twitter bootstrap 1.2.0
        <div style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1" 
            class="modal">
            <div class="modal-header">
                <h3>Регистрация нового пользователя</h3>
        
                </div>
                <div class="modal-body">
                    <form method="POST" class="form-stacked" action="/user/register" 
                          onsubmit="return false;" id="register-form">
                        <fieldset>
                                <div class="clearfix">
                                    <label for="login">Логин</label>
                                    <div class="input">
                                        <input type="text"
                                               placeholder="Введите имя пользователя" class="xlarge" />
                                        <span class="help-inline"></span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <label for="password">Пароль</label>
                                    <div class="input">
                                        <input type="password" placeholder="Введите пароль" class="xlarge" />
                                        <span class="help-inline"></span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <label for="password_two">Подтверждение пароля</label>
                                    <div class="input">
                                        <input type="password" placeholder="Введите подтверждение пароля" 
                                               class="xlarge" />
                                        <span class="help-inline"></span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <label for="password_two">Email</label>
                                    <div class="input-prepend">
                                        <span class="add-on">@</span>
                                        <input style="width: 244px;" type="text" placeholder="Введите адрес 
                                               почтового ящика" class="xlarge" />
                                        <span class="help-inline"></span>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <label for="invite">Инвайт</label>
                                    <input type="file" name="fileInput" id="fileInput" 
                                           class="input-file xlarge" />
                                    <br /><span class="help-inline">В данный момент проект проходит альфа 
                                        тестирование, регистрация возможна только приглашениям - 
                                        специальным png файлам.</span>
                                </div>
                                <div class="clearfix" >
                                    <button class="btn primary" id="submit" type="submit" disabled>
                                        Зарегистрироваться</button> 
                                    <button class="btn" type="reset">Начать заново</button> 
                                </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        


          0
          Инвайты файлами?
          Вы что курите там? )
          Для увеличения конверсии я бы
          1. Убрал поле логин — все уже привыкают логиниться по емейлу.
          2. Собака в поле емейла вообще абсолютно ненужная фигня, которая только отвлекает внимание.
          3. Уберите подтверждение пароля. Его отправляйте в письме с регистрацией. Если пароль ввели неверно — можно будет узнать его из почты.
            0
            Спасибо за критику.
            1. — вот это стоящее замечание.
            2. — это только проба фитч bootstrap
            3. — С одной стороны удобно, но если я введу неправильный пароль, будет неприятно.
              0
              А так неприятно в любом случае. Можно в письме рядом с паролем делать ссылку сменить пароль, на всякий случай. Ссылка должна заходить без ввода пароля естественно.
                +1
                Чувствую, здесь нужно придумать то то новое.
                  0
                  Дайте юзеру самому решать, вводить повторно пароль в форме или нет.
                  Сделайте поле необязательным. Можно еще добавить к этому полю кнопку с крестиком: ну не хочется снова вводить пароль — нажал на этот крестик и поле с доп. паролем исчезает.
                    +1
                    Думаю, можно сделать проще. По умолчанию два поля: пароль и повтор, рядом галочка «показывать пароль.» Если она выделена, поле для повторного ввода убираем, если она не выбрана, показываем. Если пользователь смотрел введенный пароль и не менял его, незачем показывать второе поле.
              0
              > 3. Уберите подтверждение пароля. Его отправляйте в письме с регистрацией. Если пароль ввели неверно — можно будет узнать его из почты.

              Передавать пароль по почте в открытом виде? Вдобавок хранить пароль в открытом виде в базе? Избавиться от подтверждения пароля можно просто — рядом поставить чекбокс " показать пароль [x]"

              Правда мне это не поможет например, я уже забыл какой у меня пароль — набираю пароль на автомате, пальцы то помнят.

              > Инвайты файлами?
              > Вы что курите там? )

              А как вы на хабр попали?
                –1
                > Передавать пароль по почте в открытом виде?
                Не думаю что большая проблема

                > Вдобавок хранить пароль в открытом виде в базе?
                Этого я не говорил

                > Избавиться от подтверждения пароля можно просто — рядом поставить чекбокс " показать пароль [x]"
                Не спасает от неверно набранного пароля

                > А как вы на хабр попали?
                Дату регистрации мою не поленитесь глянуть
                  0
                  > Не думаю что большая проблема

                  А по мне так очень даже большая проблема.

                  > Этого я не говорил

                  Поместить его в очередь для отправки? Отправить сразу же после обработки формы?

                  > Не спасает от неверно набранного пароля

                  Как это не спасает? Человек вводит пароль, кликает куда надо, смотрит на пароль который он ввел, успех.

                  > Дату регистрации мою не поленитесь глянуть

                  Как это вы с 2007 года на хабре и не знаете, что тут инвайты картинками? Эту тему тут обсуждали уже не раз. И свои реализации запиливали тоже.
                    0
                    > Поместить его в очередь для отправки? Отправить сразу же после обработки формы?
                    Именно

                    > Как это не спасает? Человек вводит пароль, кликает куда надо, смотрит на пароль который он ввел, успех
                    А зачем его тогда скрытым вообще делать? )

                    >Как это вы с 2007 года на хабре и не знаете, что тут инвайты картинками? Эту тему тут обсуждали уже не раз. И свои реализации запиливали тоже.
                    Я их отправляю а не получаю. Обсуждений не видел или пропустил.
                      +1
                      > Именно

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

                      > А зачем его тогда скрытым вообще делать? )

                      Светить пароль все время не прилично. Алсо, кхм кхм:
                      Метабар
                      Свой-то сайт видели? :3

                      > Я их отправляю а не получаю. Обсуждений не видел или пропустил.

                      Пригласил на сайт:
                      Rigo Insana

                      Как-то странно звучит заявление о том, что вы их отправляете если честно. Но суть моего комментария в том, что спрашивать у ТМ надо почему это они решили сделать инвайт файлом.
                        0
                        > Отправлять сразу не вариант. В очередь ложить в открытом виде тоже не хорошо получается. Учитывая, что многие пользователи не защищают свой компьютер паролем — любой может посмотреть пароль на почту.
                        Если в таком ключе — да, согласен

                        > *картинка метабара*
                        Ну тут форму регистрации составлял наш продакт менеджер — я с ним по этому поводу не спорил.

                        > Как-то странно звучит заявление о том, что вы их отправляете если честно. Но суть моего комментария в том, что спрашивать у ТМ надо почему это они решили сделать инвайт файлом
                        На мой взгляд самое удобное — ссылкой. Ну ТМ сделали — значит им удобнее.
              0
              ))) А просто ссылку нельзя было дать, чтобы мышкой пощелкать было где?) Думаю, большинство здесь догадались бы, как посмотреть исходный код)
                +1
                Ссылку нельзя. Если только Вы Neo, то сможете попасть на мой локальный сервер
              +1
              Постоянно использую MeyerReset
              0
              Я бы сказал они полезны в специфических случаях, как пример — верстка под мобилки.
                +1
                Верстка под мобилку — тоже первый вариант
                  0
                  А можно пару примеров?
                    +1
                    Комент ниже а также jqtouch
                      0
                      jqtouch нереально тормозит на большинстве мобильных телефонов. Применение им можно нати допустим при разработке под iPad. Хотя с процессором в гигагерц тоже справляются…
                    +1
                    lessframework.com/ — хорош и для мобилы и для больших мониторов.
                    –1
                    Например, LESS
                      +6
                      Less — это не фреймворк. Less, впрочем как и sass это язык. Хоть и не тьюринг-полный :)
                        0
                        Ну так то да, собственно для CSS понятие фреймворк относительное. Что считать css-фреймворком? Набор заранее готовых стилей (Bootstrap, например) или язык для ускорения разработки (LESS, SASS и т. п.)?
                          +1
                          CSS фреймворк — это набор стилей и техник, которые позволяют быстрее и проще верстать макеты сайтов, т.е. как бы и то, и то :)
                            –2
                            Получается да, и то и то.
                              +2
                              нет, sass, less компилируемые языки в css. но вот compass уже фреймворк
                          +1
                          Не обязательно, есть ещё и CSS фреймворк: lessframework.com/
                          0
                          например, гребаная Opera :(
                          +13
                          Bootstrap — классный CSS/JS фреймворк твиттера. Часто использую.
                            0
                            Я тоже его использую, правда вчера понял, что нужно с ним подождать. Написал класс на JS для валидации формы регистрации и авторизации, потом обновил bootstrap с 1.2.0 до 1.3.0, из .input пропали классы .error, .danger и прочие…
                              0
                              Отлично, но это не фреймворк, это набор инструментов, виджетов и присетов, но он не определяет структуру клиентской части приложения.
                            +13
                            Не использую вообще. Blueprint, например, годится только для нерезиновых макетов, которые мне никогда не приходилось верстать. Лучший CSS-фреймворк, по моему мнению, — это reset.css Мейера.
                              0
                              Теперь резиновый: www.ixda.org/node/15655
                              Популярный 960gs тоже есть в резиновом варианте, то есть это может не быть проблемой во многих случаях.
                              +3
                              фреймворки полезно покрутить по диагонали и черпнуть идей, обычно пароску найдётся даже для профессионала. так же удобно взять заготовку отображения области контента после цсс-ресета.

                              не стоит фреймворки воспринимать как догмы, их придумывают те же смертные и многие из фреймворков для реальной жизни не годятся и понятны лишь автору в его личных задачах.как пример идея grid960, где фактически классами зашиваются размеры в блоки и разработчик теряет возможность управлять раскладкой при помощи css (не изменяя сам шаблон). но для какой-нибудь газетной раскладки вроде первой страницы NYtimes в случае верстки подобного ежедневно ручками (боже упаси, но мало ли у кого какие задачи) — grid960 воистину будет идельным решением.
                                0
                                .как пример идея grid960, где фактически классами зашиваются размеры в блоки и разработчик теряет возможность управлять раскладкой при помощи css (не изменяя сам шаблон)

                                насколько я понял grid960 написан less ?? Тогда нужно и использовать less. То есть в html коде задаешь классы, отражающие сущность тега:

                                ul class=«orders»

                                а в mysite.less

                                .orders
                                {
                                .grid_5;
                                }

                                такое реально?
                                  +1
                                  грид позволяет ровно то, что я описал. а less — это вообще не css-фреймворк, это псевдо-инструмент. такое рождается, когда программисты лезут туда, где программирования как такового нет (css) и это ни что иное как самая обычная кодогенерация.

                                  то, что вы написали — это гибридное решение убирающее недостаток grid960, если пользуетесь less — то вполне, очень элегантно я б сказал. но в итоге поддержка требует больше понимания, человек должен знать grid960, чтоб менять раскладку и понимать less, а это — уже не девочка-верстальщик со средненьким окладом, а кто-то подороже.
                                0
                                Я про CSS фреймворки вообще не слыхал…
                                Можно ссылку где можно ознакомиться?
                                +6
                                Использую 960 Grid System
                                +3
                                Использую 960 Grid System иногда, и часто полузюсь html5boilerplate (не фреймворк, но все же есть много полезных штучек).
                                  +1
                                  Вообще фреймворк это здорово. CSS фреймворки отлично применять в системах с возможностью динамически изменять оформление, подгружаем новый CSS и у вас новый скин на сайте или какой-то его части. Точно так же удобно, если у вас несколько проектов на основе одного кода(каталоги, магазины, форумы) но необходимо различное оформление.
                                  И тут подкрадывается вопрос «А почему бы не использовать собственный фреймворк?» и на него есть стандартный ответ «повторное использование кода, работа в команде, возможность заказчику самому по мануалам общедоступного фреймворка вносить изменения»
                                    0
                                    Еще пример bootstrap'a:
                                    https://www.bitcoinica.com/
                                      +2
                                      … а потом нужно поменять размер шрифта, и «xlarge» становится 10px; а large — 25px…
                                      Сомнительное удовольствие
                                        +2
                                        Стараюсь пользоваться идеями БЭМа — clubs.ya.ru/bem/
                                          0
                                          читал про него недавно а демок так и не обнаружил.
                                          0
                                          960.gs очень удобный CSS Framework
                                            +1
                                            Рекомендую ознакомиться с докладом Вадима Макеева «CSS-фреймворки». По ссылки можно посмотреть видео и саму презентацию в PDF. Вадим указывает на плюсы и минусы фреймворков. Местами информация устарела, но основные тезисы все еще актуальны.
                                              +1
                                              css фреймворки, как любой инструмент — иногда полезны, иногда — нет. В проектах, где использую jquery UI всегда стараюсь использовать из его css все что только можно. Хотя отношение к именно к этому фреймворку у меня двоякое…
                                                0
                                                вот еще пример Bootstrap: ragechat.com а еще помогал недавно делать темы для Pinax на Bootstrap и jQuery Mobile.
                                                сам пользуюсь своими наработками скопившимися за годы в целый фреймворк который вобрал в себя все самое нужное и лучшее. Следует читать: который содержит все что мне нужно чтобы быстро сваять нравящуюся мне «веб-морду». Там начиная от ресета(ну естественно сразу сбрасывающего до нужных мне цветов, размеров, шрифтов итд) и грида до кнопочек, CSS3-анимации итд итп.
                                                в качестве грида раньше использовал измененную: fluid.newgoldleaf.com
                                                кстати, совет тем кто пользуется Bootstrap — добавьте *{outline:none} иначе некрасивый аутлайн вылезает у меню(и не только) при клике. А те кто пользует jQuery Mobile -посмотрите как «navbar» внутри футера смотрится в опере)
                                                Любой CSS-фреймворк не стоит пользовать как есть… даже если в планах обновление на новые версии этого самого фрймворка. Например Bootstrap'ом пользуюсь начиная с версии 1.1 и каждый раз в нем меняю цвет бордюра и тени у input/textarea. так-же полностью удаляю код кнопочек ибо у меня свои.

                                                хотелось бы ссылочек на интересные css3-фреймворки с уклоном на анимацию)) ибо nginx и так шлет старые браузеры куда подальше(на страницу с уведомлением и ссылками на скачивание браузеров) а новые хотелось бы порадовать чем-то интерактивным на чистом css.
                                                  +1
                                                  Пользуюсь blueprint, www.blueprintcss.org/
                                                  Очень качественные типографика и позиционирование элементов.
                                                    0
                                                    Еще один на boostrap — cctome.com
                                                      0
                                                      Использую связку html5boilerplate и 960.gs. Быстрый и удобный инструмент для прототипирования и разработки малых и средних сайтов без претензий к дизайнам.
                                                        0
                                                          +1
                                                          Похоже я щас словлю, но лучший фреймворк это свой фреймворк.
                                                            0
                                                            я пользуюсь вот этим фреймворком: code.google.com/p/css-framework/

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

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