Application toolkit - Installation
Our application toolkit is a set of UI components and elements built with the world's fastest growing framework - Tailwind CSS.
Quick setup
This guide will help you get started with the HS2 Application Toolkit, including how to run, customize, update, and integrate your project!
First, you need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.
Preline
Our application toolkit uses Preline to handle interactivity, such as dropdowns, overlays, tooltips and more.
If you are using a specific framework, see the Preline.js framework guides, but don't forget to add in the plugins and configuration shown below.
1. Install preline via npm
npm i preline
2. Add the Preline UI JavaScript
Include the JavaScript <script> that powers the interactive elements near the end of your <body> tag:
// index.html
<script src="./node_modules/preline/dist/preline.js"></script>Tailwind Forms
Our form components use the tailwind forms plugin:
npm install -D @tailwindcss/forms
Aspect Ratio Plugin
Some of our examples use the tailwind aspect ratio plugin:
npm install -D @tailwindcss/aspect-ratio
Tailwind Configuration
Finally, we can enable the plugins and the HS2 styling in the tailwind config. Make sure to update the content property for your own project.
//tailwind.config.js
module.exports = {
// SET CONTENT PATHS BASED ON YOUR OWN PROJECT!
content: ['./app/views/**/*.njk', 'node_modules/preline/dist/*.js'],
theme: {
extend: {
fontFamily: {
sans: ['Open Sans', 'Arial', 'sans-serif'],
},
colors: {
// Main Colours
'hs2-primary': {
DEFAULT: '#1E3773',
50: '#6F8ED9',
100: '#5F82D5',
200: '#3F68CD',
300: '#2F56B4',
400: '#264693',
500: '#1E3773',
600: '#122247',
700: '#070C1A',
800: '#000000',
900: '#000000',
950: '#000000',
},
'hs2-primary-hover': '#122247',
'hs2-cyan': '#2079C6',
'hs2-secondary': '#A8518A',
'hs2-secondary-hover': '#823F6B',
'hs2-info': '#2079C6',
'hs2-info-hover': '#185B96',
'hs2-success': '#00703C',
'hs2-success-hover': '#00381E',
'hs2-warning': '#B36100',
'hs2-danger': '#D4351C',
'hs2-danger-hover': '#A22915',
'hs2-purple': '#4C2C92',
// Link Colours
'hs2-hover-state': '#7C2855',
'hs2-link': '#2079C6',
'hs2-visited': '#330072',
'hs2-active': '#002F5C',
// Text Colours
'hs2-text': '#212B32',
'hs2-text-light': '#4C6272',
// Border Colours
'hs2-border': '#D8DDE0',
'hs2-border-input': '#4C6272',
// Neutral Colours
'hs2-black': '#222222',
'hs2-grey-1': '#4C6272',
'hs2-grey-2': '#768692',
'hs2-grey-3': '#AEB7BD',
'hs2-grey-4': '#D8DDE0',
'hs2-grey-5': '#F0F4F5',
'hs2-white': '#FFFFFF',
},
},
},
darkMode: 'class',
corePlugins: {
aspectRatio: false,
},
plugins: [require('preline/plugin'), require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')],
};