Brief description of what's inside:
- Index.html with predefined basic tags
- SCSS with selectors defined in HTML
- SVG icon font builder
|-- .ui-mastery |-- content-images |-- dist |-- fonts |-- icons |-- src |-- js |-- actions |-- helpers |-- vendor |-- webpack main.js |-- tests |-- helpers uimastery.spec.js sample.spec.js |-- scss |-- common |-- components |-- grid |-- motif-grid |-- table-grid |-- helpers |-- templates |-- vendor _config.scss _icons.scss _typography.scss style.scss .babelrc index.html karma.conf.js package.json webpack.config.js
Features of the packaged
- SCSS compilation and minification to "dist/style.css" file.
- Sourcemaps of SCSS are available during development.
- Built-in WebServer with livereload is included.
- SVG icon font builder. Put your svg icons into the icons/svg folder. For more information please read css-tricks.
- MDO table grid system based on
- Grid system from Motif Framework rewritten in SCSS.
How to install
Beforehand you need to install Karma globally (if you're planning to run and use unit test). After that:
- Download or clone this repo.
- Being in the folder run
npm installin order to install gulp and its plugins
How to use
There are two webpack task which are configured:
ea9451556c63699f30dcis a hash. Helps to break browser cache in a new release.
Compiled versions of CSS/JS files could be found in the
dist folder which is located in the root directory.
karma start- runs karma server and file watcher.
karma start --single-run- runs karma server, performs unit tests and than closed.