HTML KickStart — еще один способ быстро создать интерфейс своего веб-приложения

    Не один раз в комментариях замечал что народ негодует по поводу того, что веб-разработчики стали злоупотреблять использованием Bootstrap от Twitter. Признаюсь, я и сам успел закончить несколько небольших веб-приложений с использованием этого набора скриптов и стилей. Я не против использования Bootstrap от Twitter, я против злоупотребления этим когда есть столько хороших альтернатив. Я почти каждый день натыкаюсь на интерфейсы, построенные на Twitter Bootstrap, и это начинает напрягать. Последней каплей для поиска альтернативы стало изменение интерфейса биллинг панели моего хостера на шаблон Bootstrap. В этой записи я хотел бы немного рассказать про одну из альтернатив — HTML KickStart.

    Как написано на официальном сайте:
    HTML KickStart это ультра-легкий набор из HTML5, CSS и jQuery файлов, макетов и элементов дизайна для того, чтобы дать Вам возможность быстрого старта и экономии 10 часов рабочего времени в Вашем следующем проекте.

    HTML KickStart содержит в себе почти все, что может понадобиться для быстрого создания макетов сайта — слайдшоу, меню, настраиваемую сетку, кнопки, вкладки и многое другое, что сэкономит кучу времени, а время это деньги.

    Как проходит разработка с помощью HTML KickStart:



    От себя еще могу добавить что код у этого набора довольно понятный, занимает мало места, имеет большое количество встроенных функциональных элементов. Пока что я не использовал HTML KickStart в реальных проектах, но на досуге успел с ним поиграться — впечатление приятные, так что кому надоел Bootstrap от Twitter — у Вас есть замечательная альтернатива.

    Как раз сегодня вышла версия 0.9, список изменений можно посмотреть на блоге разработчика.

    UPD: Такое впечатление, что сайт лег от хабраэффекта.
    UPD2: Сайт поднялся и работает.
    • +133
    • 25,3k
    • 45
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +1
      Мне тоже он понравился, даже больше чем Bootstrap. Но с этими фреймворками есть одна проблема — они будут повсюду, если они хороши. А этот хорош. Поэтому для прототипирования он отлично подойдет — и с ним, кроме всего, очень приятно работать (по крайней мере, играться — я тоже с ним недавно поигрался) — а для продакшна я бы не стал использовать без кастомизации, даже с учетом того, что на нее может потребоваться время, которое деньги. Тем не менее, думаю попробовать использовать для админки в своей кастомной CMS.
        0
        Так Twitter Bootstrap поддерживает кастомизацию.
          0
          Да, оба поддерживают. Да и по определению не поддерживать не могут. По большому счету для кастомизации можно просто переделать CSS. Это, безусловно, не проблема.
          0
          Этот ваш HtmlKickStart не полностью кроссбраузерный. Табы, например, в опере (Opera 11.50) не работают:
          image
            0
            Еще и с PRE проблемы заметил под FF последним:
            image
              +2
              Кроссбраузерность — довольно странное требование для прототипа.
              • НЛО прилетело и опубликовало эту надпись здесь
            +10
            Неплохо, но бутстрап как-то по-приятнее, имхо.
            Но появление альтернативы — это хорошо. Чем больше их будет — тем лучше.
            Вообще, такие штуки, как по мне, исключительно для интерфейсов управляющих панелей и всякого такого. Сайты делать на них — мне кажется моветоном…
              +30
              Я даже Bootstrap не знал. Позор мне.
                0
                еще аналоги с таким большим набором готовых элементов есть?
                  +22
                  Недавно насобиралось:

                  Fbootstrapp
                  Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.
                  ckrack.github.com/fbootstrapp/

                  .Simpliste
                  cssr.ru/simpliste/ru.html

                  Foundation
                  An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
                  foundation.zurb.com/

                  Initializr is an HTML5 templates generator created by Jonathan Verrecchia to help you getting started with a new web project based on HTML5 Boilerplate. Initializr will generate for you a clean customizable template with just what you need to start!
                  www.initializr.com/
                    +1
                    YAML CSS
                    A modular CSS framework for truly flexible, accessible and responsive websites
                    yaml.de
                      +1
                      fbootstrapp — очень забавный: заменил в своей админке twitter bootstrapp на него — получился фейсбук =)

                      PS Вот бы в таком же ключе попробовать ещё и google+ bootstrapp.
                        +1
                        Ищу для «Полной коллекции» google+/new_google bootstrap. может, кто-то поделится ссылкой?
                        Вконтакт — не предлагать ;)
                  +8
                  Внезапно наступил хабраэффект. Можно ждать «Damn Russians!» в твиттере.
                    +1
                    А есть такие фреймворки для мобильных сайтов с готовыми элементами и media под разные экраны?
                      0
                      jQuery Mobile.
                        0
                        Еще joapp.com/
                          +3
                          Продолжим «копипастить» и закрамов Эверноута ;)

                          iUI: User Interface Framework for Mobile Web Devices
                          iPhone CSS Template
                          After developing a few iPhone compatible websites I realised there aren’t many templates available for designers / developers to quickly use as a basis for their own, so I thought I’d release mine.
                          www.peterhintondesign.co.uk/journal/iphone-css-template/

                          iphone-universal
                          Normalized CSS & HTML framework to develop iPhone webdev applications.
                          The UiUIKit (Universal iPhone UI Kit) it's a collection of HTML examples of what can be done with CSS3 and Safari's Webkit.
                          code.google.com/p/iphone-universal/

                          iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.
                          snippetspace.com/projects/iwebkit/
                            0
                            Это не набор элементов, но хороший шаблон. html5boilerplate.com/mobile
                              0
                              dojo
                              0
                              Sencha для mobile web apps
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  +4
                                  Необязательно ждать. github.com/twitter/bootstrap/tree/2.0-wip

                                  Уже давно пользуюсь новой версией на своем сайте driversworld.us/ — там есть прогресс бары, иконочки, и прочие радости. Раз в неделю скачиваю новую версию, смотрю коммиты, подправляю сайт, и заливаю. Мне нравится.
                                    0
                                    Не понимаю, почему master скачивается версией 1.4, а 2.0-wip версией 1.3?
                                      0
                                      Думаю, для 2.0-wip они взяли за основу 1.30. Версия 1.40 отличается от предыдущей только исправленными ошибками (и разными мелочами). Но это не повод для волнений, т.к. в 2.0-wip они переписали почти все (alert'ы, например), и кода там из 1.30 очень мало.
                                        0
                                        Вчера набросал страничку с почти всеми элементами из фреймворка в версии 1.4. Перекинул ее в 2.0 и почти половина элементов отвалилась. Подожду релиза, может они еще чего захотят изменить.
                                          0
                                          Половина всего отвалилась из-за того, что они решили много чего переименовать и переписать — например, horizontal-form поменяли на form-horizontal. Придется сделать много небольших изменений в разметке под 1.40 и все — можно ставить новую версию.

                                          Я решил идти в ногу с бетой как-раз из-за этого. Будет релиз, а у меня все уже сделано. Плюс, как я уже говорил, там появились новые фичи, многие из которых я использую. Некоторые полезности даже забираю из пулл-реквестов.
                                      +1
                                      Одна функциональная кнопка на 1% сайта и 2 гигантские баннерки на 60%… мне тоже нравится!
                                        +1
                                        Сайт божественен. Объединить бы подобные в большой портал, разместить на одной площадке, а потом — выключить рубильник.
                                      0
                                      Откуда информация про 31 января? Я почему-то не нашел никаких сообщений о дате выпуска новой версии.

                                      И еще вопрос: пользовались? Стоит ли использовать новую версию bootstrap, пока не для production?
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Черт, очередной фреймворк без контрола «дерева».
                                      Видимо с этой модой на touch придется заново придумывать и обычные интерфейсы.
                                        0
                                        А давно пора бы. Древовидный список удобен для визуализации, но для навигации ужасен. Тот же аккордеон куда удобнее.
                                          +1
                                          Расскажите это пользователям 1С и прочих ERP
                                            0
                                            Как круто сделать редактирование структуры сайта?
                                            У меня обычно дерево страниц сейчас, не могу придумать красивого решения. Есть какие-нибудь варианты?
                                          0
                                          Недавно попробовал Bootstrap. Для быстрого прототипирования имхо такие css фреймворки — самое оно. Kickstart внешне тоже понравится. А по поводу того, что все одинаковые будут. Так есть такое понятие, как стандартные элементы интерфейса. Да и кастомизация есть и там, и там.
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                            +1
                                            Спасибо за заметку о сервисе. Попробую использовать его при следующем проекте
                                              –3
                                              Какая няшная штукенция!))
                                                +3
                                                Сегодня обнаружил еще вот такую вещь — demos.kendoui.com/web/overview/index.html
                                                Кто-нибудь пользуется?
                                                  0
                                                  эту вещь надо покупать. бесплатно только для опенсорса
                                                  GPL Compatible Open Source projects only
                                                  0
                                                  Понравилась штука, только нет в ней всплывающих окон, тут же это поправил и написал об этом
                                                    0
                                                    Обзор HTML Kickstart в некотором сравнении с Twitter Bootstrap: jkeks.ru/jkeks.ru/archives/2816
                                                    А вообще я перевел один шаблон на WP под HTML kickstart — стало даже как-то грустно что код маленький и катомизации по сути больше не надо.

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

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