Introduction

Content CSS provides a simple set of CSS rules intended for developing web sites that have the following properties:

  1. A fixed or floating header that spans the width of a window, and also acts as primary navigation
  2. A footer that is located at the bottom of the screen or is pushed down by content
  3. A main central area that contains an optional aside element (intended for navigation) and an article element for content.

The intention is to provide a foundational set of CSS rules for web sites that are easily overridden by application specific rules. Please note, it is not intended that Web App CSS will provide CSS roles for content elements such as forms or tables, however, this will be provided as separate files.

The rest of the document will first describe the expected HTML structure, then will describe each of the CSS rules.

Note, these CSS rules are designed to be used in conjunction with the rules at WebAppCSS.com. Content pages would include this file, while app screens would include webappcss.css.

Open in new tab

HTML Top-level Structure

The high-level HTML structue is fairly standard - the HEADER, FOOTER, and MAIN elements are placed within the BODY element - except that the HEADER element is placed after the MAIN element and after the FOOTER element. This ensures that the HEADER element is rendered above the MAIN element without explicitly having to specify a z-index height value. 

<html>
    ...
    <body>
        <main>
            <aside />
            <article />
        </main>
        <footer />
        <header />
        <dialog />
    </body>
</html>

CSS Reset

Only top level elements are reset by having their outline, margin, border, and padding set to zero. 

BODY,
BODY > MAIN,
BODY > HEADER,
BODY > FOOTER,
BODY > MENU,
BODY > DIALOG,
BODY > DIALOG > HEADER,
BODY > DIALOG > FORM,
BODY > DIALOG > FOOTER
{
    outline:                 0;
    margin:                  0;
    border:                  0;
    padding:                 0;
}

The Body Element

In order to ensure that the footer is always either rendered at the bottom of the screen or pushed down with content, the HTML and BODY elements are given a minimum height of '100vh'; and the BODY element is given a position of relative.

To prevent content resizing when a scroll bar appears due to the window being shortened, overflow-y is set to scroll. 

HTML
{
    min-height:                  100vh;
    scroll-padding-top:          4.0rem;
}

BODY
{
    min-height:                  100vh;
    position:                    relative;
    line-height:                 1.6;

    overflow-y:                  scroll;
}

BODY *
{
    font-family:                 sans-serif;
}

BODY PRE
{
    font-family:                 monospace;
}

Forms

Open in new tab

Generally, a form may be a descendant of either a MAIN or DIALOG element. Because of this special care must be taken when styling forms to ensure they can exist in either context.

Form Structure

<form>
    <div class='fieldset'>
        <label />
        <label />
    </div>
    <div class='buttons'>
        <button />
    </div>
</form>

Fieldsets

While there is a HTML FIELDSET element that is intended to be used to group form inputs, unfortunately, the styling of such elements is not cross-browser consistent. 

FORM DIV.fieldset
{
    padding:                 20px 10px 20px 10px;
    display:                 flex;
    flex-wrap:               wrap;
}

FORM LABEL
{
    display:                 block;
    box-sizing:              border-box;
    width:                   100%;
    padding:                 0 10px;
}

FORM LABEL.half_width
{
    width:                   50%;
}

FORM LABEL.third_width
{
    width:                   33.3333333333%;
}

FORM LABEL.quarter_width,
FORM LABEL.fourth_width
{
    width:                   25%;
}

FORM LABEL.fifth_width
{
    width:                   20%;
}

FORM LABEL.sixth_width
{
    width:                   16.666666666%;
}

FORM LABEL EM
{
    display:                 block;
    padding-bottom:          5px;
}

FORM LABEL INPUT
{
    width:                   100%;
}

FORM INPUT
{
    box-sizing:              border-box;
    height:                  40px;
    line-height:             20px;
    padding:                 10px 20px;
    font-size:               14px;
    border:                  solid 1px #aaa;
    outline:                 0;
}

FORM DIV.buttons
{
    box-sizing:              border-box;
    padding:                 20px 20px 20px 20px;
    position:                relative;
}

FORM BUTTON
{
    width:                   100%;
    height:                  40px;
    background:              DarkGray;
    color:                   white;
    font-size:               17px;
    cursor:                  pointer;
    outline:                 0;
    padding:                 0;
    border:                  0;
}