Amazium Examples


This page is just an example to get you started in building your own awesome responsive website..!

960 1200 Grid


1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Offsetting columns


4
4 with 4 spacing
3
3 with 3 spacing
8 with 4 spacing

Typography & Bullets


This paragraph is using a class called .intro which makes the font-size & line-height 130% and is perfect introduction text that doesn't need to be a H1.

This is a Button..!

<strong> This text is rendered as bold.

<em> This text is rendered as italicized.

<small> This text is rendered for fine print.

<sup> This text is rendered as Superscript

<sub> This text is rendered as Subscript

.highlight This text is Highlighted


Normal Bullets (Custom Image)

For standard <ul> bullet ponts ive replace the normal dot with a graphic which can be changes easily

<ul>
<li>Your text here</li>
</ul>

Ordered Bullets

  1. Cras mattis consectetur purus sit amet fermentum.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Aenean eu leo quam.
    2. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    3. Nullam quis risus eget urna mollis ornare vel eu leo.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.

As with <ul> the ordered lists <ol> have had some extra CSS added to them so they are that little bit nicer to look at.

<ol>
<li>Your text here</li>
</ol>

Round Bullets

For circular bullet point all you need to do is add the class .circle to the <ul>

<ul class="circle">
<li>Your text here</li>
</ul>

Square Bullets

For square bullet point all you need to do is add the class .square to the <ul>

<ul class="square">
<li>Your text here</li>
</ul>

Forms & Tables

Form

Yes No
One Two

Table

Title
Item: Category: Description: Size:
Bananas Fruit Desc 1KG
Apples Fruit Desc 3KG
Oranges Fruit Desc 2.5KG
Mango Fruit Desc 6KG

In Amazium I've included some styling for table elements like Table Headings (TH) and the option to have odd and even table rows as well as the ability to highlight a cell in your table..!