Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

UI framework for Web based on Webpack. Provides minification of CSS, JS and livereload.

Resources

Releases

No releases published

Packages

No packages published