Introduction

CoreUI - UI Admin Kit is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if it’s not enough, let’s just add the CoreUI consists bunch of unique features and over 1000 high quality icons.,

CoreUI based on Bootstrap 4 and offers 5 versions: HTML5, AJAX, AngularJS, Angular4 and React.

CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means also mobile devices, where the navigation is the same easy and intuitive as in desktop or laptop. CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!

Bootstrap

Bootstrap is the world’s most popular framework for building responsive, mobile-first sites and applications. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.

Here’s how to quickly get started with the Bootstrap CDN and a template starter page.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control.

Oh yeah and it helps with server-side communication, taming async callbacks with promises and deferreds. It also makes client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. Best of all?? It makes development fun!

Web site: http://angularjs.org
Tutorial: http://docs.angularjs.org/tutorial
API Docs: http://docs.angularjs.org/api
Developer Guide: http://docs.angularjs.org/guide
Dashboard: http://dashboard.angularjs.org

Angular 4

Angular is a development platform for building mobile and desktop web applications.

React.js

React is a JavaScript library for building user interfaces.

Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Learn how to use React in your own project.

Vue.js

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

Starter template

Be sure to have your pages set up with the latest design and development standards. That means:

Using an HTML5 doctype
Forcing Internet Explorer to use its latest rendering mode (read more)
And, utilizing the viewport meta tag.

Put it all together and your pages should look like this:

HTML5 Static Version

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="...">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,jQuery,CSS,HTML,RWD,Dashboard">
  <link rel="shortcut icon" href="img/favicon.png">

  <title>...</title>

  <!-- Icons -->
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link href="css/simple-line-icons.css" rel="stylesheet">

  <!-- Main styles for this application -->
  <link href="css/style.css" rel="stylesheet">
</head>

<!-- BODY options, add following classes to body to change options

// Header options
1. '.header-fixed'		- Fixed Header

// Sidebar options
1. '.sidebar-fixed'		- Fixed Sidebar
2. '.sidebar-hidden'		- Hidden Sidebar
3. '.sidebar-off-canvas'	- Off Canvas Sidebar
4. '.sidebar-minimized'		- Minimized Sidebar (Only icons)
5. '.sidebar-compact'		- Compact Sidebar

// Aside options
1. '.aside-menu-fixed'		- Fixed Aside Menu
2. '.aside-menu-hidden'		- Hidden Aside Menu
3. '.aside-menu-off-canvas'     - Off Canvas Aside Menu

// Footer options
1. 'footer-fixed'		- Fixed footer

-->

<body class="app">
  <header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button">☰</button>
    <a class="navbar-brand" href="#"></a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item">
        <a class="nav-link navbar-toggler sidebar-toggler" href="#">☰</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">...</a>
      </li>
    </ul>
  </header>
  <div class="app-body">
    <div class="sidebar">
      <nav class="sidebar-nav">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="index.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="...">...</a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Main content -->
    <main class="main">
      <!-- Breadcrumb -->
      <ol class="breadcrumb">
        ...
      </ol>
      <div class="container-fluid">
        ...
      </div>
    </main>

    <aside class="aside-menu">
      ...
    </aside>

  </div>

  <footer class="app-footer">
    ...
  </footer>

  <!-- Bootstrap and necessary plugins -->
  <script src="js/libs/jquery.min.js"></script>
  <script src="js/libs/tether.min.js"></script>
  <script src="js/libs/bootstrap.min.js"></script>
  <script src="js/libs/pace.min.js"></script>

  <!-- Main scripts -->
  <script src="js/app.js"></script>

  <!-- Plugins and scripts required by this views -->
  <script src="..."></script>

  <!-- Custom scripts required by this view -->
  <script src="..."></script>

</body>
</html>

AJAX Version

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="...">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,jQuery,CSS,HTML,RWD,Dashboard">
  <link rel="shortcut icon" href="img/favicon.png">

  <title>...</title>

  <!-- Icons -->
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link href="css/simple-line-icons.css" rel="stylesheet">

  <!-- Main styles for this application -->
  <link href="css/style.css" rel="stylesheet">
</head>

<!-- BODY options, add following classes to body to change options

// Header options
1. '.header-fixed'		- Fixed Header

// Sidebar options
1. '.sidebar-fixed'		- Fixed Sidebar
2. '.sidebar-hidden'		- Hidden Sidebar
3. '.sidebar-off-canvas'	- Off Canvas Sidebar
4. '.sidebar-minimized'		- Minimized Sidebar (Only icons)
5. '.sidebar-compact'		- Compact Sidebar

// Aside options
1. '.aside-menu-fixed'		- Fixed Aside Menu
2. '.aside-menu-hidden'		- Hidden Aside Menu
3. '.aside-menu-off-canvas'     - Off Canvas Aside Menu

// Footer options
1. 'footer-fixed'		- Fixed footer

-->

