Introduction

Cosmos is a responsive admin dashboard template built with Bootstrap. Comes with lots of ready to use widgets and components. Simple to use and easy to customise. To get started with Cosmos template, you should be familiar with Bootstrap - the most popular HTML, CSS, and JS framework in the world for building projects on the web.

Folder Structure

cosmos/
├── bower_components/
├── dist/
├── fonts/
├── img/
├── js/
├── scss/
├── favicon-16x16.png
├── favicon-32x32.png
├── .gitignore
├── .bowerrc
├── bower.json
├── package.json
└── Gruntfile.js

bower_components
Bower installs packages to this folder.

bower.json
Template dependencies listed in this file.

dist
This folder contains the complete distribution version with all demo content included as seen in the live preview version.

Grunfile.js
This file is used to configure or define tasks and load Grunt plugins.

package.json
This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

HTML Structure

<head>
  ...
</head>
<body>
  <!-- Header -->
  <div class="site-header">
    ...
  </div>
  <!-- Main -->
  <div class="site-main">
    <!-- Left sidebar -->
    <div class="site-left-sidebar">
      ...
    </div>
    <!-- Right sidebar -->
    <div class="site-right-sidebar">
      ...
    </div>
    <!-- Content -->
    <div class="site-content">
      ...
    </div>
    <!-- Footer -->
    <div class="site-footer">
      ...
    </div>
  </div>
</body>

SASS

Sass (Syntactically Awesome Style Sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass boasts more features and abilities than any other CSS extension language out there.

sass-lang.com

Inside files scss/custom/_variables-bootstrap.scss and scss/custom/_variables-cosmos.scss you can modify the bootstrap and template variables values. For example to change the color palette.

If you haven't used SASS before, please check out official documentation.

Grunt

Grunt is a task runner which allows to build a complete and automatic workflow.

Why use a task runner?

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

gruntjs.com

If you haven't used Grunt before, please check out official documentation.

Available tasks:

Command Description
grunt server Lunch a mini-server (using your current working directory as the base), watch your CSS and JS files for changes & auto-inject those changes into all connected browsers.
grunt dist Generates the ready-to-use files in dist/.

Bower

Bower is a package manager that makes easy to manage all application’s dependencies.

Template dependencies listed in bower.json file. Bower installs packages to bower_components/.

If you haven't used Bower before, please check out official documentation.

Support

What support includes:

  • Answering technical questions;
  • Assistance with reported bugs and issues.

What support doesn't include:

  • Customization services;
  • Installation services.