Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

How to make it clean, pretty, easy, fun

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

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. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau