Handlebars Basscss
UI element helpers for Handlebars and Basscss
Getting Started
Link to or include Basscss in your template head.
<link rel="stylesheet" href="/css/basscss.css">
Install handlebars-basscss
in your project.
npm install --save handlebars-basscss
Register all Basscss helpers with Handlebars.
var Handlebars = ;Handlebars
Or, register helpers on an individual basis.
var basscss = ;Handlebars;
Global Options
All helpers accept the following attributes: id
, class
, style
, href
, rel
, title
, and alt
.
Button
{{button "Default" }}{{button "Gray" color="gray" }}{{button "Blue" color="blue" }}{{button "Red" color="red" }}{{button "Blue Outline" color="blue-outline" }}
Nav Item
{{navItem "Burgers" href="#nav-item" }}{{navItem "Fries" href="#nav-item" }}{{navItem "Shake" href="#nav-item" }}
{{navItem "Burgers" href="#nav-item" block="true" }}{{navItem "Fries" href="#nav-item" block="true" }}{{navItem "Shake" href="#nav-item" block="true" }}
Badge
{{badge "Default" }}{{badge "Info" type="info" }}{{badge "Success" type="success" }}{{badge "Warning" type="warning" }}{{badge "Error" type="error" }}
Message
{{message 'Default flash message' }}{{message 'Info flash message' type="info" }}{{message 'Success flash message' type="success" }}{{message 'Warning flash message' type="warning" }}{{message 'Error flash message with dismiss' type="error" dismiss="console.log('bye bye');this.parentNode.remove()" }}
Media Object
{{#media img="//basscss.com/docs/placeholder.svg" imgWidth="128" }} Media Object With variable body content{{/media }}
{{#media imgRight="//basscss.com/docs/placeholder.svg" imgWidth="128" }} Media Object With image to the right{{/media }}
Flag Object
{{#flag img="//basscss.com/docs/placeholder.svg" imgWidth="192" }} Flag Object Vertically centered media object{{/flag}}
Panel
{{#panel header="Panel" }} Panel with header but no footer{{/panel}}
{{#panel header="Panel" footer="Footer" }} Panel with header and footer{{/panel}}
{{#panel header="Panel" type="info" }} Info Panel{{/panel}}
{{#panel header="Panel" type="success" }} Success Panel{{/panel}}
{{#panel header="Panel" type="warning" }} Warning Panel{{/panel}}
{{#panel header="Panel" type="error" }} Error Panel{{/panel}}
Card
{{#card img="//basscss.com/docs/placeholder.svg" class="inline-block" }} Default Card Bacon cheeseburger with fries {{/card}} {{#card type="info" img="//basscss.com/docs/placeholder.svg" }} Info Card Bacon cheeseburger with fries {{/card}} {{#card type="success" img="//basscss.com/docs/placeholder.svg" }} Success Card Bacon cheeseburger with fries {{/card}} {{#card type="warning" img="//basscss.com/docs/placeholder.svg" }} Warning Card Bacon cheeseburger with fries {{/card}} {{#card type="error" img="//basscss.com/docs/placeholder.svg" }} Error Card Bacon cheeseburger with fries {{/card}} {{#card }} Imageless Card Bacon cheeseburger with fries Pancake Batter {{/card}}
Nav
{{#nav id="nav" }} {{navItem "Nav link" href="#nav-item" }} {{navItem "Nav link" href="#nav-item" }} {{navItem "Nav link" href="#nav-item" }}{{/nav}}
Navbar
{{#navbar }} {{navItem "Home" href="#nav-item" }} {{navItem "Burgers" href="#nav-item" }} {{navItem "Fries" href="#nav-item" }}{{/navbar}}
{{#navbar type="dark" }} {{navItem "Home" href="#nav-item" inverse="true" tall="true" }} {{navItem "Burgers" href="#nav-item" inverse="true" tall="true" }} {{navItem "Fries" href="#nav-item" inverse="true" tall="true" }}{{/navbar}}
Dropdown
(Requires Javascript)
{{#dropdown "Actions" id="dropdown-1" class="mr1 mb2" }} Item {{navItem "Action" href="#dropdown" block="true" }} {{navItem "Edit" href="#dropdown" block="true" }} {{navItem "Remove" href="#dropdown" block="true" }}{{/dropdown}}
{{#dropdown "More Actions" id="dropdown-2" buttonClass="button-blue" class="mr1 mb2" }} {{navItem "Action" href="#dropdown" block="true" }} {{navItem "Action" href="#dropdown" block="true" }} {{navItem "Action" href="#dropdown" block="true" }}{{/dropdown}}{{#dropdown "More Actions" id="dropdown-3" buttonClass="button-nav-light" class="mr1 mb2" }} {{navItem "Action" href="#dropdown" block="true" }} {{navItem "Action" href="#dropdown" block="true" }} {{navItem "Action" href="#dropdown" block="true" }}{{/dropdown}}
Button Group
{{#buttonGroup class="mr2"}} {{button "Blue" color="blue" group="true" active="true" }} {{button "Blue" color="blue" group="true" }} {{button "Blue" color="blue" group="true" }}{{/buttonGroup}}{{#buttonGroup}} {{button "Red" color="red" group="true" }} {{button "Default" group="true" active="true" }} {{button "Default" group="true" }}{{/buttonGroup}}