typesetting

let's try to set every most HTML5 tags

h1 h2 h3 h4 h5 h6

Let's rethink headings

As you all know, we have six heading tags h1 h2 h3 h4 h5 h6. We understand an h1 has a higher semantic importance than an h2. But this doesn't mean that an h1 must be styled bolder or bigger than an h3. While we should use heading tags semantically, we can style these headings how ever we want. So, I'm not going to put forth a scale where each heading is incrementally bigger than the next. I'm just going to style headings to best compliment the content and context of the copy.

p

Paragraphs are the backbone of our content

Our baseline efforts seek to keep paragraph text centered in each row of our baseline grid.

blockquote cite

95%

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.
Oliver Reichenstein
ul ol li dl dd dt

Lists

Lists are typically indented. I prefer them unintented. Either way is fine. For unordered lists I like to use the lighter circle instead of the heavier disc. I consider lists to be core text. I try to keep all my list items aligned to the baseline grid.

Unordered list

  • learn html
  • learn css
  • learn js
  • learn git

Ordered list

  1. git status
  2. git add .
  3. git commit -m ":)"

Definition list

Definition List Title
This is a definition list division.
hr

Horizontal rule

I haven't used the hr in ages. I'm gonna leave it at that. Here I'm using the outline property to keep the hr from having layout that throws of the vertical rhythm.

table thead
th tr td
tbody tfoot

Tables

I haven't used a table in ages either. But here's how to do it.

rdmkit size
names sizes
rdmkit :)
cpl 1 kb
mzr 352 bytes
vrt 708 bytes
rdm 2 kb
code pre

Prismjs for code highlighting

I'm a fan of using prismjs for code highlighting. It's super customizable. You've already seen examples of this throughout the site.

// index.js
const str = `
  P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~ 
  `;
a strong em b i u del ins s sup sub small abbr q cite dfn mark var time kbd

Inline element bonanza

a There is a gang of inline tags. strong The strong tag is used to indicate strong importance. em The em tag is for added emphasis. b The b element is stylistically different text from normal text, without any special importance. i The i element is text that is offset from the normal text. u The u element is text with an unarticulated, though explicitly rendered, non-textual annotation. del This text is deleted. ins This text is inserted. s This text has a strikethrough. sup Coca-Cola® Nike©. sub Water - H2O and Sugar - C12H22O11. small This text is small for fine print, etc. abbr CPL q This text is a short inline quotation. cite This is a citation. dfn dfn element indicates a definition. mark mark element indicates a highlight. var The variable element, such as x = y. time kbd Ctrl + Shift + R

img figure

Image gallery

iframe

Embeded video

Here is a cool design nerd video called Landschaft mit haus. I used this as the inspiration for a weather app called cssweather where all the weather conditions are made from css gradients only.

canvas SVG

HTML5 Canvas and Scaleable Vector Graphics

Haha! Nothing fancy here.

select type='checkbox' type='radio' optgroup option textarea

Inputs 1

There are sooo many input types. Let's break this into three parts.

Select menus

Checkboxes
Radio buttons
Textareas
type='text' type='password' type='url' type='email' type='tel' type='search' type='number' type='color' type='range' type='date'

Inputs 2

Input fields
HTML5 inputs
    • type='submit' type='button' type='reset' type='submit'

    Inputs 3

    Action buttons

    Fin

    We have reached the end

    So, that was super easy to do. The css in RDMKIT is dead simple and only a few lines of code. Sticking to a baseline rhythm isn't difficult to do when you follow these practices. And where images, videos and other flexible elements break the baseline grid, we can use RDM to get everything back on track.

    Props to: