Select screen display size:
Mobile (350 px)
Tablet (766 px)
Desktop

Get started with Design System

Quick start

  1. Create a new index.html file in your project root.
    2. 
            <!doctype html> <html lang="en"> <head> <meta
            charset="utf-8"> <meta name="viewport"
            content="width=device-width, initial-scale=1">
            <title>Design System Demo</title> </head>
            <body> <h1>Hello, world!</h1> </body>
            </html>
  2. Download Components
    3. Download
  3. Place the link tag in the head including at the src the path to the theme.css file
    4. 
            <!doctype html> <html lang="en"> <head> <meta
            charset="utf-8"> <meta name="viewport"
            content="width=device-width, initial-scale=1"> <title>Design
            System Demo</title> <link rel="stylesheet" type="text/css"
            href="assets/css/theme.css"> </head> <body>
            <h1>Hello, world!</h1> </body> </html>
  4. Place the script tag in the body including at the src the path to the index.js file
    5. 
            <!doctype html> <html lang="en"> <head> <meta
            charset="utf-8"> <meta name="viewport"
            content="width=device-width, initial-scale=1"> <title>Design
            System Demo</title> <link rel="stylesheet" type="text/css"
            href="assets/css/theme.css"> </head> <body> <script
            src="assets/js/index.js"></script> <h1>Hello,
            world!</h1> </body> </html>
  5. Changing Style Sheet
    • Changes are to made to the scss files under src/assets/scss.
    • Follow a mobile first approach. The variables provided by Bootstrap should be the mobile variables. If something has a different size, color or other property value in desktop create seperate desktop variables for those and adjust accordingly in the scss files, without changing anything in the Bootstrap folder (except the variables file).
    • Do not modify the Bootstrap files in the Bootstrap folder.
  6. Modifying Design System Website
    • Website a small Node JS application in order to use layouts.
    • Website is static, links are all relative so that you can access the project locally from a folder explorer.
    • Changes are to made under src/design-system
  7. Compiling Entire Project
    • Install Node JS / NPM.
    • Open up a console (Developer Powershell) and navigate to project root
    • Type "npm run build" and enter command
    • If first time, run "npm install" to install dependencies for this project
  8. Date Picker
    9. The custom date picker is based on flat pickr. You can find it in the src => assets => plugin folder. If you want to change it, change the glhomes theme in the theme folder. After compiling take the flatpikr js and glhomes theme css and put it in the source folder. Rename the glhomes theme to flatpikr.css.