<body class="app">
  <header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button">☰</button>
    <a class="navbar-brand" href="#"></a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item">
        <a class="nav-link navbar-toggler sidebar-toggler" href="#">☰</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">...</a>
      </li>
    </ul>
  </header>
  <div class="app-body">
    <div class="sidebar">
      <nav class="sidebar-nav">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="index.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="...">...</a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Main content -->
    <main class="main">
      <!-- Breadcrumb -->
      <ol class="breadcrumb">
        ...
      </ol>
      <div class="container-fluid">
        <div id="ui-view"></div>
      </div>
    </main>

    <aside class="aside-menu">
      ...
    </aside>

  </div>

  <footer class="app-footer">
    ...
  </footer>

  <!-- Bootstrap and necessary plugins -->
  <script src="js/libs/jquery.min.js"></script>
  <script src="js/libs/tether.min.js"></script>
  <script src="js/libs/bootstrap.min.js"></script>
  <script src="js/libs/pace.min.js"></script>

  <!-- Main scripts -->
  <script src="js/app.js"></script>

</body>
</html>

AngularJS Version

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="...">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,jQuery,CSS,HTML,RWD,Dashboard">
  <link rel="shortcut icon" href="img/favicon.png">

  <title>...</title>

  <!-- Icons -->
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link href="css/simple-line-icons.css" rel="stylesheet">

  <!-- Main styles for this application -->
  <link href="css/style.css" rel="stylesheet">
</head>

<!-- BODY options, add following classes to body to change options

// Header options
1. '.header-fixed'		- Fixed Header

// Sidebar options
1. '.sidebar-fixed'		- Fixed Sidebar
2. '.sidebar-hidden'		- Hidden Sidebar
3. '.sidebar-off-canvas'	- Off Canvas Sidebar
4. '.sidebar-minimized'		- Minimized Sidebar (Only icons)
5. '.sidebar-compact'		- Compact Sidebar

// Aside options
1. '.aside-menu-fixed'		- Fixed Aside Menu
2. '.aside-menu-hidden'		- Hidden Aside Menu
3. '.aside-menu-off-canvas'     - Off Canvas Aside Menu

// Footer options
1. 'footer-fixed'		- Fixed footer

-->

<body class="app">

  <!-- User Interface -->
  <ui-view></ui-view>

  <!-- Bootstrap and necessary plugins -->
  <script src="js/libs/jquery.min.js"></script>
  <script src="js/libs/tether.min.js"></script>
  <script src="js/libs/bootstrap.min.js"></script>

  <!-- AngularJS -->
  <script src="js/libs/angular.min.js"></script>

  <!-- AngularJS plugins -->
  <script src="js/libs/angular-ui-router.min.js"></script>
  <script src="js/libs/ocLazyLoad.min.js"></script>
  <script src="js/libs/angular-breadcrumb.min.js"></script>
  <script src="js/libs/loading-bar.min.js"></script>

  <!-- AngularJS App scripts -->
  <script src="js/app.js"></script>
  <script src="js/routes.js"></script>
  <script src="js/demo/routes.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

Angular 4 Version

index.html

<!doctype html>
<html>
<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="...">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="...">
  <link rel="shortcut icon" href="assets/img/favicon.png">

  <title>%THEMENAME% - %THEMEDESC%</title>

  <!-- Icons -->
  <link href="assets/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/css/simple-line-icons.css" rel="stylesheet">

</head>

<!-- BODY options, add following classes to body to change options

// Header options
1. '.header-fixed'		- Fixed Header

// Sidebar options
1. '.sidebar-fixed'		- Fixed Sidebar
2. '.sidebar-hidden'		- Hidden Sidebar
3. '.sidebar-off-canvas'	- Off Canvas Sidebar
4. '.sidebar-minimized'		- Minimized Sidebar (Only icons)
5. '.sidebar-compact'		- Compact Sidebar

// Aside options
1. '.aside-menu-fixed'		- Fixed Aside Menu
2. '.aside-menu-hidden'		- Hidden Aside Menu
3. '.aside-menu-off-canvas'     - Off Canvas Aside Menu

// Footer options
1. 'footer-fixed'		- Fixed footer

-->

<body class="app">
  <!-- App Loading... -->
</body>

</html>

full-layout.component.html

<header class="app-header navbar">
  <button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>&#9776;</button>
  <a class="navbar-brand" href="#"></a>
  <ul class="nav navbar-nav d-md-down-none">
    <li class="nav-item">
      <a class="nav-link navbar-toggler" href="#" appSidebarToggler>&#9776;</a>
    </li>
    <li class="nav-item px-3">
      <a class="nav-link" href="#">...</a>
    </li>
  </ul>
  <ul class="nav navbar-nav ml-auto">
    <li class="nav-item d-md-down-none">
      <a class="nav-link" href="#">...</a>
    </li>
    <li class="nav-item d-md-down-none">
      <a class="nav-link navbar-toggler" href="#" appAsideMenuToggler>&#9776;</a>
    </li>
  </ul>
</header>

