Palette – Introduction

Welcome to the Palette, the HR Manager Style Guide!

This site intends to document most common web assets in the HR Manager application portfolio.

When you start a new project, you should use the HTML base setup on this page to start off your main view. Navigate the site’s menu to find markup and rules for your specific needs, and feel free to contact any one of the members of the front-end team for help if you’re unsure about how to use this site or the examples in this style guide.

You are allowed to make app specific HTML and CSS if you have needs that are not covered by this style guide, but please be conservative with your styles and if you see that your new components should be included in the style guide do not hesitate to contact the maintainers of the style guide for suggestions.

Getting started

First step when setting up a new application or site, is to 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. If your application requires some specific CSS styling, you should replace {{application specific CSS goes here}} on line 13 with your CSS.

For most applications, you'll want login status and user navigation. Look up the documentation and replace line 36 with your markup for this.

Same goes for your application specific site navigation. Look it up and replace line 45 with your navigation.

The entirety of the content should replace {{body content goes here}} on line 54. The content typically consists of a title (<h1 class="page-title">Page Title</h1>), and a box (<div class="card-box">Content</div>) that holds the content. Make sure all your content markup follows the guidelines in this style guide.

Finally, you can replace line 68 with whatever application specific JavaScript code you need, or remove that line altogether if you don't have any application specific JavaScript.

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/js/modernizr.min.js"></script>
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/css/bootstrap.min.css" />
                        <!-- Optional Datepicker -->
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/css/bootstrap-datepicker.min.css" />
                        <!-- /Optional Datepicker -->
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/css/site.css" />
                        <!-- /Optional Timepicker -->
                        <link rel="stylesheet" href="https://styleguide.hrmts.net/css/jquery.timepicker.css" />
                        {{application specific CSS goes here}}
                    </head>
                        <body>
                            <header id="topnav">
                                <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 d-block d-md-none" alt="HR Manager" />
                                                <img src="https://styleguide.hrmts.net/images/hrmts-logo.png" class="logo-icon d-none d-md-block" alt="HR Manager" />
                                            </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">
                                    {{body content goes here}}
                                    <div class="clearfix"></div>
                                </div>
                                <footer class="footer">
                                    <p>© 2020 - HR Manager</p>
                                </footer>
                            </div>
                            <script src="https://styleguide.hrmts.net/js/jquery-3.2.1.min.js"></script>
                            <script src="https://styleguide.hrmts.net/js/popper.min.js"></script>
                            <script src="https://styleguide.hrmts.net/js/bootstrap.min.js"></script>
                            <!-- Optional Datepicker -->
                            <script src="https://styleguide.hrmts.net/js/bootstrap-datepicker.min.js"></script>
                            <!-- /Optional Datepicker -->
                            <script src="https://styleguide.hrmts.net/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>