Minimal

Your desires are so complex and contradictory — no wonder the society you create is also complex and contradictory.
— Nisargadatta Maharshi

Minimal styles and behaviours, those we tend to reuse over and over again. A starting point for many of our projects.

We use this page to demo and test the styles and attributes in the minimal project. We also keep notes and tips here that we want to remember about css and html.

Themes add color, font, and border. Pick one or none:

Mahagony Organic Google

Appearance

Appearance is implemented by adding classes to elements.

.panel

A panel has a border around a body with an optional header.

.box

Similar to a panel with a reversed color scheme. More drama. Less readable.

.list

Add the .list class along with .panel or .box to make a listbox.

Within a .narrative element, a list looks like this:

• indent
• bullet

1. indent
2. bullet

.popup

Add the .popup class along with .panel or .box to add shadow Nice for a dialog or navbar.

.narrative

Usually applied to a section. Designed for reading longer sections of text.

• Serif font.
• Maximum width of 12 centimeters.
• Border on wide screens.

.btn

Add the .btn class to a button element.

Default White Yellow Blue Green Red

A future exercise. Make an anchor look like a button.

.fixed

Add the .fixed class to the header element, and it will not scroll along with the rest of the body.

Fix Header

Behaviour

Behaviour is implemented by adding attributes to elements.

Initially Hidden

[initially] [hidden]

Our modeless dialogs each have some css style that hides it from view until it is opened.

We want screen readers to know these dialogs are initially hidden, even without the presence of the ccs files. And so we add two attributes to each dialog - initially and hidden - both of which are removed when the js file loads.

Show/Hide

We can add the show= attribute to a button to open an element, and add the hide= tag to a close button for that element.

[show=<element-id>]
[hide=<element-id>]

The operation works by adding and removing the [hidden] attribute to the element.

We have no example for this because in our implementations so far we have chosen instead to use one of two alternative behaviors:

• expand/collapse, for n detail sections, and
• open/close, for modeless dialogs.

Expand/Collapse

[expand=<element-id>]
[collapse=<element-id>]

Adding the expand= attribute to an element makes that element a toggle button that expands and collapses the element with the specified id, like this example.

The operation works by adding and removing a .closed class.

Following is an example.

Details on [collapse=]

The collapse attribute is not needed, because the [expand=] attribute creates a toggle button which does both the expand and the collapse.

Open/Close

[open=<element-id>]
[close=<element-id>]

Similar to show/hide with a transition. Designed for modeless dialogs.

We define the dialog html with the [hidden] attribute but that is just for the initial display. On startup we remove the [hidden] attribute and replace it with the .closed class. The .closed class must be styled in a way that hides the dialog, like for example with visibility=hidden or left:-200px.

LeftNav example. Using class .leftnav. Left-Nav Modeless

Dropdown example. Using class .dropdown. Dropdown Modeless

Modal Dialog

We define a single modal dialog container. Multiple dialog forms are defined in a hidden section of HTML. On openModal(), a specified form is moved into the container with appendChild(), and then the container is shown by removing its [hidden] attribute.

Example: Centered Modal

Drag and Drop

Add the drag attribute to any element to make it draggable. Add the drop attribute to any element to make it a drop target.

[drag]
[drop]

Add the draglist attribute to a ul element to make every item in the list draggable. Add the droplist attribute to a ul element to insert a drop target between each item in the list, thereby making it reorderable.

[draglist]
[droplist]

Selectable

click on a list item

Toggle Buttons

Add the toggle attribute to a button element to make it a two-state button. Use the optional name value to identify a group of buttons.

toggle=<name>

Stop Go

Pause

Topics

Files

