Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Google+ Instagram Youtube

Github Stackoverflow Pinterest

How to make it clean, pretty, easy, fun

Gitter

Overview

Here are tools and rules I try to use for styling websites.

### Colors:

  1. What is too many colors? http://styletil.es

Libraries

  • GetBootstrap.com

  • font-awesome SVG icons

  • Google Accelerated Mobile Pages

  • Algolia search

  • EmailOctopus (based in London, England) provides analytics, bounce/complaint tracking, and email campaigns for contacts sent to it via an API. It is low cost because it stored emails in AWS cloud, under your account.

    • This video explains the product

    • This CodePen by Saijo George provides HTML and CSS for a simple form to send subscription info to EmailOcotopus.

    • A Wordpress plug-in is available.

  • Prism.js and prism.css (2KB minified) is a syntax highlighter. In the examples page, click the various styles at the right of the page to see changes reflected.

  • Google Analytics

CSS wisdom

tshirt you are the css to my html 300x250-15kb

Many developers have declared “enough” and have switched to HTML5-only websites as less and less enterprises have given up on demanding their users only use Microsoft-only browers.

In HTML:

  • Use HTML5 tags instead of <div :

  • <main so screen readers know where to look for content

  • <section to separate topics within a page

  • Within <header & <footer, use <div to separate sub-sections

In CSS:

  • Use a pre-processor which substitute actual CSS for variables you define:

    • Less on NodeJs to use .less files which extend CSS syntax (used by Bootstrap)
    • SASS on Ruby to use .scss which extends CSS or .sass using indented syntax
    • Stylus on NodeJs to use .styl files containing either syntax
    • PostCSS for JavaScript processing

  • Use cleaner indented syntax:

    • .styl for stylus files (rather than .styl)
    • .sass for Sass files ()

  • sassmeister.com displays expanded CSS from SASS.

  • Use CSS IDs (#tag) for navigation JavaScript (they’re faster)
  • Use CSS classes (.tag) for styling
  • Code CSS or SCSS in several files:

    • _base.css
    • _typography.css
    • _layout.css

  • Name files with leading underline when they are combined into a main.css file.

  • Use HTML5 Data-* attributes to supply additional information

  • Normalize “user agent stylesheet” of each browser (inconsistent) by adding styles in a stylesheet rather than starting out with a CSS Reset that creates an un-styled baseline

  • Harry Roberts at CSSWizardry recommends putting “hack-y” questionable CSS in a separate file named “shame.css” For example, styles specific to a browser, such as ie9, put in a separate file:

    File: ie-9.css
    .ie9 a { padding: 20px; }
     
    File: ie-10.css
    .ie10 a { margin: 2px; }
    .ie10 p { line-height: 1; }
     
  • Use view port percentage lengths (1 vh = 1% of height, 1 vw = 1% of width, vmin, vmax)

  • Cache selectors for re-use:

    var modal = document.getElementById('modal');
    modal.onclick = function(){
     // do something.
    }
    // jQuery:
    var modal = $("#modal");
    modal.fadeIn();
    modal.fadeOut();
     



Specific CSS

  • Use “last” ascender to lists to add extra space after the last item in a list.

  • Mixins

  • Use JSBin.com to experiment with CSS and JavaScript rendering online.

Automation tasks

Here are automation tricks:

  • CSS Specificity calculator based on this W3 standard

  • Identify CSS tags not referenced in HTML

  • Mimify CSS files for publishing to sites so there is no penalty for adding comments

  • For websites not using HTTP2, combine several CSS into one file

  • Pre-Compress images in basic sizes (HD display, tablet, mobile, etc.) to save download time.

Automation Tools

The workflow is automated by task runners:

CSS Naming conventions

These prevent errors:

  • Use hyphens to separate words in a sentence
  • Use underlines to separate compound words

  • Use functional names such as “submit-button”
  • Avoid names such as “red-button” what it looks like

JavaScript

  • Separate scripts in modals.js and themes.js
  • Combine all minified files together in one global.js for production publication

  • Use CDN but have fall-back local copy

References

These are from:

More on front-end software development

This is one of several topics:

  1. Text Editors
  2. Markdown text for GitHub from HTML
  3. 508 Accessibility

  4. JAM Stack Website Project Plan
  5. HTTP/2 Transition Project Plan
  6. Static websites
  7. Jekyll Site Development

  8. Website styles
  9. Website Styling
  10. VueJs front-end framework

  11. Email from website
  12. Search within Hyde format Jekyll websites
  13. Windows Tile Pin Picture to Website Feed

  14. Data Visualization using Tableau