/GMDJS

Grid Material Design JS

Primary LanguageCSS

Grid Material Design JS

Описание

GMDJS - это адаптивная сетка с новым подходом к созданию адаптивной верстки, построенная с использованием препроцессора Sass и Flexbox.

Также он включает в себя:

  • Сборщик проектов Gulp

    • Препроцессор Sass
    • PostCSS - инструмент для трансформации CSS с помощью JavaScript.
      • Автопрефексы при верстке для 10 последних версий всех браузеров.
      • Минификация CSS.
    • Browser Sync - живая перезагрузка страницы.

  • Bower - пакетный менеджер для web, облегчает установку сторонних плагинов. Для этого воспользуйтесь командой bower i name_plugin

Установка и использование

Для того, чтобы воспользоваться GMDJS у вас должны быть установлены:

  • Git - мощная и сложная распределенная система контроля версий. Так же устанавливатеся как обычная программа.
  • NodeJS - платформа, основанная на JavaScript движке V8, и предлагающая асинхронное API для работы с сетью и диском. Просто скачиваете и устанавливаете как обычную программу.

После установки NodeJS вам будет доступна команда npm в командной строке. Используя ее вы можете глобально установить в свою систему Gulp. Для этого введите в командной строке команду

npm i gulp -g

и дождитесь конца установки.

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

Когда вы установите Gulp, скопируйте шаблон gmdjs в папку с вашими проектами, при необходимости переименуйте ее в нужное вам название. Затем откройте командною строку в папке с проектом. Для этого зайдите в вашу скопированную папку и, если вы используете OS Windows, зажмите клавишу Shift и щелкните правой клавишей мыши по пустому месту в проводнике и в появившемся контекстном меню выберете пункт Открыть окно команд и в нем введите команду

npm i

Установятся все необходимые плагины. Установка может занять продолжительное время.

После установки GMDJS готов к работе. Просто запустите Gulp. Это можно сделать так же через командную строку, с помощью команды

gulp

или, если вы используете такие замечательные IDE как WebStorm \ PhpStorm, вы можете запустить любую задачу Gulp через специальное окно с задачами Gulp.

Принцип работы с адаптивной сеткой

Данная сетка работает по другому принципу, с ней вам не надо расставлять большое количетво классов в html элементах. Вся магия происходит в стилях и применяется к любому селектору (классу, идентификатору, любому html элементу).

#####Пример:

В html делаем нашу разметку с любыми классами

<div class="goods">

    <div class="goods__item"> Ваш контент </div>
    
    <div class="goods__item"> Ваш контент </div>
    
    <div class="goods__item"> Ваш контент </div>
    
    <div class="goods__item"> Ваш контент </div>
    
</div>

И через стили делаем эту верстку адаптивной (ниже код в синтаксисе sass)

.goods
    +grid(row, fixed)     // делаем класс .goods контейнером для элементов
    &__item               // зададим сколкьо колонок будет занимать блоки с классом  .goods__item
	    +col-xl(3)  // при разрешении больше 1260px блоки занимают 3 колонки
	    +col-md(6)  // при разрешении больше 828px блоки занимают 6 колонок
	    +col-sm(12) // при разрешении больше 636px блоки занимают 12 колонок

С помощью миксинов Sass мы задаем делаем класс .goods контейнером для дочерних блоков. В скобках можно передать 2 аргумента, первый аргумент является значениями свойсва flex-direction, вторым аргументом можно задать каким будет контейнер fixed - фиксированным для всех брейпоинтов, кроме xs fluid - растягивающимся на всю ширину окна браузера при любом разрешении если не передавать ни одного аргумента, по умолчанию будут заданы свойства row, fixed.

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

Список миксинов

  • Контейнер

    • +grid() - создает контейнер, принимает 2 аргумента
      • row, row-reverse, column, column-reverse
      • fixed, fluid - делает контейнер фиксированной ширины для всех медиазапросов кроме xs или во всю ширину. По умолчанию fixed
    • +container() - добавляется к тем блокам, внутри которых контент не будет разделен на колонки, принимает 1 агрумент
      • fixed, fluid - делает контейнер фиксированной ширины для всех медиазапросов кроме xs или во всю ширину. По умолчанию fixed
    • +align-#()* - выранвивает элементы внутри контейнера, принимает три аргумента
      • Первый аргумент выравнивает по горизонтали и принимает значения start, end, center, around, between
      • Второй аргумент выравнивает по вертикали и принимает значения start, end, stretch, baseline, between
      • Третий аргумент указывает какой сфорировать медиазапрос min, max

  • Дочернии элементы

    • +col-#()* - задает блоку количество занимаемых колонок
      • Первым аргументом идет цифра
      • Вторым можно передать no, это убереть все отступы.
    • +offset-#()* - сдвигает элементы влево/право
      • Первым аргументом идет число на сколько колонок сдвинуть
      • Вторым указывается направление left - в лево, right - в право
    • +hidden-#()* - скрывает блок
      • up - блок крвывается от текущего брейпоинта в сторону увеличения разрешения
      • down - блок крвывается от текущего брейпоинта в сторону уменьшения разрешения
      • Без аргумента блок скрывается только на текущем разрешении

  • Другие миксины

    • +media-#()* - вы можете использовать все медиазапросы сетки в любом месте, принимает 1 аргумент
      • Для определения какой сформировать медиазапрос используйте аргументы min, max

Примечание: все одинаковые медиазапросы объединяются и добавляются конец компилируемого CSS файла

* вмето # подставляются суффиксы xs, sm, md, lg, xl или если надо испльзовать миксин для всех разрешений, то пишите его без суфиксов

Кастомизация сетки

GMDJS позволяет легко кастомизировать адаптивную сетку как перед началом работы, так и "на лету", когда верстка уже сделана частично или полностью. Для этого откройте файл _variables.sass. В нем вы сможете изменить брейкпоинты, количество колонок в сетке и расстояние между колонками. По умолчанию заданы такие параметры:

// Breakpoints
$xl: 1200px
$lg: 992px
$md: 768px
$sm: 576px
$xs: $sm - 1px

// Set the desired number of columns
$columns: 12

// Set margin between columns
$margin: 30px

Готовые элементы Material Design

В разработке