UI framework for Web based on Webpack. Provides minification of CSS, JS and livereload.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
content-images
fonts
icons/svg
images
src
.babelrc
.gitignore
README.MD
index.html
karma.conf.js
package-lock.json
package.json
webpack.config.js

README.MD

UI-mastery

Brief description of what's inside:

  • Index.html with predefined basic tags
  • SCSS with selectors defined in HTML
  • Javascript ES6 syntax and modules bundling is supported
  • SVG icon font builder
  • Unit tests for javascript (Karma/Jasmine)

Folder Structure

|-- .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.
  • Javascript ES6 Modules bundling. Sourcemaps are available during development. Minification is available for prod version
  • 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.
  • Unit tests for javascript (Karma/Jasmine).

Grid Systems

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 install in order to install gulp and its plugins

How to use

There are two webpack task which are configured:

  • npm start - default task. Runs file watcher for sass, javascript and icon files. Works only with php/apache.
  • npm run build - production build. Compiles JS/SCSS, minifies and removes sourcemaps. Adds hashes to CSS / javascript files in the index.html. For example: main.bundle.js becomes main.bundle.ea9451556c63699f30dc.js, where ea9451556c63699f30dc is 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.

Unit tests

  • karma start - runs karma server and file watcher.
  • npm test or karma start --single-run - runs karma server, performs unit tests and than closed.