Introduction

Snap CSS provides a simple set of CSS rules to produce an aesthetically pleasing website that has the following properties:

  1. A fixed header that spans the width of a window, and also acts as primary navigation
  2. Secondary and tertiary navigation bars, which may each contain breadcrumbs bars
  3. A semi-responsive content area that may contain either an article, or an article and aside
  4. A footer that is located at either the bottom of the screen, or is pushed to the bottom of the page
  5. Styles for tables and forms

The intention is to provide a set of simple CSS rules, along with a standardised system for structuring HTML, that may be applied to multiple websites, but which may be easilty customised by changing colours, fonts, and icons.

This website has been developed using Snap CSS, so you may also simply view the source to better understand how the CSS is applied. 

...
<body>
    <main>
        <header>
            <h2>Page title</h2>
        </header>
        <article>
            <section>
                <h3>Section title</h3>
            </section>
            <section>
                <h3>Section title</h3>
            </section>
        </article>
        <footer>
            <span>This is the footer of the main</span>
        </footer>
    </main>
    <footer>
        <span>This is the page footer</span>
    </footer>
    <nav>
        <nav class='breadcrumbs'>
            <a href='/'>Home</a>
            <a href='/html_structure/'>HTML Structure</a>
            <a href='/html_structure/nav/'>Nav</a>
        </nav>
        <nav>
            <a href='/html_structure/header/'>Header</a>
            <a href='/html_structure/nav/'>Nav</a>
        </nav>
    </nav>
    <header>
        <nav>
            <a href='/'>Website</a>
        </nav>
    </header>
    <dialog>

    </dialog>
</body>
...

Next