-
Notifications
You must be signed in to change notification settings - Fork 2
Web CSS Style Guide
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>
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 - (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