Set of handy code snippets used by the WS-Concepts Team
Go to Atom > Preferences
go to the Install tab and search for websiteconcepts-snippets
Or using apm: $ apm install websiteconcepts-snippets
Restart Atom
Supports: HTML
PHP
a-ext
Anchor with external settingstbuild
Build Table with small emmet tr > td builder (requires emmet)figure-full
Build Figure and Figcaptionsource-picture
Source for a picture imagepicture-full
Build Picture & Source for image-setdetails-full
Build Details & SummarySupports: 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 optionsgradient
Build gradientspace-css
add html space in css valueSupports: SCSS
LESS
each
Each loop list or mapfor
Each loop numberget-list
Get list valuebg-color
set bg-color and text-color with contrast
(SCSS: requires contrast function)Supports: SCSS
error
set error messageget-map
get value from mapget-deep-map
get value from a deeper mapSupports: LESS
if
Mixin/CSS Guardloop
loop number (simple version of the for
)Supports: HTML
PHP
CSS
SCSS
LESS
JS
nbsp
None Breaking Spacezws
Zero Width Spacenbhy
None Breaking HyphenSupports: HTML
PHP
icon-custom
icon class for setting an custom iconicon-md
icon class from material.io icon seticon-fa
icon class from fontawesome.com icon setSupports: PHP
printr
print_r()Supports: SCSS
log.scss
@debugSupports: JS
console.log
console.log()Supports: SCSS
LESS
JS
Markdown
doc
Supports: SCSS
LESS
JS
param
Add new parameter for functionsSupports: HTML
PHP
CSS
SCSS
LESS
Markdown
img-placeholder
images from Placeholder.comSupports: HTML
PHP
CSS
SCSS
LESS
JS
[brand]-icon
= svg icon[brand]-color
= hex colorBrands | Icon | Color |
---|---|---|
✓ | ✕ | |
rss | ✓ | ✓ |
github | ✓ | ✓ |
googleplus | ✓ | ✓ |
youtube | ✓ | ✓ |
✓ | ✓ | |
✓ | ✓ | |
✓ | ✓ | |
✓ | ✓ | |
✓ | ✓ |
Supports: Markdown
badge
badge.io custom badgebadge-link
badge.io custom badge with linkbadge-ws
made by badge for WS-ConceptsGood catch. Let us know what about this package looks wrong to you, and we'll investigate right away.