Как стать автором
Обновить

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

Собственно, если кто-где использует — отпишитесь, плиз, в комментах какой и дайте пару ссылок «заценить».
Я имею ввиду ссылки на сайты, которые сделали вы, используя CSS фреймворк)
Форма регистрации на 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>


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ul class=«orders»

а в mysite.less

.orders
{
.grid_5;
}

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

то, что вы написали — это гибридное решение убирающее недостаток grid960, если пользуетесь less — то вполне, очень элегантно я б сказал. но в итоге поддержка требует больше понимания, человек должен знать grid960, чтоб менять раскладку и понимать less, а это — уже не девочка-верстальщик со средненьким окладом, а кто-то подороже.
Я про CSS фреймворки вообще не слыхал…
Можно ссылку где можно ознакомиться?
Использую 960 Grid System иногда, и часто полузюсь html5boilerplate (не фреймворк, но все же есть много полезных штучек).
Вообще фреймворк это здорово. CSS фреймворки отлично применять в системах с возможностью динамически изменять оформление, подгружаем новый CSS и у вас новый скин на сайте или какой-то его части. Точно так же удобно, если у вас несколько проектов на основе одного кода(каталоги, магазины, форумы) но необходимо различное оформление.
И тут подкрадывается вопрос «А почему бы не использовать собственный фреймворк?» и на него есть стандартный ответ «повторное использование кода, работа в команде, возможность заказчику самому по мануалам общедоступного фреймворка вносить изменения»
… а потом нужно поменять размер шрифта, и «xlarge» становится 10px; а large — 25px…
Сомнительное удовольствие
НЛО прилетело и опубликовало эту надпись здесь
читал про него недавно а демок так и не обнаружил.
Рекомендую ознакомиться с докладом Вадима Макеева «CSS-фреймворки». По ссылки можно посмотреть видео и саму презентацию в PDF. Вадим указывает на плюсы и минусы фреймворков. Местами информация устарела, но основные тезисы все еще актуальны.
css фреймворки, как любой инструмент — иногда полезны, иногда — нет. В проектах, где использую jquery UI всегда стараюсь использовать из его css все что только можно. Хотя отношение к именно к этому фреймворку у меня двоякое…
вот еще пример 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.
Пользуюсь blueprint, www.blueprintcss.org/
Очень качественные типографика и позиционирование элементов.
Использую связку html5boilerplate и 960.gs. Быстрый и удобный инструмент для прототипирования и разработки малых и средних сайтов без претензий к дизайнам.
Похоже я щас словлю, но лучший фреймворк это свой фреймворк.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории