IBM Digital Design Snippets
Installation
Install plugin from VS Code marketplace website or directly in VS code.
Snippet list
If you come up better name for snippet shortcut, feel free to put your idea to the Issues tab ;)
Base template & grid
!ibm - base v19a html5 boilerplate
!!ibm - base v18 html5 boilerplate
!ibmb - v18 Band with 6 column grid
!ibmsgrd - v18 6-col grid
!ibmtgrd - v18 12-col grid
!ibmftgrd - v18 12-col grid with same height columns
!ibmftgrd - v18 fullwidth 12-col grid
!ibmstgrd - v18 seamless 12-col grid
!ibmfstgrd - v18 fullwidth seamless 12-col grid
!ibmbtt - back to top button JS
!ibmgrd - grid container with two 16-8 columns, 4-1 & 4-3 on mobile
!ibmsgrd - seamless grid container with two 16-8 columns, 4-1 & 4-3 on mobile
!ibmgrd2 - grid container with two 16-8 columns
!ibmgrd3 - grid container with 4-1 & 4-3 column
!ibmgrd4 - grid container with four 4-1 columns
!ibmcol - column
!ibmscol - seamless column
Links
!ibml - link
!ibmanch - anchor link
!ibmil - icon link
!ibmatchl - attachment link
!ibmel - external link
!ibmblink - block link
Link list
!ibmlnklist - link list
!ibmanchlist - anchor link list
!ibmbp - primary button
!ibmbs - secondary button
Components
!ibmbc - breadcrumb
!ibmls - leadspace
!ibmtnav - tab navigation
!ibmdtnav - dynamic tab navigation
!ibmmod - modal
!ibmc - card
!ibmpq - block quote
!ibmac - accordion show/hide
!ibmtw - twisty show/hide
!ibmyv - youtube video
!ibmkv - kaltura video
Classes
Spacing
Padding
pb - padding bottom
pb{0-12} - padding bottom {0-12}
rpb{1-3} - relative padding bottom {1-3}
pt - padding top
pt{0-12} - padding top {0-12}
rpt{1-3} - relative padding top {1-3}
Margin
mb - margin bottom
mb{0-12} - margin bottom {0-12}
rmb{1-3} - relative margin bottom {1-3}
mt - margin top
mt{0-12} - margin top {0-12}
rmt{1-3} - relative margin top {1-3}
Background Colors
br - background red
br{10-100} - background red {10-100}
bm - background magenta
bm{10-100} - background magenta {10-100}
bp - background purple
bp{10-100} - background purple {10-100}
bb - background blue
bb{10-100} - background blue {10-100}
bt - background teal
bt{10-100} - background teal {10-100}
bgr - background green
bgr{10-100} - background green {10-100}
bg - background gray
bg{10-100} - background gray {10-100}
bcg - background cool gray
bcg{10-100} - background cool gray {10-100}
bwg - background warm gray
bwg{10-100} - background warm gray {10-100}
bbc - background black core xD
bwc - background white core
bo - background orange 40 (alerts or warning messages)
by - background yellow 20 (alerts or warning messages)
bb60a - background blue 60 alpha
bbh60a - background blue 60 hover alpha
bb70a - background blue 70 alpha
Text Colors
tcd - Text color default
tcw - Text color white core
tcl - Text color link
tcb - Text color blue
tcb{30-60} - Text color blue
tcg - Text color gray
tcg{30-80} - Text color gray
tcgr - Text color green
tcgr{30-60} - Text color green
tcm - Text color magenta
tcm{20,30,50,60} - Text color magenta
tco - Text color orange
tco{30-60} - Text color orange
tcp - Text color purple
tcp{20,30,50,60} - Text color purple
tcr - Text color red
tcr{30-60} - Text color red
tct - Text color teal
tct{30-60} - Text color teal
tcy10 - Text color yellow 10
tcy30 - Text color yellow 30
Submitting improvements/bugs
- Go to Issues tab of this repo
- Click on new issue
- Describe bug/improvement
- Select proper label
bug - issue
enhancement - improvement/new feature
Uploading your fixes/improvements
- Fork this repo
- Make required changes
- Create a Pull Request
