Berkshire Scouts

Berkshire Scouts Logo
Get involved

Styleguide

The following is a general guide to how the base stylesheets should display various elements on the site.

Typography

Typographic styles used in the theme are based on scalable units to allow text to scale depending on the users browser settings.

Headings

Heading styles are available for upto 5 levels of hierarchy. Most page templates will include one H1 to display the page's title.

Preview Code

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>

Paragraphs

Standard body content will by default display at 16px (1rem).

Preview Code

This is an example of a standard paragraph, text can be set in bold or italic. Sed ac nisi ex. Fusce eu condimentum turpis.

Ut laoreet magna pellentesque. Nam dignissim tortor nec tristique sagittis. Integer gravida vitae magna laoreet fermentum. Fusce sagittis cursus purus.

<p>This is an example of a standard paragraph, text can be set in <strong>bold</strong> or <em>italic</em>. Sed ac nisi ex. Fusce eu condimentum turpis.</p>
<p>Ut laoreet magna pellentesque. Nam dignissim tortor nec tristique sagittis. Integer gravida vitae magna laoreet fermentum. Fusce sagittis cursus purus.</p>

Lists

There are three main types of lists available – numbered lists, bulleted lists and ruled lists.

Preview Code

Numbered list:

  1. List item 1
  2. List item 2
  3. List item 3

Bulleted list:

  • List item 1
  • List item 2
  • List item 3

Ruled list:

  • List item 1
  • List item 2
  • List item 3
<!-- Numbered list -->
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<!-- Bulleted list -->
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<!-- Ruled list -->
<ul class="ruled-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Blockquotes

Preview Code

This is a quote

This is the citation 
<blockquote>
  <p>This is a quote</p>
  <cite>This is the citation</cite>
</blockquote>

Tables

Basic table

Preview Code
Table header Table header Table header
Content Content Content
Content Content Content
Content Content Content 
<table>
	<thead>
		<tr>
			<th>Table header</th>
			<th>Table header</th>
			<th>Table header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Content</td>
			<td>Content</td>
			<td>Content</td>
		</tr>
		<tr>
			<td>Content</td>
			<td>Content</td>
			<td>Content</td>
		</tr>
		<tr>
			<td>Content</td>
			<td>Content</td>
			<td>Content</td>
		</tr>
	</tbody>
</table>

Media

Various media objects like images and video embeds.

Images

Preview Code
Alt text
This is an example of a caption
Alt text 
<!-- Image with caption -->
<figure>
  <img src="https://via.placeholder.com/640x320/7413dc/FFFFFF?text=Image+with+caption" alt="Alt text">
	<figcaption>This is an example of a caption</figcaption>
</figure>

<!-- Image without caption -->
<figure>
  <img src="https://via.placeholder.com/640x320/7413dc/FFFFFF?text=Image+without+caption" alt="Alt text">
</figure>
Preview Code 
<ul class="wp-block-gallery alignnone columns-3 is-cropped">
  <li class="blocks-gallery-item">
    <figure><img src="https://via.placeholder.com/640x320/7413dc/FFFFFF"></figure>
  </li>
  <li class="blocks-gallery-item">
    <figure><img src="https://via.placeholder.com/850x850/7413dc/FFFFFF"></figure>
  </li>
  <li class="blocks-gallery-item">
    <figure><img src="https://via.placeholder.com/275x300/7413dc/FFFFFF"></figure>
  </li>
  <li class="blocks-gallery-item">
    <figure><img src="https://via.placeholder.com/400x300/7413dc/FFFFFF"></figure>
  </li>
  <li class="blocks-gallery-item">
    <figure><img src="https://via.placeholder.com/700x350/7413dc/FFFFFF"></figure>
  </li>
</ul>

Video

Preview Code 
<figure class="wp-block-embed is-type-video">
	<iframe width="640" height="360" src="https://www.youtube.com/embed/3QuJjkezzQk?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">
</figure>

Forms

Base form styling is detailed below

Example form

Preview Code 
<form class="form">
  <div class="form__field">
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div class="form__field">
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div class="form__field">
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="form__field">
    <input type="submit" value="Submit">
  </div>
</form>

Text inputs

Preview Code 
<form class="form">
  <div class="form__field">
    <label for="name">Text input:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div class="form__field">
    <label for="msg">Textarea:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
</form>

Select fields

Preview Code 
<form class="form">
  <div class="form__field">
    <label for="select-field">Select field</label>
    <select name="select-field">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
  </div>
  <div class="form__field">
    <label for="select-field-multiple">Select field multiple selections</label>
    <select name="select-field-multiple" size="4" multiple>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
  </div>
</form>

Radioboxes

Preview Code
Select an option 
<form class="form">
  <fieldset class="form__fieldset">
    <legend>Select an option</legend>
      <div class="radiobox">
        <input type="radio" id="Option 1" name="radiobox" checked />
        <label for="Option 1">Option 1</label>
      </div>
      <div class="radiobox">
        <input type="radio" id="Option 2" name="radiobox" />
        <label for="Option 2">Option 2</label>
      </div>
      <div class="radiobox">
        <input type="radio" id="Option 3" name="radiobox" />
        <label for="Option 3">Option 3</label>
      </div>
  </fieldset>
</form>

Checkboxes

Preview Code
Select an option 
<form class="form">
  <fieldset class="form__fieldset">
    <legend>Select an option</legend>
      <div class="checkbox">
        <input type="checkbox" id="Option 1" name="checkbox" checked />
        <label for="Option 1">Option 1</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" id="Option 2" name="checkbox" />
        <label for="Option 2">Option 2</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" id="Option 3" name="checkbox" />
        <label for="Option 3">Option 3</label>
      </div>
  </fieldset>
</form>

Buttons

Preview Code 
<form class="form">
  <div class="form__field">
    <button>Default button</button>
  </div>
  <div class="form__field">
    <button disabled>Disabled button</button>
  </div>
</form>

File upload

Preview Code

Single file upload

Multiple file upload

<form class="form">
  <div class="form__field">
    <input type="file" name="file-1" id="file-1" />
    <label for="file-1"><span>Choose a file…</span></label>
  </div>
  <div class="form__field">
    <!-- Note the 'data-multiple-caption' attribute is required to show the file count' -->
    <input type="file" name="file-2" id="file-2" data-multiple-caption="{count} files selected" multiple="">
    <label for="file-2"><span>Choose a file…</span></label>
  </div>
</form>

Grid systems

Toast Grid

Toast Grid is included in the stylesheets, full documentation can be found here.

Preview Code

Two column layout

This is a two column layout. Things can get more complex if needed. The grid supports 2, 3, 4, 5, 6, 8 or 12 column layouts.

There are class modifiers for centering, pushing and pulling columns about, check out the full docs for how to use these.

<h3>Two column layout</h3>
<div class="grid">
  <div class="grid__col grid__col--1-of-2">
    <p>This is a two column layout. Things can get more complex if needed. The grid supports 2, 3, 4, 5, 6, 8 or 12 column layouts.</p>
  </div>
  <div class="grid__col grid__col--1-of-2">
    <p>There are class modifiers for centering, pushing and pulling columns about, check out the full <a target="_blank"  href="https://daneden.github.io/Toast">docs</a> for how to use these.</p>
  </div>
</div>

Search

How to get involved

Register interest in volunteering or join our youth programme