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.
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.
If your application requires some specific CSS styling,you should create a separate css file in your project (preferably called site.css), and insert the link: {{LINK to application specific CSS-file}}.
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.
Always:
Never:
<p> as “spacers”.<br/> unless there is a fire, a flood, and a meteor heading for earth.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="/v1/js/modernizr.min.js"></script>
<link rel="stylesheet" href="https://styleguide.hrmts.net/v1/css/bootstrap.min.css" />
<!--optional flatpickr datetime-->
<link rel="stylesheet" href="https://styleguide.hrmts.net/v1/css/flatpickr.min.css" />
<link rel="stylesheet" href="https://styleguide.hrmts.net/v1/css/site.css" />
<script src="https://styleguide.hrmts.net/v1/js/jquery.min.js"></script>
<!--optional flatpickr datetime-->
<script src="https://styleguide.hrmts.net/v1/js/flatpickr/flatpickr.js"></script>
{{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="/v1/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>© 2024 - HR Manager</p>
</footer>
</div>
<script src="https://styleguide.hrmts.net/v1/js/popper.min.js"></script>
<script src="https://styleguide.hrmts.net/v1/js/bootstrap.min.js"></script>
<script src="https://styleguide.hrmts.net/v1/js/site.js"></script>
{{application specific scripts go here}}
</body>
</html>