Skip to content

Instantly share code, notes, and snippets.

@bignimbus
Last active January 30, 2019 17:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bignimbus/907a22f478e993f76b611a5875bfcc11 to your computer and use it in GitHub Desktop.
Save bignimbus/907a22f478e993f76b611a5875bfcc11 to your computer and use it in GitHub Desktop.
Draft of HTML-CSS UI building workflow

Commit 1: enter all the content and order of how it will appear on the smallest supported screen. No structure, just literally only text and media nodes

Commit 2: enclose content in semantic tags. No layout considerations, just semantics. Headings get the appropriate <h#> tags, copy gets <p> tags, anchors get <a> tags, buttons get <button> tags, etc.

Commit 3: create an HTML layout out of block elements. <header>, <section>, <footer>, <nav>, <ul>, <ol>, etc. Sibling elements must have the same display value, otherwise nest them. E.g. a <span> can't be the sibling of a <div>. We still haven't written any CSS.

Commit 4: style all "inline" content, which encompasses elements with display: inline by default (e.g. text nodes, anchors, and spans). Styles should include resets, text colors, font sizes, line heights, font weights, etc. No margins, no padding, no heights, no widths (unless they are part of a CSS reset). No media queries, just get those inline elements styled for the smallest supported screen size

Commit 5: style all "inline-block-like" elements, which encompasses elements with display: inline-block by default, e.g. inputs, buttons, selects, images, media tags, etc. These elements get values like background-color, text color, border-radius, resets, pseudoelement styles, etc. Ideally they are not given special width and height values. Instead, they should fill up their container element, which will be styled in the next commit. Note: in the final product, display: inline-block should be used sparingly, if at all. If you have an item with a defined height and width, its alignment can be controlled with more precision with other paradigms such as display: flex

Commit 6: style all "block-like" content, which encompasses elements with display: block, flex, grid, table, etc. These elements get values for margin, padding, width, height, max-width, etc. No media queries yet. The HTML + CSS should be substantially finished for the smallest screen at this point

Commit 7: implement media queries as specified in the specs. Start with the smaller breakpoints and make your way up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment