Getting Started
Content & Layout
Components
Utilities

File Structure

merit comes with a flexible file structure that can be easily used for small to large scope projects.

merit

Discover what’s included in merit UI Kit, including our precompiled files and source code.

merit
  • src
    • assets
      • img - Image Files
      • js - Core Javascript Files
      • vendor - Third Party Libararies
    • components - HTML Component Files
    • pages- HTML Templates
    • partials - HTML Partials. These files are included in other html files
    • scss - SASS(SCSS) source files
      • merit - Custom components, variables, mixins and more
    • index.html
  • dist - Compiled and Minified Files
  • build - Compiled Files (not included by default)
  • node_modules - Node modules (not included by default)
  • gulpfile.js - Gulp commands
  • package.json - List of dependencies
  • package-lock.json
  • README.md

dist

The dist/ folder will be generated with gulp dist command. In this folder, we provide compiled and minified version of CSS and JS files.

Following is file structure inside ./src/dist/ folder.

dist
  • assets
    • css - Minified CSS files
      • merit.css
    • img - Image Files
    • js - Minified Javascript Files
      • merit.js
      • merit-vendor.js - bundled version of third partry libraries
    • vendor - Third party libararies dist version
  • components - Minified HTML Component Files
  • pages - Minified HTML Tempalates
  • index.html

build

The build/ folder will be generated with gulp build command. In this folder, we provide compiled version of CSS and JS files.

Following is file structure inside ./src/build/ folder.

build
  • assets
    • css - Compiled CSS files
      • merit.css
    • img - Image Files
    • js - Compiled Javascript Files
      • merit.js
      • merit-vendor.js - bundled version of third partry libraries
    • vendor - Third party libararies dist version
  • components - Compiled HTML Component Files
  • pages - Compiled HTML Tempalates
  • index.html

SASS

The ./src/scss/merit/ folder includes custom components, mixins and variables. The merit.scss file imports partial scss files and compiled using build tools.

Bootstrap is automatically loaded from the node_modules folder in the merit.scss file. It is installed via npm install and compiled using the build tools.

Following is file structure inside ./src/scss/ folder.

scss
  • merit
    • components
    • mixins
    • utilities
    • vendor
    • user
    • _mixins.scss
    • _theme-variables.scss
    • _utilities.scss
    • _variables.scss
    • _user.scss
    • _vendors.scss
  • merit.scss

Every Sass variable in Bootstrap and merit includes the !default flag which will allow you to override the variable’s default value in your own sass file without modifying merit’s source code. Customize variables as needed and and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap or merit.

partials

merit uses Gulp File Include NPM package for most commonly used components such as header, sidebar, footer and so on. With help of Gulp File Include these components can be globally updated at once. All partials could be found under ./src/partials/*.

dev

The dev/ folder will be generated with gulp command. This default command will compile and watch the SASS, JavaScript, HTML or Assets changes, start local BrowserSync instance and will serve at port 3000 in your default browser. Any changes made to the source files will be compiled as soon as you save the file and will auto refresh your page as you edit.