Еще один вспомогательный фреймворк для верстальщика – «Propeller». Характеризуется автором, как адаптивный компонент для быстрой разработки.
Предлагаемые компоненты имеют кастомные стили вместе с изысканной анимацией и переходами CSS3. Это позволяет экономить время для основных конфигураций сайта.
Адаптивная и готовая к использованию библиотека с набором CSS правил. Призвана уменьшить количество решений, которые разработчики должны предпринимать при написании кода, помогая им сосредоточиться на логике, а не на семантике и форматировании.
Как начать пользоваться данным фреймворком CSS Bootstrap
Пример стандартного HTML кода для начала работы
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Propeller Basic HTML Template</title> <!-- Bootstrap css--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!--Google Icon Font--> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Propeller css --> <link href="css/propeller.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery before Propeller.js --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/propeller.min.js"></script> </body> </html>
И, допустим, возьмем пример кнопок:
<!-- Primary button with ripple effect --> <button class="btn pmd-ripple-effect btn-primary" type="button"> Primary </button> <!-- Success raised button with ripple effect --> <button class="btn pmd-btn-raised pmd-ripple-effect btn-success" type="button">Success</button>
В принципе, автор библиотеки постарался создать грамотную документацию к своему проекту. По ссылке выше можнонайти Github-репозиторий фреймворка, где указывается вся информация о том, как пользоваться ним. Скачать фреймворк CSS Bootstrap можно также по ссылке выше.