Skip to content

Instantly share code, notes, and snippets.

@rob-kistner

rob-kistner/bs4-alerts-html.code-snippets

Last active October 28, 2020 15:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rob-kistner/7377499a8a7a22b338a183df9b1b1416 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rob-kistner/7377499a8a7a22b338a183df9b1b1416 to your computer and use it in GitHub Desktop.
Download ZIP
Visual Studio Code Snippets
Raw
bs4-alerts-html.code-snippets
/* ----------------------------------------
Bootstrap 4
HTML, PHP, BLADE snippets
Alerts
042419
---------------------------------------- */
{
"Boostrap 4: Alert": {
"prefix": "bs4-alert",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|}\" role=\"alert\">",
" ${2:Alert text}",
"</div>"
],
"description": "Bootstrap 4: Alert"
},
"Boostrap 4: Alert - Link": {
"prefix": "bs4-alert-link",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|}\" role=\"alert\">",
" <a class=\"alert-link\" href=\"${3:#}\">$2</a>",
"</div>"
],
"description": "Bootstrap 4: Alert - Link"
},
"Boostrap 4: Alert - Closeable": {
"prefix": "bs4-alert-closeable",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\">",
" <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">",
" <span aria-hidden=\"true\">&times;</span>",
" $1",
" </button>",
"</div>"
],
"description": "Bootstrap 4: Alert - Closeable"
},
"Boostrap 4: Alert - Dismissable": {
"prefix": "bs4-alert-dismissable",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"alert alert-${1|primary,secondary,success,info,warning,danger,light,dark|} alert-dismissible fade show\" role=\"alert\">",
" <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">",
" <span aria-hidden=\"true\">&times;</span>",
" <span class=\"sr-only\">Close</span>",
" ${2:Alert text}",
" </button>",
"</div>"
],
"description": "Bootstrap 4: Alert - Dismissable"
}
}
Raw
bs4-badges-html.code-snippets
/* ----------------------------------------
Bootstrap 4
HTML, PHP, BLADE snippets
Badges
042419
---------------------------------------- */
{
"Boostrap 4: Badge": {
"prefix": "bs4-badge",
"scope": "html,php,blade,vue",
"body": [
"<span class=\"badge badge-${1|primary,secondary,success,danger,warning,info,light,dark|}\">$2</span>$0",
],
"description": "Bootstrap 4: Badge"
},
"Boostrap 4: Badge - Pill": {
"prefix": "bs4-badge-pill",
"scope": "html,php,blade,vue",
"body": [
"<span class=\"badge badge-pill badge-${1|primary,secondary,success,danger,warning,info,light,dark|}\">$2</span>$0",
],
"description": "Bootstrap 4: Badge - Pill"
},
}
Raw
bs4-bgroups-html.code-snippets
/* ----------------------------------------
Bootstrap 4
HTML, PHP, BLADE snippets
Button Groups
042419
---------------------------------------- */
{
"Boostrap 4: Button Group": {
"prefix": "bs4-bgroup",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"btn-group\" role=\"group\" aria-label=\"$1\">",
" <a href=\"{4:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$3</button>",
" </a>",
" <a href=\"{6:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$5</button>",
" </a>",
" <a href=\"{8:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$7</button>",
" </a>",
"</div>$0"
],
"description": "Bootstrap 4: Button Group"
},
"Boostrap 4: Button Group - Size": {
"prefix": "bs4-bgroup-size",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"btn-group btn-group-${1|sm,md,lg|}\" role=\"group\" aria-label=\"$1\">",
" <a href=\"{4:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$3</button>",
" </a>",
" <a href=\"{6:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$5</button>",
" </a>",
" <a href=\"{8:#}\">",
" <button type=\"button\" class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark,link|}\">$7</button>",
" </a>",
"</div>$0"
],
"description": "Bootstrap 4: Button Group - Size"
},
"Boostrap 4: Button Group - Dropdown": {
"prefix": "bs4-bgroup-dropdown",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"btn-group\" role=\"group\" aria-label=\"\">",
" <a href=\"{3:#}\">",
" <button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark,link|}\">$2</button>",
" </a>",
" <a href=\"{5:#}\">",
" <button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark,link|}\">$4</button>",
" </a>",
" <a class=\"btn-group\" role=\"group\">",
" <button type=\"button\" id=\"${7:dropdownId}\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark,link|} dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">$6</button>",
" <div class=\"dropdown-menu\" aria-labelledby=\"${7:dropdownId}\">",
" <a class=\"dropdown-item\" href=\"${9:#}\">$8</a>",
" <a class=\"dropdown-item\" href=\"${11:#}\">$10</a>",
" </div>",
" </a>",
"</div>",
],
"description": "Bootstrap 4: Button Group - Dropdown"
}
}
Raw
bs4-breadcrumbs-html.code-snippets
{
/* ----------------------------------------
Bootstrap 4 HTML, PUG, BLADE snippets
Breadcrumb
042419
---------------------------------------- */
"Boostrap 4: Breadcrumb": {
"prefix": "bs4-breadcrumb",
"scope": "html,php,blade",
"body": [
"<nav class=\"breadcrumb\">",
" <a class=\"breadcrumb-item\" href=\"${2:#}\">$1</a>",
" <a class=\"breadcrumb-item\" href=\"${4:#}\">$3</a>",
" <span class=\"breadcrumb-item active\">$5</span>",
"</nav>$0"
],
"description": "Bootstrap 4: Breadcrumb"
},
"Boostrap 4: Breadcrumb - List": {
"prefix": "bs4-breadcrumb-list",
"scope": "html,php,blade",
"body": [
"<ol class=\"breadcrumb\">",
" <li class=\"breadcrumb-item\">",
" <a href=\"${2:#}\">$1</a>",
" </li>",
" <li class=\"breadcrumb-item\">",
" <a href=\"${4:#}\">$3</a>",
" </li>",
" <li class=\"breadcrumb-item active\">$5</li>",
"</ol>$0"
],
"description": "Bootstrap 4: Breadcrumb - List"
},
}
Raw
bs4-displays-html.code-snippets
/*
Bootstrap 4
HTML, PHP, BLADE snippets
DISPLAY UTILITIES
042419
*/
{
"Boostrap 4: Hide Down": {
"prefix": "bs4-hide-down",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"d-none d-${1|sm,md,lg,xl|}-block\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Badge"
},
"Boostrap 4: Hide Up": {
"prefix": "bs4-hide-up",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"d-${1|sm,md,lg,xl|}-none\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Hide Up"
}
}
Raw
bs4-forms-html.code-snippets
{
/*
HTML & PHP SNIPPETS
for Bootstrap 4.3.1
GRID
042619
*/
/* -----------------------------------------
Justify Content Center
*/
"Bootstrap 4: Justify-Content-Center": {
"prefix": "jcc",
"scope": "html,php,blade,vue",
"body": [
"justify-content-center"
],
"description": "Bootstrap 4: Grid - Justify-Content-Center"
},
/* -----------------------------------------
Justify Content Between
*/
"Bootstrap 4: Justify-Content-Between": {
"prefix": "jcb",
"scope": "html,php,blade,vue",
"body": [
"justify-content-between"
],
"description": "Bootstrap 4: Grid - Justify-Content-Between"
},
/* -----------------------------------------
Justify Content Start
*/
"Bootstrap 4: Justify-Content-Start": {
"prefix": "jcs",
"scope": "html,php,blade,vue",
"body": [
"justify-content-start"
],
"description": "Bootstrap 4: Grid - Justify-Content-Start"
},
/* -----------------------------------------
Justify Content End
*/
"Bootstrap 4: Justify-Content-End": {
"prefix": "jce",
"scope": "html,php,blade,vue",
"body": [
"justify-content-end"
],
"description": "Bootstrap 4: Grid - Justify-Content-End"
},
/* -----------------------------------------
Align Items Center
*/
"Bootstrap 4: Align-Items-Center": {
"prefix": "aic",
"scope": "html,php,blade,vue",
"body": [
"align-items-center"
],
"description": "Bootstrap 4: Grid - Align-Items-Center"
},
/* -----------------------------------------
Align Items Between
*/
"Bootstrap 4: Align-Items-Between": {
"prefix": "aib",
"scope": "html,php,blade,vue",
"body": [
"align-items-between"
],
"description": "Bootstrap 4: Grid - Align-Items-Between"
},
/* -----------------------------------------
Align Items Start
*/
"Bootstrap 4: Align-Items-Start": {
"prefix": "jcs",
"scope": "html,php,blade,vue",
"body": [
"align-items-start"
],
"description": "Bootstrap 4: Grid - Align-Items-Start"
},
/* -----------------------------------------
Align Items End
*/
"Bootstrap 4: Align-Items-End": {
"prefix": "jce",
"scope": "html,php,blade,vue",
"body": [
"align-items-end"
],
"description": "Bootstrap 4: Grid - Align-Items-End"
},
/* -----------------------------------------
Flex Center
*/
"Bootstrap 4: Flex Center": {
"prefix": "fc",
"scope": "html,php,blade,vue",
"body": [
"justify-content-center align-items-center"
],
"description": "Bootstrap 4: Grid - Flex Center"
},
/* -----------------------------------------
Container Fluid
*/
"Bootstrap 4: Grid - Container-Fluid": {
"prefix": "contfluid",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"container-fluid\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container-Fluid"
},
/* -----------------------------------------
Container
*/
"Bootstrap 4: Grid - Container": {
"prefix": "cont",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"container\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container"
},
/* -----------------------------------------
Row
*/
"Bootstrap 4: Grid - Row": {
"prefix": "row",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Row"
},
/* -----------------------------------------
Column Sized
*/
"Bootstrap 4: Grid - Column": {
"prefix": "col",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"col${1|-,-sm,-md,-lg,-xl|}-${2:1-12}\">",
" ",
"</div>$0"
],
"description": "Bootstrap 4: Grid - Column XS"
},
/* -----------------------------------------
Grid - 3 Columns
*/
"Bootstrap 4: Grid - 3 Columns Centered": {
"prefix": "3col",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${5:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${6:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 3 Columns Centered"
},
/* -----------------------------------------
Grid - 2 Columns
*/
"Bootstrap 4: Grid - 2 Columns Centered": {
"prefix": "2col",
"scope": "html,php,blade,vue",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${5:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 2 Columns Centered"
},
/* -----------------------------------------
Grid - Single Columns
*/
"Bootstrap 4: Grid - 1 Column": {
"prefix": "1col",
"scope": "html,php,blade,vue",
"body": [
"$0<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-sm-${2:6}\">",
" ${3:Content}",
" </div>",
"</div>"
],
"description": "Bootstrap 4: Grid - 1 Column"
}
}
Raw
bs4-grids-html.code-snippets
{
/*
HTML & PHP SNIPPETS
for Bootstrap 4.3.1
GRIDS
042419
*/
/* -----------------------------------------
Justify Content Center
*/
"Bootstrap 4: Justify-Content-Center": {
"prefix": "jcc",
"scope": "html,php,blade",
"body": [
"justify-content-center"
],
"description": "Bootstrap 4: Grid - Justify-Content-Center"
},
/* -----------------------------------------
Justify Content Between
*/
"Bootstrap 4: Justify-Content-Between": {
"prefix": "jcb",
"scope": "html,php,blade",
"body": [
"justify-content-between"
],
"description": "Bootstrap 4: Grid - Justify-Content-Between"
},
/* -----------------------------------------
Justify Content Start
*/
"Bootstrap 4: Justify-Content-Start": {
"prefix": "jcs",
"scope": "html,php,blade",
"body": [
"justify-content-start"
],
"description": "Bootstrap 4: Grid - Justify-Content-Start"
},
/* -----------------------------------------
Justify Content End
*/
"Bootstrap 4: Justify-Content-End": {
"prefix": "jce",
"scope": "html,php,blade",
"body": [
"justify-content-end"
],
"description": "Bootstrap 4: Grid - Justify-Content-End"
},
/* -----------------------------------------
Align Items Center
*/
"Bootstrap 4: Align-Items-Center": {
"prefix": "aic",
"scope": "html,php,blade",
"body": [
"align-items-center"
],
"description": "Bootstrap 4: Grid - Align-Items-Center"
},
/* -----------------------------------------
Align Items Between
*/
"Bootstrap 4: Align-Items-Between": {
"prefix": "aib",
"scope": "html,php,blade",
"body": [
"align-items-between"
],
"description": "Bootstrap 4: Grid - Align-Items-Between"
},
/* -----------------------------------------
Align Items Start
*/
"Bootstrap 4: Align-Items-Start": {
"prefix": "jcs",
"scope": "html,php,blade",
"body": [
"align-items-start"
],
"description": "Bootstrap 4: Grid - Align-Items-Start"
},
/* -----------------------------------------
Align Items End
*/
"Bootstrap 4: Align-Items-End": {
"prefix": "jce",
"scope": "html,php,blade",
"body": [
"align-items-end"
],
"description": "Bootstrap 4: Grid - Align-Items-End"
},
/* -----------------------------------------
Flex Center
*/
"Bootstrap 4: Flex Center": {
"prefix": "fc",
"scope": "html,php,blade",
"body": [
"justify-content-center align-items-center"
],
"description": "Bootstrap 4: Grid - Flex Center"
},
/* -----------------------------------------
Container Fluid
*/
"Bootstrap 4: Grid - Container-Fluid": {
"prefix": "contfluid",
"scope": "html,php,blade",
"body": [
"<div class=\"container-fluid\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container-Fluid"
},
/* -----------------------------------------
Container
*/
"Bootstrap 4: Grid - Container": {
"prefix": "cont",
"scope": "html,php,blade",
"body": [
"<div class=\"container\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Container"
},
/* -----------------------------------------
Row
*/
"Bootstrap 4: Grid - Row": {
"prefix": "row",
"scope": "html,php,blade",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" $0",
"</div>"
],
"description": "Bootstrap 4: Grid - Row"
},
/* -----------------------------------------
Column Sized
*/
"Bootstrap 4: Grid - Column": {
"prefix": "col",
"scope": "html,php,blade",
"body": [
"<div class=\"col${1|-,-sm,-md,-lg,-xl|}-${2:1-12}\">",
" ",
"</div>$0"
],
"description": "Bootstrap 4: Grid - Column XS"
},
/* -----------------------------------------
Grid - 3 Columns
*/
"Bootstrap 4: Grid - 3 Columns Centered": {
"prefix": "3col",
"scope": "html,php,blade",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${5:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:4}\">",
" ${6:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 3 Columns Centered"
},
/* -----------------------------------------
Grid - 2 Columns
*/
"Bootstrap 4: Grid - 2 Columns Centered": {
"prefix": "2col",
"scope": "html,php,blade",
"body": [
"<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${4:Content}",
" </div>",
" <div class=\"col-${2|xs,sm,md,lg,xl|}-${3:6}\">",
" ${5:Content}",
" </div>",
"</div>$0"
],
"description": "Bootstrap 4: Grid - 2 Columns Centered"
},
/* -----------------------------------------
Grid - Single Columns
*/
"Bootstrap 4: Grid - 1 Column": {
"prefix": "1col",
"scope": "html,php,blade",
"body": [
"$0<div class=\"row${1: justify-content-center}\">",
" <div class=\"col-sm-${2:6}\">",
" ${3:Content}",
" </div>",
"</div>"
],
"description": "Bootstrap 4: Grid - 1 Column"
}
}
Raw
bs4-navs-html.code-snippets
{
/* ----------------------------------------
HTML & PHP SNIPPETS
for Bootstrap 4.3.1
NAV
042419
---------------------------------------- */
"Bootstrap 4: Nav - Links": {
"prefix": "bs4-nav-a",
"scope": "html,php,blade,vue",
"body": [
"<nav class=\"nav ${1|justify-content-start,justify-content-center,justify-content-end|\">",
" <a class=\"nav-link active\" href=\"${3:#}\">${2:Active link}</a>",
" <a class=\"nav-link\" href=\"${5:#}\">${4:Link}</a>",
" <a class=\"nav-link\" href=\"${7:#}\">${6:Link}</a>",
"</nav>"
],
"description": "Bootstrap 4: Nav Links"
},
"Bootstrap 4: Nav UL List": {
"prefix": "bs4-nav-ul",
"scope": "html,php,blade,vue",
"body": [
"<ul class=\"nav ${1|justify-content-start,justify-content-center,justify-content-end|}\">",
" <li class=\"nav-item\">",
" <a class=\"nav-link active\" href=\"${3:#}\">${2:Active link}</a>",
" </li>",
" <li class=\"nav-item\">",
" <a class=\"nav-link\" href=\"${5:#}\">${4:Link}</a>",
" </li>",
" <li class=\"nav-item\">",
" <a class=\"nav-link\" href=\"${7:#}\">${6:Link}</a>",
" </li>",
"</ul>"
],
"description": "Bootstrap 4: Nav UL List"
},
}
Raw
bs4-scaffold-html.code-snippets
/*
Bootstrap 4
HTML, PHP, BLADE snippets
Document Scaffolding
*/
{
"Boostrap 4: Scaffold Document": {
"prefix": "bs4-!",
"scope": "html,php,blade",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>${1:Bootstrap 4 Document}</title>",
" <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">",
"</head>",
"<body>",
"",
" $0",
"",
" <script src=\"https://code.jquery.com/jquery-3.2.1.min.js\"></script>",
" <script src=\"https://unpkg.com/popper.js/dist/umd/popper.min.js\"></script>",
" <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\"></script>",
"",
"</body>",
"</html>"
],
"description": "Bootstrap 4: Scaffold Document"
}
}
Raw
bulma-forms-html.code-snippets
{
/**
HTML & PHP SNIPPETS
for Bulma 0.7.4
FORM CONTROLS
@rob-kistner
042819
*/
/* -----------------------------------------
Text Input
------------------------------------------*/
"Bulma: Text Input": {
"prefix": "bul-input",
"scope": "html,php,blade",
"body": [
"<div class=\"field\">",
" <div class=\"control\">",
" <label for=\"${2:input}\" class=\"label\">${1:Text Input}</label>",
" <input type=\"${3:text}\" name=\"${2:input}\" id=\"${2:input}\" class=\"${4:input}\" placeholder=\"${5:Text input}\">",
" </div>",
"</div>$0"
],
"description": "Bulma: Text Input"
},
"Bulma: Input Text - Loading": {
"prefix": "bul-input-loading",
"body": [
"<div class=\"field\">",
" <label for=\"${2:input-loading}\" class=\"label\">${1:Loading Input}</label>",
" <div class=\"${3:control is-loading}\">",
" <input type=\"text\" class=\"${4:input}\" name=\"${2:input-loading}\" id=\"${2:input-loading}\" placeholder=\"${5:example}\">",
" </div>",
"</div>$0"
],
"description": "Bulma: Input Text - Loading"
},
"Bulma: Input Text - Static": {
"prefix": "bul-input-static",
"body": [
"<div class=\"field\">",
" <label for=\"${2:static-field}\" class=\"label\">${1:Static Field}</label>",
" <div class=\"control\">",
" <input class=\"${3:input is-static}\" type=\"text\" name=\"${2:static-field}\" id=\"${2:static-field}\" value=\"${4:Static field value}\" readonly>",
" </div>",
"</div>$0"
],
"description": "Bulma: Input Text - Static"
},
"Bulma: Input Text - With Icons": {
"prefix": "bul-input-icons",
"body": [
"<div class=\"field\">",
" <label for=\"${4:input}\" class=\"label\">${3:Label}</label>",
" <div class=\"control${1: has-icons-left}${2: has-icons-right}\">",
" <input class=\"input\" type=\"${5:email}\" name=\"${4:input}\" id=\"${4:input}\" placeholder=\"${6:Placeholder text}\">",
" <span class=\"icon${7: is-small is-left}\">",
" <i class=\"fas${8: fa-envelope}\"></i>",
" </span>",
" <span class=\"icon${9: is-small is-right}\">",
" <i class=\"fas${10: fa-check}\"></i>",
" </span>",
" </div>",
"</div>$0"
],
"description": "Bulma: Input Text - With Icons"
},
"Bulma: Input Text - Horizontal": {
"prefix": "bul-input-horizontal",
"body": [
"<div class=\"field is-horizontal\">",
" <div class=\"field-label is-normal\">",
" <label class=\"label\">${1:Description}</label>",
" </div>",
" <div class=\"field-body\">",
" <div class=\"field\">",
" <div class=\"control\">",
" <input type=\"text\"",
" name=\"${2:description}\"",
" id=\"${2:description}\"",
" class=\"input\"",
" placeholder=\"${3:Placeholder}\" value=\"${4}\">",
" </div>",
" </div>",
" </div>",
"</div>$0"
],
"description": "Bulma: Input Text - Horizontal"
},
"Bulma: Select": {
"prefix": "bul-select",
"body": [
"<div class=\"field\">",
" <div class=\"${1:select}\">",
" <select>",
" <option value=\"${3}\" selected>${2:Select dropdown}</option>",
" <option value=\"${4:One}\">${4:One}</option>",
" <option value=\"${5:Two}\">${5:Two}</option>",
" </select>",
" </div>",
"</div>$0"
],
"description": "Bulma: Select"
},
"Bulma: Select with Icons": {
"prefix": "bul-select-icons",
"body": [
"<div class=\"field\">",
" <label for=\"${2:select-with-icons}\" class=\"label\">${1:Select with icons}</label>",
" <div class=\"control has-icons-left\">",
" <div class=\"${3:select}\">",
" <select name=\"${2:select-with-icons}\" id=\"${2:select-with-icons}\">",
" <option value=\"${5:Item One}\">${5:Item One}</option>",
" <option value=\"${6:Item Two}\">${6:Item Two}</option>",
" <option value=\"${7:Item Three}\">${7:Item Three}</option>",
" </select>",
" </div>",
" <div class=\"icon is-left\">",
" <i class=\"fas fa-globe\"></i>",
" </div>",
" </div>",
"</div>$0"
],
"description": "Bulma: Select with Icons"
},
"Bulma: Select - Horizontal": {
"prefix": "bul-select-horizontal",
"body": [
"<div class=\"field is-horizontal\">",
" <div class=\"field-label is-normal\">",
" <label class=\"label\">${1:Label}</label>",
" </div>",
" <div class=\"field-body\">",
" <div class=\"field\">",
" <div class=\"control\">",
" <div class=\"select is-fullwidth\">",
" <select name=\"project_type\" id=\"project_type\">",
" <option value=\"\" selected>${2:Select default text…}</option>",
" <option value=\"${3:Option 1}\">${3:Option 1}</option>",
" <option value=\"${4:Option 2}\">${4:Option 2}</option>",
" </select>",
" </div>",
" </div>",
" </div>",
" </div>",
" </div>",
"</div>$0"
],
"description": "Bulma: Select - Horizontal"
},
"Bulma: Multi-Select": {
"prefix": "bul-multi-select",
"body": [
"<div class=\"field\">",
" <label for=\"${2:multi-select}\" class=\"label\">${1:Multiple select}</label>",
" <div class=\"control\">",
" <div class=\"${3:select is-multiple}\">",
" <select name=\"${2:multi-select}\" id=\"${2:multi-select}\" multiple size=\"${4:5}\">",
" <option value=\"${5:Item One}\">${5:Item One}</option>",
" <option value=\"${6:Item Two}\">${6:Item Two}</option>",
" <option value=\"${7:Item Three}\">${7:Item Three}</option>",
" <option value=\"${8:Item Four}\">${8:Item Four}</option>",
" <option value=\"${9:Item Five}\">${9:Item Five}</option>",
" </select>",
" </div>",
" </div>",
"</div>$0"
],
"description": "Bulma: Multi-Select"
}
}
Raw
bulma-navbar-html.code-snippets
{
/**
HTML & PHP SNIPPETS
for Bulma 0.7.4
NAVBAR
@rob-kistner
042819
*/
"Bulma: Navbar": {
"prefix": "bul-navbar",
"scope": "html,php,blade",
"body": [
"<nav class=\"navbar${1: is-dark}${2: is-fixed-top}${3: is-spaced}\"${4: role=\"navigation\" aria-label=\"${5:main navigation}\"}>",
" <div class=\"navbar-brand\">",
" <a class=\"navbar-item\" href=\"#\">",
" <img src=\"${6:https://bulma.io/images/bulma-logo.png}\">",
" </a>",
"",
" <a class=\"navbar-burger burger\" data-target=\"${7:navbar-main}\"${8: role=\"button\" aria-label=\"menu\" aria-expanded=\"false\"}>",
" <span aria-hidden=\"true\"></span>",
" <span aria-hidden=\"true\"></span>",
" <span aria-hidden=\"true\"></span>",
" </a>",
" </div>",
"",
" <div id=\"${7:navbar-main}\" class=\"navbar-menu\">",
"",
" <div class=\"navbar-start\">",
" <a class=\"navbar-item\" href=\"#\">Left Menu 1</a>",
" <a class=\"navbar-item\" href=\"#\">Left Menu 2</a>",
" <div class=\"navbar-item has-dropdown is-hoverable\">",
" <a class=\"navbar-link\">Left Dropdown</a>",
" <div class=\"navbar-dropdown\">",
" <a class=\"navbar-item\" href=\"#\">Dropdown 1</a>",
" <a class=\"navbar-item\" href=\"#\">Dropdown 2</a>",
" <hr class=\"navbar-divider\">",
" <a class=\"navbar-item\" href=\"#\">Dropdown 3</a>",
" </div>",
" </div>",
" </div>",
"",
" <div class=\"navbar-end\">",
" <a class=\"navbar-item\" href=\"#\">Right Menu 1</a>",
" <a class=\"navbar-item\" href=\"#\">Right Menu 2</a>",
" </div>",
"",
" </div>",
"</nav>$0"
],
"description": "Bulma: Navbar"
},
"Bulma: Navbar - Javascript Trigger": {
"prefix": "bul-navbar-js",
"scope": "javascript,js",
"body": [
"document.addEventListener('DOMContentLoaded', () => {",
" // Get all \"navbar-burger\" elements",
" const $navbarBurgers = Array.prototype.slice.call(",
" document.querySelectorAll('.navbar-burger'),",
" 0",
" )",
" // Check if there are any navbar burgers",
" if ($navbarBurgers.length > 0) {",
" // Add a click event on each of them",
" $navbarBurgers.forEach( el => {",
" el.addEventListener('click', () => {",
" // Get the target from the \"data-target\" attribute",
" const target = el.dataset.target",
" const $target = document.getElementById(target)",
" // Toggle the \"is-active\" class on both the \"navbar-burger\" and the \"navbar-menu\"",
" el.classList.toggle('is-active')",
" $target.classList.toggle('is-active')",
" })",
" })",
" }",
"})$0"
],
"description": "Bulma: Navbar - Javascript Trigger"
},
"Bulma: Navbar - jQuery Trigger": {
"prefix": "bul-navbar-jquery",
"scope": "javascript,js",
"body": [
"$(document).ready(function() {",
" // Check for click events on the navbar burger icon",
" $('.navbar-burger').click(function() {",
" // Toggle the \"is-active\" class on both the \"navbar-burger\" and the \"navbar-menu\"",
" $('.navbar-burger').toggleClass('is-active')",
" $('.navbar-menu').toggleClass('is-active')",
" })",
"})$0"
],
"description": "Bulma: Navbar - jQuery Trigger"
},
}
Raw
bulma-scaffold-html.code-snippets
/*
Bootstrap 4
HTML, PHP, BLADE snippets
Document Scaffolding
@rob-kistner
042819
*/
{
"Boostrap 4: Scaffold Document": {
"prefix": "bs4-!",
"scope": "html,php,blade",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>${1:Bootstrap 4 Document}</title>",
" <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">",
"</head>",
"<body>",
"",
" $0",
"",
" <script src=\"https://code.jquery.com/jquery-3.2.1.min.js\"></script>",
" <script src=\"https://unpkg.com/popper.js/dist/umd/popper.min.js\"></script>",
" <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\"></script>",
"",
"</body>",
"</html>"
],
"description": "Bootstrap 4: Scaffold Document"
}
}
Raw
googlefonts-html.code-snippets
/* ----------------------------------------
HTML, PHP, BLADE Snippets
for Visual Studio Code
GOOGLE FONTS
@rob-kistner
042419
---------------------------------------- */
{
// Roboto
"GoogleFonts: Roboto": {
"prefix": "gf-roboto",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Roboto"
},
// Heebo
"GoogleFonts: Heebo": {
"prefix": "gf-heebo",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Heebo"
},
// Muli
"GoogleFonts: Muli": {
"prefix": "gf-muli",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Muli"
},
// IBM Plex Sans
"GoogleFonts: IBM Plex Sans": {
"prefix": "gf-ibm-plexsans",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: IBM Plex Sans"
},
// IBM Plex Sans Condensed
"GoogleFonts: IBM Plex Sans Condensed": {
"prefix": "gf-ibm-plexsans-cond",
"scope": "html,php,blade",
"body": [
"<link href=\"<link href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: IBM Plex Sans Condensed"
},
// Open Sans
"GoogleFonts: Open Sans": {
"prefix": "gf-opensans",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Open Sans"
},
// Ubuntu
"GoogleFonts: Ubuntu": {
"prefix": "gf-ubuntu",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Ubuntu"
},
// Ubuntu Condensed
"GoogleFonts: Ubuntu Condensed": {
"prefix": "gf-ubuntu-cond",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Ubuntu+Condensed:300,300i,400,400i,500,500i,700,700i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Ubuntu Condensed"
},
// Alegreya Sans
"GoogleFonts: Alegreya Sans": {
"prefix": "gf-alegreya-sans",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Alegreya+Sans:100,100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Alegreya Sans"
},
// Alegreya
"GoogleFonts: Alegreya": {
"prefix": "gf-alegreya",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Alegreya:400,400i,500,500i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Alegreya"
},
// Merriweather Sans
"GoogleFonts: Merriweather Sans": {
"prefix": "gf-merriweather-sans",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800,800i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Merriweather Sans"
},
// Merriweather
"GoogleFonts: Merriweather Sans": {
"prefix": "gf-merriweather-sans",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Merriweather Sans"
},
// Nunito Sans
"GoogleFonts: Nunito Sans": {
"prefix": "gf-nunito-sans",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Nunito+Sans:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Nunito Sans"
},
// Nunito
"GoogleFonts: Nunito": {
"prefix": "gf-nunito",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Nunito"
},
// Quattrocento Sans
"GoogleFonts: Quattrocento Sans": {
"prefix": "gf-quattrocento-sans",
"scope": "html,php,blade",
"body": [
"<link href=\"https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400i,700,700i\" rel=\"stylesheet\">"
],
"description": "GoogleFonts: Quattrocento Sans"
},
}
Raw
shellscript.json
{
// z-shell execute
// ----------------------------------------
"ZSH prefix": {
"prefix": "zsh",
"body": [
"#!/bin/zsh"
],
"description": "ZSH prefix for top of file"
},
// For loop
// ----------------------------------------
"For Loop": {
"prefix": "for",
"body": [
"for ${1:MYVAR} in ${2:item1 item2 item3}",
"do",
" echo \"${1:MYVAR}: $${1:MYVAR}\"",
"done"
],
"description": "Basic for loop"
},
// If then basic
// ----------------------------------------
"If/Then Basic": {
"prefix": "if",
"body": [
"if [ \"$${1:MYVAR}\" = \"${2:value}\" ]",
"then",
" ${3:echo \"result\"}",
"fi"
],
"description": "If/Then"
},
// If/else-if/then
// ----------------------------------------
"If/Elif/Then": {
"prefix": "ifelif",
"body": [
"if [ \"$${1:MYVAR}\" = \"${2:value}\" ]",
"then",
" ${3:echo \"result\"}",
"elif [ \"$${1:MYVAR}\" = \"${4:value}\" ]",
"then",
" ${5:echo \"result\"}",
"else",
" ${6:echo \"result\"}",
"fi"
],
"description": "If/Elif/Then with a default Else"
},
// For args
// ----------------------------------------
"For over Args": {
"prefix": "forargs",
"body": [
"for ${1:PARAM} in $@",
"do",
" ${2:echo \"$${1:PARAM}\"}",
"done"
],
"description": "For loop over arguments"
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment