Scout Group

Our Scout Group is very active and has approximately 50 young members aged from 6 to 14 who enjoy weekly meetings, activities, camps etc.

We also support an Explorer Scout Unit of 14 to 18 year olds.

None of this would be possible without Adult support.

Support is needed in two key areas :

    • Leaders, assistants and supporters to plan and run the weekly meetings and
      other activities ;
  • Executive Committee members and supporters to look after our finances and administration, maintain our building, make sure all our running costs are covered,make sure we are properly equipped and raise funds to pay for everything.

CO-ORDINATING OUR activities and VOLUNTEERS

All the activities and volunteers in the Group are co-ordinated by our
Group Scout Leader, who is responsible for ensuring the Young People have an interesting and active programme and that Adult volunteers are appointed, vetted and trained for the various roles supporting the Young People.

WANT TO KNOW MORE ?

Contact us and we will get in touch.

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.

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).

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.

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

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

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

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>
<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

<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

<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

<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

<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

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

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

<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

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.

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>

Can’t see what you’re looking for?

How to get involved

Register interest in volunteering or join our youth programme