Frontend Index

This is outdated as we moved to Bootstrap 4

Technologies

The HMS2 frontend is based on Bootstrap. Bootstrap's SASS stylesheets are compiled along with custom SASS to produce the final stylesheet.

Client scripting is done in ES6, heavy components are done with VueJs and a sprinkle of jQuery for smaller bits.

Guidelines

Backend developers can feel free to produce dirty, unstyled markup to get things working. At least one frontend dev enjoys tidying up such things.

When you are trying to style things, you should adhere to the following guidelines:

Use the layout

Almost all pages should use the standard layout template. This provides the header, navigation, footer and user information elements, and also functions when the user is logged out (hiding the main navigation and providing login/register links). If you need something else for a special purpose, consider carefully as a proliferation of layouts is an unpleasant maintenance situation.

Use HMS CSS first

Over time we will be building up an increasing number of specialised CSS classes for HMS's style. Check these first! There will be some documentation on the wiki, but the most up to date way will always be to examine existing examples of something similar to what you want to do.

Mark up forms

Our current markup for form controls uses some custom classes based on Foundation flex grids.

<div class="row">
    <label class="form-label" for="controlid">Label text</label>
    <div class="form-control">
        <input type="text" id="controlid"></input>
        @if (errors for this control)
            <p class="help-text">{{error text}}</p>
        @endif
    </div>
</div>

Exploit Foundation

HMS hasn't excluded any parts of Foundation (yet), so the full capability of Foundation Sites 6 is available if required. Foundation's components will automatically follow HMS themeing and style. Any which don't can be persuaded to do so, and may just require some extra customisation.

Create new specialised styles if required

Specialised styles live in app.scss. Use the Foundation mixins or inherit from Foundation classes in order to get the basics of what you need, then add specific CSS from there.

Use Flexbox

HMS uses the Flexbox-based grid from Foundation, and the core page template is based on a Flexbox implementation of the "Holy Grail" layout. So, feel free to use more Flexbox within pages if required, just be careful of the behaviour of flex children which are also Flexbox parents, as they can start behaving in surprising ways.

Be adaptive

Foundation grid provides a variety of small-* medium-* large-* classes to allow grid rows to break at smaller screen sizes (actually it is more logical to think of it as changing at larger sizes, as it's defined from small on upwards). The core layout exploits this, including the ability of the Flexbox grid to re-order elements at different screen sizes.

Don't rely solely on colour

Standard advice: don't rely solely on colour to distinguish page elements. Colour-blind people and those with various other visual impairments won't thank you for it.

Don't invent your own colours unless you have to

There is a palette of colours provided by the core stylesheet. Use those as much as you can, or add new SASS variables to _settings.scss with them in, and relevant classes to app.scss or entries to the Foundation colour palette in _settings.scss to use them. Do not hard code colour values into HTML.