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