Знакомство с Cutestrap, легким CSS-фреймворком

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

Особенности Cutestrap

Как и большинство успешных шаблонов и структур веб-разработки, Cutestrap сокращает время разработки и сокращает повторяющиеся задачи. Согласно броскому определению на странице документации, Cutestrap от Tyler Childs — это «нахальная, самоуверенная CSS Framework. Небольшая альтернатива Bootstrap ». Это хорошая отправная точка для быстрого создания прототипов веб-сайтов и приложений.

Несмотря на небольшой размер файла, Cutestrap — это не просто начальный шаблон с некоторыми базовыми стилями сброса. Он поставляется в комплекте с выбором шрифтов, цветовой палитры и некоторыми определенными представлениями о том, как должны выглядеть поля формы и несколько других элементов.

С другой стороны, Cutestrap очень далеко от того, чтобы предлагать огромное количество функций и компонентов, которые полнофункциональные фреймворки, такие как Bootstrap и Foundation, приносят на стол.

Ключевые особенности Cutestrap:

• Супер крошечный — всего 8kb CSS-кода
• Простая настройка, даже проще, если вы используете Sass
• Отличная организация CSS с использованием методологии БЭМ
• Последовательный вертикальный ритм типографских элементов
• Сгенерированная KSS документация для облегчения превращения документации Cutestrap в руководство по стилю вашего проекта

Давайте установим Cutestrap, чтобы узнать больше.

Установка Cutestrap

Вы можете выбрать традиционный маршрут и просто скачать cutestrap.zip с домашней страницы фреймворка . Кроме того, вы можете интегрировать Cutestrap в свой проект, используя npm :

 npm install cutestrap 

или беседка :

 bower install cutestrap 

Настройка Cutestrap

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

В этом отношении Cutestrap ничем не отличается от других популярных CSS-фреймворков. Если вы предпочитаете ванильный CSS, вы можете включить cutestrap.css (или его минимизированную версию в производстве) непосредственно в ваш проект, а затем переопределить правила Cutestrap CSS из своего документа таблицы стилей.

Выбор альтернативы Sass дает вам больше гибкости и скорости. Один из способов настроить ваш проект — создать частичный файл, в котором вы можете хранить свои пользовательские переменные, в том числе то, что вы хотите переопределить из фреймворка. Затем вы можете создать файл custom.scss где вы можете сослаться на файл, содержащий ваши пользовательские переменные и оригинальный cutestrap/dist/scss/cutestrap.scss используя операторы @import :

 //custom variables @import "custom-variables"; //original Cutestrap @import "path-to-framework-folder/cutestrap"; //custom Sass code goes here 

Порядок, в котором вы пишете операторы @import важен. Фактически, включение custom-variables.scss перед cutestrap.scss гарантирует, что все значения переменных Cutestrap, которые вы переопределите в своем пользовательском файле, будут действовать в скомпилированном выводе CSS.

Ваш пользовательский код Sass идет ниже операторов @import .

Что входит в состав Cutestrap Framework?

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

 <div class="wrapper"> <div class="grid"> <div> Column 1 </div> <div> Column 2 </div> </div> </div> 

 <div class="wrapper"> <div class="grid"> <div> Column 1 </div> <div> Column 2 </div> <div> Column 3 </div> <div> Column 4 </div> </div> </div> 

 <div class="wrapper"> <div class="grid"> <div> Column 1 Row 1 </div> <div> Column 2 Row 1 </div> <div> Column 3 Row 1 </div> </div> <div class="grid"> <div> Column 1 Row 2 </div> <div> Column 2 Row 2 </div> <div> Column 3 Row 2 </div> </div> </div> 

 <div class="wrapper"> <div class="grid grid--medium"> <div> Column 1 </div> <div> Column 2 </div> </div> </div> 

 <div class="wrapper"> <div class="grid grid--medium"> <div> Column 1 </div> <div class="column--light"> Column 2 </div> </div> </div> 

 body { font-family: 'Merriweather Sans', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', serif; } 

 <button>Button</button> <input type="button" value="Input Button" class="btn"> <button class="btn--secondary">Secondary</button> <a href="#" class="btn btn--link">Button Link</a> 

 <form> <label class="textfield"> <input type="text"> <span class="textfield__label">Name</span> </label> <label class="textfield"> <input type="email"> <span class="textfield__label">Email</span> </label> <label class="radio"> <input type="radio" name="designer"> <span class="radio__label">Designer</span> </label> <label class="radio"> <input type="radio" name="developer"> <span class="radio__label">Developer</span> </label> <label class="select"> <select> <option value="Location" disabled selected>Location</option> <option value="EU">EU</option> <option value="US">US</option> <option value="Australia">Australia</option> </select> <span class="select__label" for="select">Location</span> </label> <button type="submit">Subscribe</button> </form> 

 <div class="hero"> <div class="wrapper"> <article class="ta-center"> <!-- Hero image here --> <h1 class="section-title">Title</h1> <p class="fs-large">Tagline</p> </article> <!--/article --> </div> <!--/.wrapper --> </div> <!--/.hero --> 

 <div class="portfolio"> <div class="wrapper"> <!-- First row --> <div class="grid grid--medium"> <figure> <img src="image.jpg" alt="portfolio image." /> </figure> <!-- Two more items --> ... </div><!-- /.grid --> <!-- Second row --> <div class="grid grid--medium"> <figure> <img src="image.jpg" alt="portfolio image." /> </figure> <!-- Two more items --> ... </div><!-- /.grid --> </div><!-- /.wrapper --> </div><!-- /.portfolio --> 

 <div class="about"> <div class="wrapper"> <div class="grid grid--medium"> <!-- Wider column --> <article> Content in wider column </article> <!-- Narrower column --> <article class="column--light"> Content in narrower column </article> </div><!-- /.grid --> </div><!-- /.wrapper --> </div><!-- /.about --> 

 <div class="contact"> <div class="wrapper-small"> <!-- form element here --> </div><!-- /.wrapper-small --> </div><!-- /.contact --> 

 /*Links*/ a:link { color: #ff9800; } a:visited, a:active { color: #ffad33; } a:hover, a:focus { color: #cc7a00; } /*Buttons*/ .btn, input[type="submit"], input[type="button"] { background-color: #ff9800; } .btn:focus, .btn:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="button"]:focus, input[type="button"]:hover { background-color: #cc7a00; } .btn:active, input[type="submit"]:active, input[type="button"]:active { background-color: #ff9800; }