Skip to content

Web CSS Style Guide

Dave Lawrence edited this page Oct 12, 2020 · 1 revision

Forms

General

To get our preferred styling around a form, wrap it with

<fieldset class="form-fields">
</fieldset>

If the form is already in a border (e.g. if it's inside a tab) you can also add the class "borderless" so it doesn't add its own border.

Django's built in form rendering as_p method generates HTML in the form of

<p>
    <label>Foo</label>
    <input type="text" name="foo" />
</p>

So to intermix our own HTML and auto generated Django form HTML, use the same structure. However a <p> tag cannot contain a <div>. If you need to do so, alternatively you can use

<div class="pair">
    <label>Foo</label>
    <div> some div stuff going on in here </div>
</div>

and it will be styled the same. e.g.

<fieldset class="form-fields borderless">
    <div class="pair">
        <label>Avatar</label>
        <div>{% avatar user class='circular-avatar' %}<a href="javascript:changeAvatar()"><br/>Change avatar</a></div>
    </div>
    <p>
        <label>User Name</label><span>{{ user.username }}</span>
    </p>
    
    {{ user_form.as_p }}

</fieldset>

Labels

Don't add manual ":" suffixes to labels, if we decide we want to add these it can be done via CSS. However by default Django will add them for its generated forms. To stop this extends BaseModelForm or BaseFrom from snpdb/forms.py, you'll see the line

kwargs.setdefault('label_suffix', '')

in them to remove the suffix.

Whenever possible in the <label> provide the for attribute (the id of the corresponding input, select etc). This will mean clicking on the label will provide focus or selection on the corresponding data entry field.

SCSS

SCSS - (Sassy CSS) allows you to write css with some extra features and will be compiles to css so regular browsers can manage it. Even if you don't use the advanced features, the resulting css will be relatively minimised, comments removed etc. See vc_form.scss vs vc_form.css for an example.

See SCSS for how we use it in variantgrid.

In future I'd like to migrate global.css, top_menu.css and branding.css all to scss

Clone this wiki locally