новый css фреймворк

Propeller — новый фреймворк CSS Bootstrap и Google’s Material Design Standards

27.02.2017 weatherless CSS3 » #605

Смотреть Источник Скачать

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

Последние из этой категории