think development notes, scaffolding, sample project

A reference collection of my frontend styling experience. No rocket science, but useful to keep a reference in one place with all those learning on the go :) Easier than hiding the stuff in “development notes” in some way.

What to bring in first, what last and how to modularize the entire thing in a meaningful order (not just random globbing), see master.styl

• a good set of common (tag-level) styling
• how obstrusive/decent to work with single-purpose ‘atomic classes’
• distinguishing (more common) layout helpers from section-specific styling
• a unified styling approach to buttons and button-looking tags
• basics of form design TODO
• breakpoints and responsive principles

• efficient normal and retina resolution sprites
• efficient use of a few print view styling classes

• a reference .gitignore and .editorconfig
• a good „cheat sheet“ gulpfile scenario
  • live reload, source maps, minification
  • and all of that in the right order and with the right dependency rigging

Well... mostly this is about looking up stuff, but anyway, to run:

gulp scss — to build scss (aka sass) styles

gulp stylus — to build stylus styles

use switch --type production to get minified styles (under same name). stylesheet <link> in index.html still needs manual adjustment.

npm start — automatically runs server.js (since no npm script target defined), opening on port 3000 (or respective env.PORT override)

gulp watch-stylus – does just that. I use the Chrome LiveReload plugin for automatic refresh. (doesn't inject extra code into the page like browsersync did, rather listens on another (high) port and gets notified on changes there)

• div-ish reset for html5 tags (aside, main, figure, figcaption, ...)
• Have typical breadcrumb (wrapped, and plain ul-li)
• Reference Photoshop Action for saving x3, x2, x1
• form styling
  • fancy radios and checkboxes
• updates sass corresponding stuff

• explicit, submittable html version (excempt from gitignore)
• finish dev vs. production output (--type production resp. [cross-]env)
• further minification matters
• revisit watch

With the exceptions listed directly below, the contents of this project are released under the (very permissive) terms of the MIT license. The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with the Project.

• This project uses the Ubuntu Font Family (see licence file).