Minimal

Minimal

Minimal website 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:

Required submodules:

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

Appearance (classes)

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 remove the bullet from the list items.

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

  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.

.btn

Add the .btn class to a button element.

Or, add the .button class to an anchor.

White Yellow Blue Green Red

.anchor

Add the .anchor class to a button element. In normal usage, we use the anchor to go to another page, and a button to execute some operation on this page. But sometimes we seem to want the button to look like an anchor.

.fixed

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

Behaviour (attributes)

Behaviour is implemented by adding attributes to elements.

Initially Hidden

[initially hidden]

We use the The HTML "hidden" attribute when we want to make sure an element is not visible during startup, while waiting for the stylesheet to load.

When we combine it with the "initially" attribute, both attributes are removed immediately after successful startup.

We use this on our modeless dialogs. Our modeless dialogs each have some css style that hides it from view until it is opened. By adding "initially hidden" we let screen readers know these dialogs are initially hidden, even without the presence of the ccs files. And we also avoid the flashing effect that can occur if the element is visible while waiting for the stylesheet to load.

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.

Demo 1. Show and Hide an Element

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=]

Open/Close

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

Open and close a dialog box. By default, the dialog is opened as modeless. Add the [modal] attribute to make it modal.

LeftNav example. Using class .leftnav.

Dropdown example. Using class .dropdown.

Modal example:

How a modeless dialog works. The dialog is assigned a class that hides the dialog, like for example with visibility=hidden or left:-200px. When opened, the "open" class is added that brings the dialog into view, perhaps with a transition. Note also, the dialog is defined with "initially hidden" attributes (see above.)

How a modal dialog works. We define a single modal dialog container. Multiple dialog forms are defined in a hidden section of HTML. On open, the specified form is moved into the container with appendChild(), and then the container is made visible.

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]

Drag Me!
Drop him here!
Demo 2. Drag red object onto yellow object.

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]

droplist

  • b
  • strong
  • em
  • dfn
  • i
  • mark
  • small
  • sub
  • sup

draglist

  • pre
  • code
  • samp
  • kbd
  • var
Demo 2. Drag line items between list boxes.

Selectable

Click on a list item to select it. Click on the header to select the entire list.

[select]
[selected]

Gutteral Consonants

कमलka-ma-lalotus
खग kha-ga bird
गगनga-ga-nasky
घटः gha-ṭah jar
Demo 3. Select individual rows or entire table.

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>

Topics

Files

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

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

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:none, because this removes all margins and padding completely from the HTML.

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

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:none.

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] attribute 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:

Example Summary/Details

Details

Put details here.

Outline
1
1.1
1.2
1.3
2

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

Reminder: a - link states, pseudo-classes.

Font

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

Sans-Serif Fonts

sans-serif 1234567890abcdefghijklmNOPQRSTUVWXYZ
Arial 1234567890abcdefghijklmNOPQRSTUVWXYZ
Helvetica 1234567890abcdefghijklmNOPQRSTUVWXYZ
Segoe UI 1234567890abcdefghijklmNOPQRSTUVWXYZ
calibri 1234567890abcdefghijklmNOPQRSTUVWXYZ
Arial Black 1234567890abcdefghijklmNOPQRSTUVWXYZ
Comic Sans MS 1234567890abcdefghijklmNOPQRSTUVWXYZ
cursive 1234567890abcdefghijklmNOPQRSTUVWXYZ
Impact 1234567890abcdefghijklmNOPQRSTUVWXYZ
Lucida Sans Unicode1234567890abcdefghijklmNOPQRSTUVWXYZ
Tahoma 1234567890abcdefghijklmNOPQRSTUVWXYZ
Trebuchet MS 1234567890abcdefghijklmNOPQRSTUVWXYZ
Verdana 1234567890abcdefghijklmNOPQRSTUVWXYZ

Serif Fonts

serif 1234567890abcdefghijklmNOPQRSTUVWXYZ
Times New Roman 1234567890abcdefghijklmNOPQRSTUVWXYZ
Georgia 1234567890abcdefghijklmNOPQRSTUVWXYZ
Lora 1234567890abcdefghijklmNOPQRSTUVWXYZ

Monospace Fonts

monospace 1234567890abcdefghijklmNOPQRSTUVWXYZ
Courier New 1234567890abcdefghijklmNOPQRSTUVWXYZ
Courier 1234567890abcdefghijklmNOPQRSTUVWXYZ
Lucida Console1234567890abcdefghijklmNOPQRSTUVWXYZ
Monaco 1234567890abcdefghijklmNOPQRSTUVWXYZ

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):

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

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.

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

Here endeth the narrative section.


From here on we use the whole screen width and the default font.

aside Yellow

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore

aside Blue

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore

Inline Tags

Developer Tags

HTML5 Tags