Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 62
Собственно, если кто-где использует — отпишитесь, плиз, в комментах какой и дайте пару ссылок «заценить».
Я имею ввиду ссылки на сайты, которые сделали вы, используя CSS фреймворк)
masterrr.name — на bootstrap css/js
Форма регистрации на 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. Собака в поле емейла вообще абсолютно ненужная фигня, которая только отвлекает внимание.
3. Уберите подтверждение пароля. Его отправляйте в письме с регистрацией. Если пароль ввели неверно — можно будет узнать его из почты.
Спасибо за критику.
1. — вот это стоящее замечание.
2. — это только проба фитч bootstrap
3. — С одной стороны удобно, но если я введу неправильный пароль, будет неприятно.
1. — вот это стоящее замечание.
2. — это только проба фитч bootstrap
3. — С одной стороны удобно, но если я введу неправильный пароль, будет неприятно.
А так неприятно в любом случае. Можно в письме рядом с паролем делать ссылку сменить пароль, на всякий случай. Ссылка должна заходить без ввода пароля естественно.
> 3. Уберите подтверждение пароля. Его отправляйте в письме с регистрацией. Если пароль ввели неверно — можно будет узнать его из почты.
Передавать пароль по почте в открытом виде? Вдобавок хранить пароль в открытом виде в базе? Избавиться от подтверждения пароля можно просто — рядом поставить чекбокс " показать пароль [x]"
Правда мне это не поможет например, я уже забыл какой у меня пароль — набираю пароль на автомате, пальцы то помнят.
> Инвайты файлами?
> Вы что курите там? )
А как вы на хабр попали?
Передавать пароль по почте в открытом виде? Вдобавок хранить пароль в открытом виде в базе? Избавиться от подтверждения пароля можно просто — рядом поставить чекбокс " показать пароль [x]"
Правда мне это не поможет например, я уже забыл какой у меня пароль — набираю пароль на автомате, пальцы то помнят.
> Инвайты файлами?
> Вы что курите там? )
А как вы на хабр попали?
> Передавать пароль по почте в открытом виде?
Не думаю что большая проблема
> Вдобавок хранить пароль в открытом виде в базе?
Этого я не говорил
> Избавиться от подтверждения пароля можно просто — рядом поставить чекбокс " показать пароль [x]"
Не спасает от неверно набранного пароля
> А как вы на хабр попали?
Дату регистрации мою не поленитесь глянуть
Не думаю что большая проблема
> Вдобавок хранить пароль в открытом виде в базе?
Этого я не говорил
> Избавиться от подтверждения пароля можно просто — рядом поставить чекбокс " показать пароль [x]"
Не спасает от неверно набранного пароля
> А как вы на хабр попали?
Дату регистрации мою не поленитесь глянуть
> Не думаю что большая проблема
А по мне так очень даже большая проблема.
> Этого я не говорил
Поместить его в очередь для отправки? Отправить сразу же после обработки формы?
> Не спасает от неверно набранного пароля
Как это не спасает? Человек вводит пароль, кликает куда надо, смотрит на пароль который он ввел, успех.
> Дату регистрации мою не поленитесь глянуть
Как это вы с 2007 года на хабре и не знаете, что тут инвайты картинками? Эту тему тут обсуждали уже не раз. И свои реализации запиливали тоже.
А по мне так очень даже большая проблема.
> Этого я не говорил
Поместить его в очередь для отправки? Отправить сразу же после обработки формы?
> Не спасает от неверно набранного пароля
Как это не спасает? Человек вводит пароль, кликает куда надо, смотрит на пароль который он ввел, успех.
> Дату регистрации мою не поленитесь глянуть
Как это вы с 2007 года на хабре и не знаете, что тут инвайты картинками? Эту тему тут обсуждали уже не раз. И свои реализации запиливали тоже.
> Поместить его в очередь для отправки? Отправить сразу же после обработки формы?
Именно
> Как это не спасает? Человек вводит пароль, кликает куда надо, смотрит на пароль который он ввел, успех
А зачем его тогда скрытым вообще делать? )
>Как это вы с 2007 года на хабре и не знаете, что тут инвайты картинками? Эту тему тут обсуждали уже не раз. И свои реализации запиливали тоже.
Я их отправляю а не получаю. Обсуждений не видел или пропустил.
Именно
> Как это не спасает? Человек вводит пароль, кликает куда надо, смотрит на пароль который он ввел, успех
А зачем его тогда скрытым вообще делать? )
>Как это вы с 2007 года на хабре и не знаете, что тут инвайты картинками? Эту тему тут обсуждали уже не раз. И свои реализации запиливали тоже.
Я их отправляю а не получаю. Обсуждений не видел или пропустил.
> Именно
Отправлять сразу не вариант. В очередь ложить в открытом виде тоже не хорошо получается. Учитывая, что многие пользователи не защищают свой компьютер паролем — любой может посмотреть пароль на почту.
> А зачем его тогда скрытым вообще делать? )
Светить пароль все время не прилично. Алсо, кхм кхм:
Свой-то сайт видели? :3
> Я их отправляю а не получаю. Обсуждений не видел или пропустил.
Пригласил на сайт:
Rigo Insana
Как-то странно звучит заявление о том, что вы их отправляете если честно. Но суть моего комментария в том, что спрашивать у ТМ надо почему это они решили сделать инвайт файлом.
Отправлять сразу не вариант. В очередь ложить в открытом виде тоже не хорошо получается. Учитывая, что многие пользователи не защищают свой компьютер паролем — любой может посмотреть пароль на почту.
> А зачем его тогда скрытым вообще делать? )
Светить пароль все время не прилично. Алсо, кхм кхм:
Свой-то сайт видели? :3
> Я их отправляю а не получаю. Обсуждений не видел или пропустил.
Пригласил на сайт:
Rigo Insana
Как-то странно звучит заявление о том, что вы их отправляете если честно. Но суть моего комментария в том, что спрашивать у ТМ надо почему это они решили сделать инвайт файлом.
> Отправлять сразу не вариант. В очередь ложить в открытом виде тоже не хорошо получается. Учитывая, что многие пользователи не защищают свой компьютер паролем — любой может посмотреть пароль на почту.
Если в таком ключе — да, согласен
> *картинка метабара*
Ну тут форму регистрации составлял наш продакт менеджер — я с ним по этому поводу не спорил.
> Как-то странно звучит заявление о том, что вы их отправляете если честно. Но суть моего комментария в том, что спрашивать у ТМ надо почему это они решили сделать инвайт файлом
На мой взгляд самое удобное — ссылкой. Ну ТМ сделали — значит им удобнее.
Если в таком ключе — да, согласен
> *картинка метабара*
Ну тут форму регистрации составлял наш продакт менеджер — я с ним по этому поводу не спорил.
> Как-то странно звучит заявление о том, что вы их отправляете если честно. Но суть моего комментария в том, что спрашивать у ТМ надо почему это они решили сделать инвайт файлом
На мой взгляд самое удобное — ссылкой. Ну ТМ сделали — значит им удобнее.
))) А просто ссылку нельзя было дать, чтобы мышкой пощелкать было где?) Думаю, большинство здесь догадались бы, как посмотреть исходный код)
Постоянно использую MeyerReset
Я бы сказал они полезны в специфических случаях, как пример — верстка под мобилки.
Например, LESS
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 и прочие…
Отлично, но это не фреймворк, это набор инструментов, виджетов и присетов, но он не определяет структуру клиентской части приложения.
habrahabr.ru/blogs/css/128651/#comment_4255481
Думаю, что все же фреймворк.
Думаю, что все же фреймворк.
Не использую вообще. Blueprint, например, годится только для нерезиновых макетов, которые мне никогда не приходилось верстать. Лучший CSS-фреймворк, по моему мнению, — это reset.css Мейера.
Теперь резиновый: www.ixda.org/node/15655
Популярный 960gs тоже есть в резиновом варианте, то есть это может не быть проблемой во многих случаях.
Популярный 960gs тоже есть в резиновом варианте, то есть это может не быть проблемой во многих случаях.
фреймворки полезно покрутить по диагонали и черпнуть идей, обычно пароску найдётся даже для профессионала. так же удобно взять заготовку отображения области контента после цсс-ресета.
не стоит фреймворки воспринимать как догмы, их придумывают те же смертные и многие из фреймворков для реальной жизни не годятся и понятны лишь автору в его личных задачах.как пример идея grid960, где фактически классами зашиваются размеры в блоки и разработчик теряет возможность управлять раскладкой при помощи css (не изменяя сам шаблон). но для какой-нибудь газетной раскладки вроде первой страницы NYtimes в случае верстки подобного ежедневно ручками (боже упаси, но мало ли у кого какие задачи) — grid960 воистину будет идельным решением.
не стоит фреймворки воспринимать как догмы, их придумывают те же смертные и многие из фреймворков для реальной жизни не годятся и понятны лишь автору в его личных задачах.как пример идея grid960, где фактически классами зашиваются размеры в блоки и разработчик теряет возможность управлять раскладкой при помощи css (не изменяя сам шаблон). но для какой-нибудь газетной раскладки вроде первой страницы NYtimes в случае верстки подобного ежедневно ручками (боже упаси, но мало ли у кого какие задачи) — grid960 воистину будет идельным решением.
.как пример идея grid960, где фактически классами зашиваются размеры в блоки и разработчик теряет возможность управлять раскладкой при помощи css (не изменяя сам шаблон)
насколько я понял grid960 написан less ?? Тогда нужно и использовать less. То есть в html коде задаешь классы, отражающие сущность тега:
ul class=«orders»
а в mysite.less
.orders
{
.grid_5;
}
такое реально?
насколько я понял grid960 написан less ?? Тогда нужно и использовать less. То есть в html коде задаешь классы, отражающие сущность тега:
ul class=«orders»
а в mysite.less
.orders
{
.grid_5;
}
такое реально?
грид позволяет ровно то, что я описал. а less — это вообще не css-фреймворк, это псевдо-инструмент. такое рождается, когда программисты лезут туда, где программирования как такового нет (css) и это ни что иное как самая обычная кодогенерация.
то, что вы написали — это гибридное решение убирающее недостаток grid960, если пользуетесь less — то вполне, очень элегантно я б сказал. но в итоге поддержка требует больше понимания, человек должен знать grid960, чтоб менять раскладку и понимать less, а это — уже не девочка-верстальщик со средненьким окладом, а кто-то подороже.
то, что вы написали — это гибридное решение убирающее недостаток grid960, если пользуетесь less — то вполне, очень элегантно я б сказал. но в итоге поддержка требует больше понимания, человек должен знать grid960, чтоб менять раскладку и понимать less, а это — уже не девочка-верстальщик со средненьким окладом, а кто-то подороже.
Я про CSS фреймворки вообще не слыхал…
Можно ссылку где можно ознакомиться?
Можно ссылку где можно ознакомиться?
Использую 960 Grid System
Использую ее в версии Fluid: www.designinfluences.com/fluid960gs/
Использую 960 Grid System иногда, и часто полузюсь html5boilerplate (не фреймворк, но все же есть много полезных штучек).
Вообще фреймворк это здорово. CSS фреймворки отлично применять в системах с возможностью динамически изменять оформление, подгружаем новый CSS и у вас новый скин на сайте или какой-то его части. Точно так же удобно, если у вас несколько проектов на основе одного кода(каталоги, магазины, форумы) но необходимо различное оформление.
И тут подкрадывается вопрос «А почему бы не использовать собственный фреймворк?» и на него есть стандартный ответ «повторное использование кода, работа в команде, возможность заказчику самому по мануалам общедоступного фреймворка вносить изменения»
И тут подкрадывается вопрос «А почему бы не использовать собственный фреймворк?» и на него есть стандартный ответ «повторное использование кода, работа в команде, возможность заказчику самому по мануалам общедоступного фреймворка вносить изменения»
Еще пример bootstrap'a:
https://www.bitcoinica.com/
https://www.bitcoinica.com/
… а потом нужно поменять размер шрифта, и «xlarge» становится 10px; а large — 25px…
Сомнительное удовольствие
Сомнительное удовольствие
960.gs очень удобный CSS Framework
Рекомендую ознакомиться с докладом Вадима Макеева «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.
сам пользуюсь своими наработками скопившимися за годы в целый фреймворк который вобрал в себя все самое нужное и лучшее. Следует читать: который содержит все что мне нужно чтобы быстро сваять нравящуюся мне «веб-морду». Там начиная от ресета(ну естественно сразу сбрасывающего до нужных мне цветов, размеров, шрифтов итд) и грида до кнопочек, CSS3-анимации итд итп.
в качестве грида раньше использовал измененную: fluid.newgoldleaf.com
кстати, совет тем кто пользуется Bootstrap — добавьте *{outline:none} иначе некрасивый аутлайн вылезает у меню(и не только) при клике. А те кто пользует jQuery Mobile -посмотрите как «navbar» внутри футера смотрится в опере)
Любой CSS-фреймворк не стоит пользовать как есть… даже если в планах обновление на новые версии этого самого фрймворка. Например Bootstrap'ом пользуюсь начиная с версии 1.1 и каждый раз в нем меняю цвет бордюра и тени у input/textarea. так-же полностью удаляю код кнопочек ибо у меня свои.
хотелось бы ссылочек на интересные css3-фреймворки с уклоном на анимацию)) ибо nginx и так шлет старые браузеры куда подальше(на страницу с уведомлением и ссылками на скачивание браузеров) а новые хотелось бы порадовать чем-то интерактивным на чистом css.
Пользуюсь blueprint, www.blueprintcss.org/
Очень качественные типографика и позиционирование элементов.
Очень качественные типографика и позиционирование элементов.
Еще один на boostrap — cctome.com
Использую связку html5boilerplate и 960.gs. Быстрый и удобный инструмент для прототипирования и разработки малых и средних сайтов без претензий к дизайнам.
Похоже я щас словлю, но лучший фреймворк это свой фреймворк.
я пользуюсь вот этим фреймворком: code.google.com/p/css-framework/
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS фреймворки: считаете их полезными?