CoreUI is a free admin template built on top of Bootstrap 4. It's modern, beautiful and very clean. In this post, I'll show you how one can integrate & theme this amazing kit.
If you'd like to see it in action you can have a look at their live demo.
Since this is just a tutorial, let's keep things simple and to the point. I'll list the steps here and if you'd like to take a look at a more structured way to do this, you can have a look at my repo on GitHub.
Import CoreUI Package
Import the CoreUI package using NPM.
npm install @coreui/coreui@ --save
Create a Layout with Starter Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CoreUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css" crossorigin="anonymous">
<title>CoreUI</title>
</head>
<body class="c-app">
<script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
</body>
</html>
Setup SASS
Create resources/scss/app.scss
.
// CoreUI
// - Variables
@import "./variables";
// - Main
@import "~@coreui/coreui/scss/coreui";
Create resources/scss/_variables.scss
.
// CoreUI Variable Overrides
Update webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css', [
//
]);
Compile to CSS
npm run dev
Update Previously Created Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<title>@yield('title')</title>
</head>
<body class="c-app">
@yield('content')
<script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
</body>
</html>
Theming
You can now update CoreUI variables by setting them in resources/scss/_variables.scss
and get your admin template set as per your desired branding.
That's All, Folks!
I hope this article helps people out there. Feel free to reach out in the comments about any concerns.
Top comments (3)
Thank you Zack, great article. Fingers crossed for more :) Greetings
Welcome! And thank you for the kind words.
if you find a minute or two to check our other CoreUI tools, just let me know ;]