• minimal.js - behaviours
• minimal.css - style classes
• theme/*.css - additional font, color, border styles
• minimal.html - demo/test
• normalize.css - another project on github
• normaleyes.css - slightly modified version of normalize

Horizontal Space

There are at least two ways to create left and right margins. One way is to put padding on the body or container. Then you need neither padding or margin on the child hn and p elements within, and you can underline or overline a hn with a border.

We have chosen instead to leave the container with margin and padding 0, and we put padding on the children. This allows us to stretch a heading all the way across its container, like for the title of a panel, and the header of the body.

Vertical Space

We use top and bottom margins to take advantage of the "collapsing" behavior.

margin collapsing: Between two adjacent vertical block-level elements, only the largest of the two margins is honored. The smaller is collapsed to zero.

Nested divs

Five years ago it was necessary to use layer upon layer of nested divs to create a desired effect. This is no longer necessary. Now, with care, it is possible to create elegant and readable html. Nothing missing, nothing extra.

Semantic Tags and Custom Tags

HTML5 has added a dozen new versions of the div tag. These "semantic" tags do nothing except give names to things.

And if that's not enough, we now have the ability to make up our own "custom" tags which again add nothing except a name.

Should we use these tags? For now, we have decided to use the semantic tags, but we do not create our own custom tags. Depending on how the future unfolds, search engines and other screen readers may use these semantic tags consistently, so some of them may become useful.

Reminders

inheritance: from parent element to child element

• some styles are inherited by default
• other styles require the "inherit" value

cascade: rules for order of precedence when multiple styles apply to one element

• later declaration overwrites earlier declaration, c1{} c2{}
• later assignment overwrites earlier assignment, class='c1 c2'
• importance: normal vs importance
• origin: author, user, user-agent
• specificity: number of selectors

Alternatives

Attribute vs Class

CSS selectors now allow us to apply styles based on tagname, attribute, or classname. Both classnames and attributes can be added and removed from an element, so either can be used to dynamically change CSS styling of an element. So which do we use?

As a general rule, we use a classname for appearance, and an attribute for behavior.

hidden attribute

Elements are best hidden with the style display:block, because this removes all margins and padding completely from the HTML.

For awhile we used a .hidden classname defined as display:block.

Now, though, we use the [hidden] attribute instead. This attribute was introduced wth HTML5 and is not yet fully supported [Sep 2015]. Normalize.css defines it as display:block.

template tag

The template tag is a semantic way to hide content. Introduced with HTML5 and not yet fully supported [Aug 2015].

In some cases we are using this tag, but we add the hidden tag to it.

summary/details tags

HTML5 specifies the <details> and <summary> tags, such that clicking on the <summary> tag toggles the display of the <details> content like this:

As of now [Aug 2015], the <details> and <summary> tags are supported only by Chrome and Android, so we are not using them. Instead we have implemented a similar behaviour with the expand=<element-id> attribute. Add this attribute to any element to make it a clickable toggle of the element specified as the attribute value. Another syntax difference is that the expander element must be outside the collapsible element.

drag and drop

The HTML5 specification for drag and drop is not yet fully supported [Aug 2015]. And so for now we use our own implementation.

menu/menuitem

type=list,context or type=popup,toolbar.

The menu and menuitem tags are not yet fully speced or supported. [Aug 2015]. And so we are not yet using them.

datalist

auto-complete, similar to select, used with input tags

not recommended: http://stackoverflow.com/questions/6865943/html-form-select-option-vs-datalist-option

We are not yet using this tag [Aug 2015].

pseudo classes

a - link states, pseudo-classes

• a:link
• a:visited
• a:hover
• a:active

Yeah? What about 'em?

Font

The browser makes use of three default fonts, and we copy this scheme.

• sans-serif - The default.
• serif - Used within an element with .narrative class.
• monospace - Used by the developer tags: pre, code, var, samp

Sans-Serif Fonts

Serif Fonts

Monospace Fonts

Inline Formatting Tags

Here are examples of dfn and of mark and of em and of strong and of b and of code and of kbd and of samp and of var.

Compare serif vs sans

In Chrome and Firefox, the x-height of the sans-serif font is larger than that of the serif. In IE, the sans-serif font is more bold. In Android, both size and weight are the same.

12345678901234567890
abcdefghijabcdefghij
ABCDEFGHIJABCDEFGHIJ

see "Web Safe Font Combinations" at W3 Schools

Color

We use six colors (b&w + rgb + yellow):

• black
• white
• red
• green
• blue
• yellow

Each theme uses a unique set of hues of these six colors.

Mahagony Organic Google

see "Color Groups" at W3Schools

Great Thoughts

Information Architecture

As soon as the user arrives at our website, we grab him by the throat and hit him as hard as we can in the solar plexus. Now that we have his attention, quickly, before the police arrive, we lean into his ear and tell him precisely what we want him to do. Direct, honest, concise.

Elegance

Nothing missing, nothing extra.

• Less is more.
• Smaller is better
• No libraries
• No giant images
• Mobile first
• Responsive design
• Form follows function

Usability Research

Forget it. Too expensive. Just copy the big guys. They have already spent the money on the usability research, so we don't have to.

Language of the Internet

Speak to the user in his own language. If we use the same conventions as the big guys, the user already knows how to use our site.

Readable HTML

Both by humans and machine.

No unnecessary nested divs.

View source and read the html here to see how to use these classes and attributes.

Artisan HTML

• Readable. By both human and machine.
• No unnecessary nested divs.
• Nothing missing. Nothing extra.
• No libraries.