Giter Club home page Giter Club logo

startkit-less's Introduction

StartKit for Less

Особенности

  • Cборка предназначена для автоматизации задач в повседневной front-end разработке
  • Основой для данной сборки является BEM методология
  • Поддержка npm и yarn
  • Используется препроцессор Less
  • Встроенная сетка для адаптивной вёрстки Smart-Grid
  • Версия для Scss: StartKit-Scss
  • Версия для Stylus: 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-Less
├── data
├── gulp
├── public
├── resources
├── source
│   ├── blocks
│   │   ├── components
│   │   └── modules
│   ├── fonts
│   ├── pages
│   ├── pictures
│   │   ├── content
│   │   ├── images
│   │   └── svg
│   ├── scripts
│   │   ├── library
│   │   └── main.js
│   └── styles
├── .bowerrc
├── .csscomb.json
├── .gitignore
├── bower.json
├── gulpfile.js
└── package.json
  • data - Содержит json файлы для удобной работы с контентом.

  • gulp - Содержит файлы для работы Gulp (редактировать не желательно).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контакты

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

startkit-less's People

Contributors

getcreate avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.