The default style sheet formats this page.
Use this page to set the basic elements before you start building your site.
Link/button/table hovers don't come into effect until >900px
The test folder can be deleted and will not effect your site.

-- So start your website by making this page look pretty! --

-- Links --

Theme Variables

Spacings `$s-0` to `$s-15` - the theme variables

Typography

The headings use the body font from Google Fonts - Raleway - uses 9 weights and includes italic
The heading font-sizes are set using the on-line clamp font-size app
- see css/base/_typography.scss

Heading h1

Heading h2 weight normal

Heading h2 weight 300

Heading h2 weight 700

Heading h2 check line-height with this really long, I mean really long, I really mean this really long title.

Heading h3

Heading h4

Heading h5

Heading h6

Big headings are classes and mixins
Font-sizes set with the clamp font-size app
- see css/class/_typography.scss

This is h1 as bighead-1

This is h1 as bighead-2

This is h1 as bighead-3

This is h1 as bighead-4

The body font from Google Fonts - Raleway - uses 9 weights and includes italic. The body font-size is $font-size - 1.2rem - see css/root/_variables.scss and css/site/_site.scss

Another surprise was how much water there was - font-weight 100
Another surprise was how much water there was - font-weight 200
Another surprise was how much water there was - font-weight 200
Another surprise was how much water there was - font-weight 300
Another surprise was how much water there was - font-weight 400
Another surprise was how much water there was - font-weight 500
Another surprise was how much water there was - font-weight 600
Another surprise was how much water there was - font-weight 700
Another surprise was how much water there was - font-weight 800
Another surprise was how much water there was - font-weight 900

Lead Paragraph Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis strong dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Normal Paragraph - the <p> is tag set with the clamp font-size app - see css/base/_typography.scss - Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante.

Secondary Paragraph Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Third Paragraph Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis strong dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Basic Tags

small

This is small, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Definition (dfn).

They parked the truck on the side of the road trying to park off the road as much as they could, and the definition - but usually without much success and then placed large stones around the side of the truck that was still on the road. - end definition. They then try and repair the truck behind this barrier of stone

pre (pre)

Another surprise was how much water there was. Water was pumped around fields for irrigation, where the water forms largish ponds women washed clothes or men showered at the water pumps in the hot sun.

Blockquotes (blockquote)

Blockquote - The roads were still crazy and I was still forced off the road from time to time by the odd 'Blow Horn' truck. I call them 'Blow Horn' because at the back of every truck there was a sign in big letters, "BLOW HORN OK PLEASE"

Abbreviation (abbr)

By the time I got to Alwar it was well dark. I'd cycled about 12km in the dark with no lights, very difficult with no or very poor street lights.

Cite (cite)

I thought I'd found a good, and the cite - hotel - end cite, that was cheap and clean but I couldn't stay there, the guy didn't have the, a longer cite - official form for tourists - end long cite, so, and a final short cite - India - end short cite, being so keen on paperwork made it impossible for me to stay.

Mark (mark)

The next day I had a bit of trouble getting out of Alwar, surprise, the lack of directions out of town was unbelievable. My route meant I had to back-track about 12km to join the road to Deeg.

Ins (ins)

The next day I had a bit of trouble getting out of Alwar, surprise, the lack of directions out of town was unbelievable. My route meant I had to back-track about 12km to join the road to Deeg.

Delete (del)

The next day I had a bit of trouble getting out of Alwar - I'm repeating myself.

Code (code)

Pre-Code (pre)(code)

<p>This is the pre tag followed by a code tag.</p>

h1 {
 color: red;
 font-size: 24px;
}

Ordered List

1. List Item 1
2. List Item 2
   1. List Item 2-I
   2. List Item 2-II
   3. List Item 2-III
3. List Item 3
4. List Item 4
5. List Item 5

Unordered List

• List Item 1
• List Item 2
• List Item 3
  • List Item 3-I
  • List Item 3-II
  • List Item 3-III
• List Item 4
• List Item 5

Definition List

Definition Title 1

Definition description

Definition description

Definition description

Definition Title 2

Definition description 2

Definition description 2

Definition Title 3

Definition description 3

Forms

Search Form

Tables

The tables are pretty much formatted and consist of two basic tables and four tables with classes. It shouldn't take much to tweak them to your liking.

Basic table

General table

Condensed table

Table (table-striped)

Table (table-bordered)

Table (table-bordered and table-striped)

Images

Images to play about with.

Paragraph after image. There were a few waders and other smaller birds, even owls and birds of prey along the banks of the few small ponds.

 <figure class="center">
 <img
  src="test-images/guruvayur.jpg"
  alt="Guruvayur Elephant Santuary"
  width="300"
  height="210"
 />
 <figcaption>Guruvayur Elephant Santuary</figcaption>
</figure>

404 Page Not Found

Change the 404 to your liking

Home | About | Scss Mixins | Classes