https://github.com/ushliypakostnik/html-skel

Morally obsolete start project for prototyping, design and layout of adaptive scaleable statics ( HTML / CSS / JS ).
https://github.com/ushliypakostnik/html-skel

bootstrap3 grunt ie9 jquery nunjucks scss starter-kit

Last synced: about 2 months ago
JSON representation

Morally obsolete start project for prototyping, design and layout of adaptive scaleable statics ( HTML / CSS / JS ).

• Host: GitHub
• URL: https://github.com/ushliypakostnik/html-skel
• Owner: ushliypakostnik
• Created: 2019-05-31T16:26:06.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T16:40:08.000Z (about 2 years ago)
• Last Synced: 2023-02-27T23:12:03.642Z (almost 2 years ago)
• Topics: bootstrap3, grunt, ie9, jquery, nunjucks, scss, starter-kit
• Language: CSS
• Homepage:
• Size: 632 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Skel_scss_bootstrap3 static project

===================================

Морально устаревший стартовый проект для проектирования, дизайна и верстки адаптивной маштабируемой статики (HTML / CSS / JS) с Nunjucks, SCSS, Bootstrap3, JQuery, Grunt, FontAwesome и Fontello, и еще кучей кастомных фич и модулей.

Deploy

------

Установка зависимостей (npm packages, bower packages)

    $ npm install

Экспорт проекта в папку *./output*, запуск watch

    $ npm run dev

Запуск сервера для разработки

-----------------------------

    $ npm run http-server

    http://127.0.0.1:8081/

Cборка

------

Сборка проекта в продакшен

    $ npm run build

Сборка проекта в продакшен с выгрузкой неминимизированных файлов

    $ ./node_modules/.bin/grunt build:dev

Структура проекта

-----------------

* /node_modules - папка, куда устанавливаются пакеты nodejs

    * ...

* /output - папка, куда происходит выгрузка проекта

    * ...

* /web - папка, где ведётся разработка

    * /bower_components - папка, куда устанавливаются пакеты bower

        * /respond - полифил для ie9

        * /jquery

        * /bootstrap-sass - https://github.com/twbs/bootstrap-sass

        * /font-awesome - http://fontawesome.io/

        * /normalize.scss

        * /slick-carousel - карусель http://kenwheeler.github.io/slick

        * /prism - подсветка кода http://prismjs.com/

    * /css/ - папка со стилями, которые не требуют препроцессинга

        * sys.css - стили для системных страниц (напр. для web/legacy.html)

    * /font - папка со шрифтами

        * /custom-font - кастомный иконочный шрифт 

        * ...

    * /img - папка с изображениями проекта

        * favicon.jpg - фавиконка

        * /layout - стили для основного шаблона

        * /pieces - маленкие картинки встречающиеся по всему проекту

        * /page1 - картинки для страницы page1

        * ...

    * /js - папка со скриптами

        * /app - папка с кастомными скриптами

            * 0page.js - кастомный js-модуль - библиотечка полезных простых функций-утилит

            * page-layout.js - кастомный js-модуль - модуль подключаемый на большинстве шаблонов проекта

            * page-template.js - шаблон кастомного js-модуля с перерисовкой

            * page1.js - кастомный js-модуль

            * ...

        * logger.js - логгирование

        * screen-helper.js - модуль для работы с экраном

        * bootstrap-modal.js - модуль для регистрации и компенсации скролла при открытии модальных окон

        * utils.js - модуль для работы с css

    * /scss - стили, требующие препроцесинга

        * /utils - все переменные и помощники scss

            * _animations.scss - анимации

            * _variables.scss - все глобальные переменные + переменные для сторонних модулей

            * _mixins.scss - все примеси

            * _functions.scss - все функции

            * _placeholders.scss - все помощники 

        * /core - стили для базовых 

            * _base.scss - основные элементы HTML

            * _typography.scss - типографика

            * _grid.scss - сетка

            * _utilities.scss - простые классы-помощники — утилиты

            * _widgets.scss - более сложные составные виджеты-компоненты

        * /components - стили для кастомизации сторонних модулей

            * _bootstrap.scss - кастомизация bootstrap

            * _slick.scss - кастомизация slick

            * _prism.scss - кастомизация prism

            * ...

        * /layout - компоненты основного шаблона — крупные конструктивные части общие для всех страниц!

            * _layout.scss

        * /pages - стили особые для отдельных страниц

            * _sandbox.scss - стили для страниц песочниц

            * _page1.scss - страница

            * ...

        * main.scss - импорт стилевых зависимостей

    * /tmpl - папка с шаблонами

        * /pages - папка с шаблонами для выгрузки

            * legacy.html - системная страница

            * tmpl_page.html - шаблонная страница (не участвует в выгрузке)

            * sandbow_page.html - страница-посочница (не участвует в выгрузке)

            * css_guideline.html - гайд по стилю написания scss

            * page1.html - страница 1

            * ...

        * base.html - базовый шаблон проекта

        * data.json - файл с переменными для шаблонов

    * /video - папка с видео проекта

        /page1 - видео для страницы page1

        * ...

* .bowerrc - файл локальной конфигурации bower

* bower.json - конфигурация bower-пакета

* Gruntfile.js - конфигурация сборщика проекта Grunt

* package.json - конфигурация npm-пакета

* README.md - файл документации по проекту

Работа с проектом

-----------------

### Общие замечания

Концепции использования:

* Cтраница может использовать несколько js-модулей одновременно.

* Несколько страниц могут использовать один и тот же модуль.