Еще один вспомогательный фреймворк для верстальщика – «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 можно также по ссылке выше.
