WS-Concepts Snippets

Set of handy code snippets used by the WS-Concepts Team

Install

Go to Atom > Preferences go to the Install tab and search for websiteconcepts-snippets

Or using apm: $ apm install websiteconcepts-snippets

Restart Atom

Snippets

HTML

Supports: HTML PHP

• a-ext Anchor with external settings
• tbuild Build Table with small emmet tr > td builder (requires emmet)
• figure-full Build Figure and Figcaption
• source-picture Source for a picture image
• picture-full Build Picture & Source for image-set
• details-full Build Details & Summary

CSS

Supports: CSS SCSS LESS

• states set all default states (active, focus, hover)
• trbl Set all position options (top, right, bottom, left)
• bg-full Set all background style options
• gradient Build gradient
• space-css add html space in css value

Supports: SCSS LESS

• each Each loop list or map
• for Each loop number
• get-list Get list value
• bg-color set bg-color and text-color with contrast (SCSS: requires contrast function)

Supports: SCSS

• error set error message
• get-map get value from map
• get-deep-map get value from a deeper map

Supports: LESS

• if Mixin/CSS Guard
• loop loop number (simple version of the for)

Unicodes

Supports: HTML PHP CSS SCSS LESS JS

• nbsp None Breaking Space
• zws Zero Width Space
• nbhy None Breaking Hyphen

Icons

Supports: HTML PHP

• icon-custom icon class for setting an custom icon
• icon-md icon class from material.io icon set
• icon-fa icon class from fontawesome.com icon set

Debug

Supports: PHP

• printr print_r()

Supports: SCSS

• log.scss @debug

Supports: JS

• console.log console.log()

Documentation

Supports: SCSS LESS JS Markdown

• doc
  • Markdown: Build base setup for documentation
  • SCSS, LESS, JS: Build documentation for functions

Supports: SCSS LESS JS

• param Add new parameter for functions

Placeholder.com

Supports: HTML PHP CSS SCSS LESS Markdown

• img-placeholder images from Placeholder.com

Brands

Supports: HTML PHP CSS SCSS LESS JS

• [brand]-icon = svg icon
• [brand]-color = hex color

Badge.io

Supports: Markdown

• badge badge.io custom badge
• badge-link badge.io custom badge with link
• badge-ws made by badge for WS-Concepts