1. Docs
  2. Getting Started
Buy Now Contact

Getting Started

Neat is a simple, powerful UI framework for building responsive web applications and dashboard user interfaces.

Folder Structure

Once you download and unzip the package, you will see this folder structure.

neat/
    ├── src/
    │   ├── scss/
    │   │   ├── settings/
    │   │   ├── tools/
    │   │   ├── base/
    │   │   ├── objects/
    │   │   ├── components/
    │   │   ├── vendor/
    │   │   ├── utilities/
    │   │   └── neat.scss
    │   └── js/
    │   │   ├── vendor/
    │   │   └── *.js
    │   ├── img/
    │   ├── fonts/
    │   └── *.html
    │
    ├── dist/
    │   ├── css/
    │   │   ├── neat.css
    │   │   └── neat.min.css
    │   ├── js/
    │   │   ├── neat.js
    │   │   └── neat.min.js
    │   ├── img/
    │   ├── fonts/
    │   └── *.html
    │
    ├── gulpfile.js
    ├── package.json
    ├── .gitignore
    └── .sass-lint.yml

SCSS

Neat is SCSS based, it follows the BEMIT Methodology and is inspired by ITCSS, OOCSS.

Classes are prefixed with 3 different:

  • .o- Objects
  • .c- Components
  • .u- Utilities

ITCSS helps you to organize your project SCSS files in such way that you can better deal with (not always easy-to-deal-with) CSS specifics like global namespace, cascade and selectors specificity.

├── scss/
    ├── settings/
    ├── tools/
    ├── base/
    ├── objects/
    ├── components/
    ├── vendor/
    └── utilities/
    └── neat.scss
  • Settings: Global sass variables and component-specific variables.
  • Tools: Site-wide mixins and functions.
  • Themes: Override default scss variables to apply different themes.
  • Base: Resets, unclassed (bare) elements.
  • Vendor: Third-party librairies/dependencies like Font Awesome and Bootstrap Grid.
  • Objects: Objects, abstractions, and design patterns e.g. .o-layout.
  • Components: Discrete, complete chunks of UI e.g. .c-alert.
  • Utilities: Overrides and helper classes e.g. .u-hidden.

Then, the neat.scss file should look something like this:

//
// TOOLS
//
@import "tools/tools.linear-gradient";
@import "tools/tools.rem";
...

//
// SETTINGS 
// 

// Global Settings
@import "settings/settings.global";

// UI-Kit Settings
@import "settings/settings.alert";
@import "settings/settings.avatar";
...

//
// BASE
//
@import "base/base.global";
@import "base/base.typography";


//
// VENDORS
//
@import "vendor/bootstrap-grid";
@import "vendor/fullcalendar";
...

//
// OBJECTS
//
@import "objects/objects.page";
@import "objects/objects.media";


//
// COMPONENTS
//

// UI-Kit Components
@import "components/components.alert";
@import "components/components.avatar"
...


// Dashboard/Admin-Related Components
@import "components/components.state-card";
@import "components/components.feed";
...


// UTILITIES
@import "utilities/utilities.flex";
@import "utilities/utilities.spacing";
...

Javascript

Neat’s javascript is fairly simple and is powered by Bootstrap javascript plugins. It depends on jQuery and few external plugins to work, Take a look at js/ folder structure:

├── js/
    ├── vendor/
    ├── chartist-custom.js
    ├── fullcalendar-custom.js
    ├── *.js
    └── main.js
  • vendor/: Contains external javascript/jquery plugins (copied from node_modules via GulpJS)
  • chartist-custom.js: Override default options of chartist.js
  • fullcalendar-custom.js: Override default options of fullcalendar.js
  • *.js: Scripts for other components like sidebar.
  • neat.js: Contains all scripts that initialize Neat UI Kit components
Contents: