Coolrow

Легкий, но мощный, фреймворк для ускоренной
адаптивной верстки сайтов

Скачать 2кб Версия 1.0 Разработчик Dmitry Kokorin
Адаптивная верстка с помощью фреймворка Coolrow
узнать больше

Основные возможности Coolrow Framework

Полная поддержка браузерами

Фреймворк протестирован во всех основных браузерах, таких как Google Chrome, Opera, Mozilla Firefox, и другие.

12-колоночная блочная сетка

Сетка разделена на 12 колонок, что делает более удобным процесс верстки и перенос сайтов с других 12-колоночных гридов.

Комплект готовых наборов

Фреймворк содержит в себе готовые комплекты кнопок, полей ввода, переключателей, выпадающих списков, модальных окон и другие фишки.

Небольшой вес дистрибутива

Не смотря на большое содержание CoolRow имеет относительно небольшой размер дистрибутива в отличии от остальных популярных фреймворков.

Короткие сроки верстки

Благодаря продуманной структуре кода и стилей фреймворка CoolRow, время на верстку страниц можно сократить до нескольких часов.

Опыт разработчиков

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

Где необходим фреймворк CoolRow

Корпоративные порталы и лендинги

Корпоративным клиентам необходима строгость и четкость в дизайне, безупречное отображение во всех браузерах и их различных версиях. Именно поэтому CoolRow был разработан на основе инлайновых блоков, которые поддерживаются даже в Internet Explorer.

Интернет магазины, каталоги, визитки

Интернет магазины и каталоги товаров и услуг требуют тонкого подхода к верстке, особенно важно проработать мелкие детали интерфейсов. CoolRow легко справляется с такими задачами без применения дополнительных плагинов и библиотек.

Везде где есть или будет верстка

Легкий процесс переноса верстки существующих сайтов на Coolrow и легкая верстка страниц с нуля. Убедитесь в этом, начав использование фреймворка уже сегодня

начать сейчас

Несколько примеров использования

Простое деление колонок


<div class="row">     <div class="box4">box4</div><div class="box8">box8</div>     <div class="box2">box2</div><div class="box10">box10</div>     <div class="box7">box7</div><div class="box5">box5</div>     <div class="box4">box4</div><div class="box4">box4</div><div class="box4">box4</div>     <div class="box2">box2</div><div class="box3">box3</div><div class="box5">box5</div><div class="box2">box2</div>     <div class="box2">box2</div><div class="box2">box2</div><div class="box2">box2</div><div class="box2">box2</div><div class="box2">box2</div><div class="box2">box2</div> </div>

Результат

Кнопки и поля ввода


<div class="btn blue">btn blue</div><div class="btn green">btn green</div><div class="btn red">btn red</div> <div class="btn orange">btn orange</div><div class="btn dark">btn dark</div><div class="btn violet">btn violet</div> <div class="btn border rect">btn blue rect</div><div class="btn green rect">btn green rect</div><div class="btn red rect">btn red rect</div> <div class="btn orange rect">btn orange rect</div><div class="btn dark rect">btn dark rect</div><div class="btn violet rect">btn violet rect</div> <input class="inp border"><input class="inp pink rect"><input class="inp red border"><input class="inp pink rect">

Результат

Селекты с контентом и без


<input type="checkbox" class="check" id="ck1"> <select class="check"><option value="0"></option></select> <label class="select border white rect" for="ck1"></label> <span class="placeholder" data-value="0">Нажмите чтобы выбрать</span> <ul class="options">     <li class="option" data-value="1">Первая группа</li>     <li class="option" data-value="2">Вторая группа</li>     <li class="option" data-value="3">Третья группа</li> </ul> <label class="select border white rect">     <input type="checkbox" class="check"><select class="check"><option value="0"></option></select>     <span class="placeholder" data-value="0">Нажмите чтобы выбрать</span>     <ul class="options">         <li class="option" data-value="1">Первая группа <img src="/assets/images/for_select.png" alt="example"></li>         <li class="option" data-value="2">Вторая группа <img src="/assets/images/for_select.png" alt="example"></li>         <li class="option" data-value="3">Третья группа <img src="/assets/images/for_select.png" alt="example"></li>     </ul> </label>

Результат

Подпишись на обновления

Будь в курсе самых свежих фишек фреймворка, подпишись сейчас и новости будут приходить прямо на твою почту!
  с правилами согласен