Skip to content

getcreate/StartKit-Scss

Repository files navigation

StartKit for Scss

Особенности

  • Cборка предназначена для автоматизации задач в повседневной front-end разработке
  • Основой для данной сборки является BEM методология
  • Поддержка npm и yarn
  • Используется препроцессор Scss
  • Встроенная сетка для адаптивной вёрстки Smart-Grid
  • Версия для Stylus: StartKit-Stylus
  • Версия для Less: StartKit-Less

Установка

  • Установка для NPM:
  1. Скачайте и установите Node.js последней версии

  2. Установите Gulp глобально:

    npm i gulp-cli -g
    
  3. Установите Bower глобально:

    npm i bower -g
    
  4. Установите все зависимости:

    npm i
    
  5. Запустите gulp:

    gulp
    

  • Установка для Yarn:
  1. Скачайте и установите Yarn последней версии

  2. Установите Gulp глобально:

    yarn global add gulp-cli
    
  3. Установите Bower глобально:

    yarn global add bower
    
  4. Установите все зависимости:

    yarn
    
  5. Запустите gulp:

    gulp
    

Файловая структура

StartKit-Scss
├── gulp
├── public_html
├── resources
├── source
│   ├── blocks
│   │   ├── components
│   │   └── modules
│   ├── fonts
│   ├── pages
│   ├── images
│   │   ├── content
│   │   └── svg
│   ├── scripts
│   │   ├── library
│   │   └── main.js
│   └── styles
├── .bowerrc
├── .csscomb.json
├── .browserslistrc
├── .gitignore
├── bower.json
├── gulpfile.js
├── LICENSEREADME
├── package.json
└── README
  • gulp - Содержит файлы для работы Gulp (редактировать не желательно).

  • public_html - Папка для хранения собранного проекта

  • resources - В данной папке складываются все исходные файлы (psd, fonts, images, etc).

  • source - В данной папке ведётся разработка проекта

    • blocks - Папка для хранения БЭМ блоков.

    • components - Папка для хранения ваших компонентов. Все стили подключаются в components.scss, а сами компоненты подключаются в components.pug (В данной папке хранятся файлы: .scss, .pug, .js)

    • modules - Папка для хранения ваших модулей (секций) сайта. Все стили подключаются в modules.scss (В данной папке хранятся файлы: .scss, .pug, .js, .json).

  • fonts - Папка для хранения ваших шрифтов (предпочтительно хранить расширения woff и woff2).

  • pages - Папка для хранения страниц (index.pug, about.pug, etc.).

  • images - Папка для хранения изображений.

    • content - Папка для хранения изображений относящихся к контенту.

    • svg - Папка для хранения SVG иконок, который в дальнейшем будут собраны в спрайт.

  • scripts - Папка для хранения JavaScript файлов.

    • library - Папка для хранения JavaScript библиотек, которые добавляются после загрузки через Bower.

    • main.js - Главный файл js куда подключаются все JavaScript файлы.

  • styles - Папка для хранения файлов .scss .

  • .bowerrc - Используется для определения конфигурации Bower, задания путей для сохранения библиотек в вашем проекте.

  • .csscomb.json - CSScomb — утилита для сортировки CSS-свойств в рамках каждого селектора по заданному порядку.

  • .browserslistrc - Содержит настройки для работы плагина Autoprefixer.

  • .gitignore - Cлужит для указания в нём файлов и папок, которые необходимо скрыть от системы контроля версий git.

  • bower.json - Содержит список библиотек используемых в проекте.

  • gulpfile.js - Основной файл для работы Gulp.

  • package.json - Содержит список пакетов (плагинов) необходимых для работы Gulp.

Контакты

Если возникли вопросы или есть предложения по улучшению данной сборки, то вы можете связаться со мной: