© Copyright Flatkit - Built with Love v1.1.3
About - Get it

Documents

Over a dozen reusable components to build awesome web project, We provided AnguarJS and Html versions for you.

Contents
Get this theme

Intro

Base on the world's most popular css framework Bootstrap 4 and the popular js framework AngularJS, Flatkit provide the easy way to build your next web project.

Build tools

Flatkit uses Grunt for its CSS and JavaScript build system, it's optional, you can use this theme without grunt tools, we included all the dependencies in this theme.

  1. Download and install Node, which we use to manage our dependencies.
  2. Run npm install -g bower grunt-cli
  3. Run bower install --force-latest to install dependencies
  4. Run grunt build to build dist with minified js and css
  5. Run npm start to start server

Note: any commands we tell you to run must be ran from the project's root folder.

What's include

You'll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.

app/
  |-- bower.json
  |-- package.json
  |-- GruntFile.js
  |-- README.md
  |-- CHANGELOG.md
  |-- dist/
  |-- libs/
  |   |-- angular/
  |   |-- jquery/
  |-- assets/
  |   |-- scss/
  |   |-- styles/
  |   |-- bootstrap/
  |   |-- fonts/
  |   |-- images/
  |-- views/
  |   |-- blocks/
  |   |-- chart/
  |   |-- form/
  |   |-- layout/
  |   |-- page/
  |   |-- table/
  |   |-- ui/
  |   |-- widget/
  |   |-- layout.html
  |   |-- layout.0.html
  |   |-- layout.1.html
  |   |-- layout.2.html
  |   |-- layout.3.html
  |   |-- layout.4.html
  |-- angular/
  |   |-- api/
  |   |-- apps/
  |   |   |-- calendar/
  |   |   |-- contact/
  |   |   |-- inbox/
  |   |   |-- note/
  |   |   |-- todo/
  |   |-- scripts/
  |   |   |-- controllers/
  |   |   |-- directives/
  |   |   |-- filters/
  |   |   |-- services/
  |   |   |-- app.js
  |   |   |-- app.ctrl.js
  |   |   |-- config.js
  |   |   |-- config.lazyload.js
  |   |   |-- config.router.js
  |   |-- index.html
  |-- html/
  |   |-- api/
  |   |-- scripts/
  |   |   |-- app.js
  |   |   |-- config.js
  |   |   |-- config.lazyload.js
  |   |   |-- config.router.js
  |   |-- index.html

CSS / Scss

You can apply any provided colors to any blocks, even on the Light, Grey, Dark, Black theme.

The css file is generated by Scss files. There are many variables you can config to build the css file. many classes are extended from bootstrap css.

Utility classes

Margin
.m-a-0 { margin:        0 !important; }
.m-t-0 { margin-top:    0 !important; }
.m-r-0 { margin-right:  0 !important; }
.m-b-0 { margin-bottom: 0 !important; }
.m-l-0 { margin-left:   0 !important; }
.m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
.m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }

.m-a { margin:        $spacer !important; }
.m-t { margin-top:    $spacer-y !important; }
.m-r { margin-right:  $spacer-x !important; }
.m-b { margin-bottom: $spacer-y !important; }
.m-l { margin-left:   $spacer-x !important; }
.m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
.m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }

.m-a-md { margin:        ($spacer * 1.5) !important; }
.m-t-md { margin-top:    ($spacer-y * 1.5) !important; }
.m-r-md { margin-right:  ($spacer-y * 1.5) !important; }
.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
.m-l-md { margin-left:   ($spacer-y * 1.5) !important; }
.m-x-md { margin-right:  ($spacer-x * 1.5) !important; margin-left:   ($spacer-x * 1.5) !important; }
.m-y-md { margin-top:    ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }

.m-a-lg { margin:        ($spacer * 3) !important; }
.m-t-lg { margin-top:    ($spacer-y * 3) !important; }
.m-r-lg { margin-right:  ($spacer-y * 3) !important; }
.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
.m-l-lg { margin-left:   ($spacer-y * 3) !important; }
.m-x-lg { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
.m-y-lg { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }

.m-a-sm { margin:        ($spacer * 0.5) !important; }
.m-t-sm { margin-top:    ($spacer-y * 0.5) !important; }
.m-r-sm { margin-right:  ($spacer-y * 0.5) !important; }
.m-b-sm { margin-bottom: ($spacer-y * 0.5) !important; }
.m-l-sm { margin-left:   ($spacer-y * 0.5) !important; }
.m-x-sm { margin-right:  ($spacer-x * 0.5) !important; margin-left:   ($spacer-x * 0.5) !important; }
.m-y-sm { margin-top:    ($spacer-y * 0.5) !important; margin-bottom: ($spacer-y * 0.5) !important; }

.m-a-xs { margin:        ($spacer * 0.25) !important; }
.m-t-xs { margin-top:    ($spacer-y * 0.25) !important; }
.m-r-xs { margin-right:  ($spacer-y * 0.25) !important; }
.m-b-xs { margin-bottom: ($spacer-y * 0.25) !important; }
.m-l-xs { margin-left:   ($spacer-y * 0.25) !important; }
.m-x-xs { margin-right:  ($spacer-x * 0.25) !important; margin-left:   ($spacer-x * 0.25) !important; }
.m-y-xs { margin-top:    ($spacer-y * 0.25) !important; margin-bottom: ($spacer-y * 0.25) !important; }
Padding
.p-a-0 { padding:        0 !important; }
.p-t-0 { padding-top:    0 !important; }
.p-r-0 { padding-right:  0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
.p-l-0 { padding-left:   0 !important; }

.p-a { padding:        @spacer !important; }
.p-t { padding-top:    @spacer-y !important; }
.p-r { padding-right:  @spacer-x !important; }
.p-b { padding-bottom: @spacer-y !important; }
.p-l { padding-left:   @spacer-x !important; }
.p-x { padding-right:  @spacer-x !important; padding-left:   @spacer-x !important; }
.p-y { padding-top:    @spacer-y !important; padding-bottom: @spacer-y !important; }

.p-a-md { padding:        (@spacer-y * 1.5) !important; }
.p-t-md { padding-top:    (@spacer-y * 1.5) !important; }
.p-r-md { padding-right:  (@spacer-y * 1.5) !important; }
.p-b-md { padding-bottom: (@spacer-y * 1.5) !important; }
.p-l-md { padding-left:   (@spacer-y * 1.5) !important; }
.p-x-md { padding-right:  (@spacer-x * 1.5) !important; padding-left:   (@spacer-x * 1.5) !important; }
.p-y-md { padding-top:    (@spacer-y * 1.5) !important; padding-bottom: (@spacer-y * 1.5) !important; }

.p-a-lg { padding:        (@spacer-y * 3) !important; }
.p-t-lg { padding-top:    (@spacer-y * 3) !important; }
.p-r-lg { padding-right:  (@spacer-y * 3) !important; }
.p-b-lg { padding-bottom: (@spacer-y * 3) !important; }
.p-l-lg { padding-left:   (@spacer-y * 3) !important; }
.p-x-lg { padding-right:  (@spacer-x * 3) !important; padding-left:   (@spacer-x * 3) !important; }
.p-y-lg { padding-top:    (@spacer-y * 3) !important; padding-bottom: (@spacer-y * 3) !important; }

.p-a-sm { padding:        ($spacer * 0.5) !important; }
.p-t-sm { padding-top:    ($spacer-y * 0.5) !important; }
.p-r-sm { padding-right:  ($spacer-y * 0.5) !important; }
.p-b-sm { padding-bottom: ($spacer-y * 0.5) !important; }
.p-l-sm { padding-left:   ($spacer-y * 0.5) !important; }
.p-x-sm { padding-right:  ($spacer-x * 0.5) !important; padding-left:   ($spacer-x * 0.5) !important; }
.p-y-sm { padding-top:    ($spacer-y * 0.5) !important; padding-bottom: ($spacer-y * 0.5) !important; }

.p-a-xs { padding:        ($spacer * 0.25) !important; }
.p-t-xs { padding-top:    ($spacer-y * 0.25) !important; }
.p-r-xs { padding-right:  ($spacer-y * 0.25) !important; }
.p-b-xs { padding-bottom: ($spacer-y * 0.25) !important; }
.p-l-xs { padding-left:   ($spacer-y * 0.25) !important; }
.p-x-xs { padding-right:  ($spacer-x * 0.25) !important; padding-left:   ($spacer-x * 0.25) !important; }
.p-y-xs { padding-top:    ($spacer-y * 0.25) !important; padding-bottom: ($spacer-y * 0.25) !important; }

.padding{
  padding: 1.5rem 1.5rem;
}

.padding-out{
  margin: -1.5rem -1.5rem;
}

@include media-breakpoint-down(md) {
  .padding{
    padding: 1rem 1rem;
  }
  .padding-out{
    margin: -1rem -1rem;
  }
}

@include media-breakpoint-down(sm) {
  .padding{
    padding: 0.5rem 0.5rem;
  }
  .padding-out{
    margin: -0.5rem -0.5rem;
  }
  .no-padding-xs{
    padding: 0;
  }
}

Angular version

Lazy load modules for Angular 1.x, you can config the modules in the config.lazyload.js to load the other dependencies.

Code style

https://github.com/johnpapa/angular-styleguide

Manage the dependencies

run bower install to install the modules.

when run bower install, you may need choose the version for some modules, you can choose the latest version of them, but keep the "angular, angular-animate, angular-aria, angular-cookies, angular-messages, angular-resource, angular-sanitize, angular-touch" have the same version.

Core modules
  • angular-ui-router

    The de-facto solution to flexible routing with nested views

  • ocLazyLoad

    Load modules on demand (lazy load) in AngularJS.

  • ngStorage

    localStorage and sessionStorage done right for AngularJS.

  • Angular Strap

    AngularJS 1.2+ native directives for Bootstrap 3/4

Optional modules

Html version

The html version use ajax to load some blocks, you need put the files on a server to preview.

Located in the "html" folder, it also use lazyload for plugins

Core modules
  • ui-jp

    Dynamic jQuery plugin call on dom
    <div ui-jp="easyPieChart" ui-options="options"></div>
    the ui-jp plugin will call the "easyPieChart" function with the options, same as $.easyPieChart(options)
    you can config the plugins in the "html/scripts/config.lazyload.js".

  • ui-include

    Include the html partials into the page
    <div ui-include="'../views/blocks/navbar.brand.html'"></div>
    the ui-include will be replaced with the real partial.
    if you do not want to include the partials, you can just copy the real blocks and replace it.

Ajax

The html version using the Pjax for ajax load the page. you can disable it by remove the relative codes(remove the html/scripts/ajax.js)