<div class="app-body">
  <div class="sidebar">
    <nav class="sidebar-nav">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></a>
        </li>
      </ul>  
    </nav>
  </div>

  <!-- Main content -->
  <main class="main">

    <!-- Breadcrumb -->
    <ol class="breadcrumb">
      <breadcrumbs></breadcrumbs>
    </ol>

    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div><!-- /.conainer-fluid -->
  </main>

  <aside class="aside-menu">
    ...
  </aside>
</div>

<footer class="app-footer">
  ...
</footer>

React.js Version

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="%THEMENAME% - %THEMEDESC%">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="%THEMEKEYWORDS%">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>%THEMENAME% - %THEMEDESC%</title>

    <!-- Icons -->
    <link href="%PUBLIC_URL%/css/font-awesome.min.css" rel="stylesheet">
    <link href="%PUBLIC_URL%/css/simple-line-icons.css" rel="stylesheet">

    <!-- Main styles for this application -->
    <link href="%PUBLIC_URL%/css/style.css" rel="stylesheet">

  </head>

  <!-- BODY options, add following classes to body to change options

  // Header options
  1. '.header-fixed'		- Fixed Header

  // Sidebar options
  1. '.sidebar-fixed'		- Fixed Sidebar
  2. '.sidebar-hidden'		- Hidden Sidebar
  3. '.sidebar-off-canvas'	- Off Canvas Sidebar
  4. '.sidebar-minimized'		- Minimized Sidebar (Only icons)
  5. '.sidebar-compact'		- Compact Sidebar

  // Aside options
  1. '.aside-menu-fixed'		- Fixed Aside Menu
  2. '.aside-menu-hidden'		- Hidden Aside Menu
  3. '.aside-menu-off-canvas'     - Off Canvas Aside Menu

  // Footer options
  1. 'footer-fixed'		- Fixed footer

  -->

  <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
</html>

full.js

import React, { Component } from 'react';
import Header from '../../components/Header/';
import Sidebar from '../../components/Sidebar/';
import Aside from '../../components/Aside/';
import Footer from '../../components/Footer/';

import Breadcrumbs from 'react-breadcrumbs';

class Full extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <div className="app-body">
          <Sidebar {...this.props}/>
          <main className="main">
            <Breadcrumbs
              wrapperElement="ol"
              wrapperClass="breadcrumb"
              itemClass="breadcrumb-item"
              separator=""
              routes={this.props.routes}
              params={this.props.params}
            />
            <div className="container-fluid">
              {this.props.children}
            </div>
          </main>
          <Aside />
        </div>
        <Footer />
      </div>
    );
  }
}

export default Full;

Vue.js Version

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>%THEMENAME% - %THEMEDESC%</title>

    <!-- Icons -->
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link href="static/css/simple-line-icons.css" rel="stylesheet">

    <!-- Main styles for this application -->
    <link href="static/css/style.css" rel="stylesheet">
  </head>

  <!-- BODY options, add following classes to body to change options

  // Header options
  1. '.header-fixed'		- Fixed Header

  // Sidebar options
  1. '.sidebar-fixed'		- Fixed Sidebar
  2. '.sidebar-hidden'		- Hidden Sidebar
  3. '.sidebar-off-canvas'	- Off Canvas Sidebar
  4. '.sidebar-minimized'		- Minimized Sidebar (Only icons)
  5. '.sidebar-compact'		- Compact Sidebar

  // Aside options
  1. '.aside-menu-fixed'		- Fixed Aside Menu
  2. '.aside-menu-hidden'		- Hidden Aside Menu
  3. '.aside-menu-off-canvas'     - Off Canvas Aside Menu

  // Footer options
  1. 'footer-fixed'		- Fixed footer

  -->

  <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Full.vue

<template>
  <div class="app">
    <AppHeader/>
    <div class="app-body">
      <Sidebar/>
      <main class="main">
        <breadcrumb :list="list"/>
        <div class="container-fluid">
          <router-view></router-view>
        </div>
      </main>
      <AppAside/>
    </div>
    <AppFooter/>
  </div>
</template>

<script>
import AppHeader from '../components/Header'
import Sidebar from '../components/Sidebar'
import AppAside from '../components/Aside'
import AppFooter from '../components/Footer'
import Breadcrumb from '../components/Breadcrumb'

export default {
  name: 'full',
  components: {
    AppHeader,
    Sidebar,
    AppAside,
    AppFooter,
    Breadcrumb
  },
  computed: {
    name () {
      return this.$route.name
    },

    list () {
      return this.$route.matched
    }
  }
}
</script>

That’s all you need for overall page requirements.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

You can see an example of this in action in the starter template.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

.selector-for-some-widget {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

With the above snippet, nested elements—including generated content via :before and :after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Introduction

Contents

Bootstrap

AngularJS

Angular 4

React.js

Vue.js

Starter template

HTML5 Static Version

AJAX Version

AngularJS Version

Angular 4 Version

index.html

full-layout.component.html

React.js Version

index.html

full.js

Vue.js Version

index.html

Full.vue

HTML5 doctype

Responsive meta tag

Box-sizing