Palette – Introduction

Welcome to the Palette, the HR Manager Style Guide!

When you start a new project, you should use the HTML base setup on this page to start off your main view. Here you will find markup and rules for your specific needs.

Please be conservative, and contact any of the front-end team if you need something.

Getting started

First, copy the page template on this page, and paste it into your base layout file. As you can see certain lines are highlighted, this is where you put your dynamic and application specific content. On line 6, you should replace {{page title goes here}} with the page title you want for your application.

For most applications, you'll want login status and user navigation. Look up the documentation and add the respective markup.

Finally, you can replace {{application specific scripts go here}} with links to application-specific JavaScript code you need.

You need something not here? Rule of thumbs:

Always:

  • Check the styleguide.
  • If the styleguide does not give you what you need, use Bootstrap documentation and stick to defaults.
  • If you bump into a problem assume that Bootstrap has solved it. Be lazy.
  • If you still have a problem, ask your friendly neighbourhood designers.
  • The order of CSS sheets links in header matters.
  • If you don’t like the defaults, use them anyway, and document / talk to product and designers why we should globally change this.

Never:

  • never use fixed widths, heights or any definite px anywhere (in a crisis, ok for 10 px / 1em or LESS only).
  • never hardcode styling.
  • Never put css in the heading.
  • never use <p> as “spacers”.
  • never use tables for anything else than data tables.
  • never use <br/> unless there is a fire, a flood, and a meteor heading for earth.
  • never use empty, classless or id-less divs.
  • did i mention never hardcode.

If you “need” to hardcode something, or change the css, there is something wrong with the structure. You are probably just missing some classes, or the nesting is wrong.

The style guide is not complete, so if you need something talk to your friendly neighbourhood designer.

Good luck!


                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="utf-8" />
                        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                        <title>{{page title goes here}}</title>
                        <script src="https://styleguide.hrmts.net/v2/js/modernizr.min.js"></script>
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/v2/css/bootstrap.min.css" />
                        <!-- Optional Datepicker -->
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/v2/css/bootstrap-datepicker.min.css" />
                        <!-- /Optional Datepicker -->
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/v2/css/site.css" />
                        <!-- /Optional Timepicker -->
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/v2/css/jquery.timepicker.css" />
                        {{LINK to application specific CSS-file}}
                    </head>
                        <body>
                            <header id="topnav">
                                {{support navigation here}}
                                <div class="topbar-main">
                                    <div class="container">
                                        <div class="topbar-left">
                                            <a class="logo pt-1" href="/">
                                <img src="https://styleguide.hrmts.net/images/hrmts-logo-icon.png" class="logo-icon"/>
                                <span class="d-inline-block">{{name of system for example Recruiter}}</span>
                                            </a>
                                        </div>
                                        <div class="menu-extras navbar-topbar">
                                            <ul class="list-inline float-right mb-0">
                                                <li class="list-inline-item">
                                                    <a class="navbar-toggle">
                                                        <div class="lines">
                                                            <span></span>
                                                            <span></span>
                                                            <span></span>
                                                        </div>
                                                    </a>
                                                </li>
                                                {{login status and user navigation goes here, see Navigation->User navigation}}
                                            </ul>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <nav class="navbar-custom active">
                                    <div class="container">
                                        <div id="navigation" class="site-nav">
                                            {{application specific navigation goes here, see Navigation->Site navigation}}
                                        </div>
                                        <button id="nav-scroll-left" class="nav-scroll nav-scroll-left"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>
                                        <button id="nav-scroll-right" class="nav-scroll nav-scroll-right"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                                    </div>
                                </nav>
                            </header>
                            <div class="wrapper">
                                <div class="container mb-5">
                                    <h1 class="page-title">{{page title}}</h1>
                                        <div class="card-box">
                                            {{body content goes here}}
                                        </div>
                                    <div class="clearfix"></div>
                                </div>
                                <footer class="footer">
                                    <p>© 2020 - HR Manager</p>
                                </footer>
                            </div>
                            <script src="https://styleguide.hrmts.net/v2/js/jquery.min.js"></script>
                            <script src="https://styleguide.hrmts.net/v2/js/popper.min.js"></script>
                            <script src="https://styleguide.hrmts.net/v2/js/bootstrap.min.js"></script>
                            <!-- Optional Datepicker -->
                            <script src="https://styleguide.hrmts.net/v2/js/bootstrap-datepicker.min.js"></script>
                            <!-- /Optional Datepicker -->
                            <script src="https://styleguide.hrmts.net/v2/js/site.js"></script>
                            <!--/Optional Timepicker -->
                            <script src="https://styleguide.hrmts.net/js/jquery.timepicker.min.js"></script>
                            <!--/Optional DatePairer -->
                            <script src="https://styleguide.hrmts.net/js/datepair.min.js"></script>
                            <script src="https://styleguide.hrmts.net/js/jquery.datepair.min.js"></script>
                            <!--Optional DatePairer End\-->
                            {{application specific scripts go here}}
                        </body>
                    </html>