H1 Basic Content Template (only 1 h1 per page please)

Welcome to my development templates, when I build a site I create these pages for two main reasons:

• Testing - Newly designed modular elements should be built and fully tested against existing elements on these development pages to avoid conflict on the live site.
• Building - To facilitate copy-and-paste page building without needing expertise in front-end development.

Golden rules of styling elements

The CSS uses a modular 'framework' type approach and 95% of styles have already been built and should be found on these pages.

• Modularity and the Cascade: spacing and sizing of HTML elements should be generic and dictated by the relationship with the containing parent element set via a descendant selector and;
• Visual design: a default look may be assigned to an HTML element, several additional modular styles may be set via a separate class, any further non-modular tuning to an element should be done via a page/section/template specific stylesheet.
• Bottom margins: As a rule margins and spacing are applied to the bottom of elements, this allows the top edge of elements to align consistently.

Content Layout

We have several classes that combine to affect layout, dimensions and presentation.

Layout classes

These classes define how the boxes behave in the layout, floating etc.

Dimension classes

These classes apply width to layout divs and are also used to apply dimensions to the contained content elements, so for example narrower columns have less spacing for P tags etc.

Presentation classes

These classes define colours and background, something added ideally with brand-specific CSS so we have only put several examples here so as not to clutter the template.

Icons

Popup link – Indicates that a window will pop
stuart@s2digital.co.uk – An email link
07000 000000 – A phone number
www.google.co.uk – A link leading to an external site
Edit – A link that edits an item
Speech bubble – with an img.

Heading 2

You will see an image floated to the right. This has a class of "Floater". It can applied to most elements and these styled elements can be stacked. Links in paragraphs are underlined

Below you will see the Call To Action module in action! This is a div that holds anchor tags, these can be buttons or styled links. the default alignment is right, as this is the best place for CTA's but a class of "fLeft" attached to the anchor aligns the button left - make sure you have the elements in the correct order for this effect however!

• Testing a 'cta' div nested in a list:

  More on *fill in* Buy *fill in*

'inset' class

List Types

Definition List

Standard DL

Standard Definition List Title

This is a definition list division. You must put the definition description in a nested p tag like this one to maintain the coloured background.

Standard Definition List Title

This is a definition list division with a background colour.

Standard Definition List Title

This is a definition list division with a background colour.

Ordered List

1. List Item 1
2. List Item 2
3. List Item 3

Unordered List

• List Item 1
• List Item 2
• List Item 3

• 'LinkList' 'Flush' Item 1
• List Item 2
• List Item 3

• Feature list
• this list a default image bulleted list
• it has a 'Flush' class which removes any padding or margin on the UL element

1. add content to a list to make it more detailed

   At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,

2. add content to a list to make it more detailed

   At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,

3. add content to a list to make it more detailed

   At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,

• Add an id of dropList to a linkList and place the title in a h3 tag...

  ...and you get an expandable list. Place a div (with properly markup html in it) after the h3. The first item is always loaded open

• List Item 1

  Place a div (with properly markup html in it) after the h3 in a dropList and you will get a drop down function

• List Item 2

  Place a div (with properly markup html in it) after the h3 in a dropList and you will get a drop down function

Buttons

Tables

Table cells are aligned right by default, because our design standard is that numeric data is aligned right and the majority of table data is numeric. The borders are default also. Striping is applied via a 'Stripe' class applied to the table which uses javascript to applies an 'Odd' class to alternating rows.

Table Header 1	Table Header 2	Table Header 3
row header 'bodyTH'	default numeric row cell aligns right	text row cell 'tableText'
row header row style 'Odd'	default numeric row cell aligns right	text row cell 'tableText'
row header	default numeric row cell aligns right	text row cell 'tableText'

Table Header Capped no border left	Table Header 2	Table Header 3
row header 'bodyTH'	default numeric row cell aligns right	text row cell 'tableText'
row header row style 'Odd'	default numeric row cell aligns right	text row cell 'tableText'
row header	default numeric row cell aligns right	text row cell 'tableText'

Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. 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. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Another 'Mid' section

Say we want another block of main column content with related content aligned to the right, we create another 'Mid' section for this purpose.