Code Blender

An atomic Middleman partials library

Button partial creates a call to action on a, button or list elements

  2. Atom
  3. Button partial creates a call to action on a, button or list elements

Default Vanilla button 

= codeBlender "button", "atom", { text: "Default" }

<button class='btn btn-default' type='button'>
Default

</button>

Link Button Changes button tag to a tag

Default 
= codeBlender "button", "atom", { text: "Default", href: "#" }

<a class='btn btn-default' href='#' role='button' type='button'>
Default

</a>

Primary Primary context change 

= codeBlender "button", "atom", { text: "Primary", context: "primary" }

<button class='btn btn-default btn-primary' type='button'>
Primary

</button>

Large Button Success large Size 

= codeBlender "button", "atom", { text: "Success large size", context: "success", size: "lg" }

<button class='btn btn-default btn-success btn-lg' type='button'>
Success large size

</button>

Small block info button 

= codeBlender "button", "atom", { block: true, text: "Small block info button", context: "info", size: "sm" }

<button class='btn btn-default btn-block btn-info btn-sm' type='button'>
Small block info button

</button>

Icon Button 

= codeBlender "button", "atom", { icon: { prepend: { icon: "fa fa-times" } } }

<button class='btn btn-default' type='button'>
<span class='fa fa fa-times'></span>



</button>

Image Button 

= codeBlender "button", "atom", { image: { src: lorem.image( "32x32" ) }}

<button class='btn btn-default' type='button'>
<figure class='image' itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<img src="http://placehold.it/32x32" alt="Image" class="image__img" itemprop="contentUrl" />
</figure>


</button>

Resources Useful websites and tutorials

Title URL
Bootstrap button http://getbootstrap.com/css/#buttons
Button generator http://www.plugolabs.com/twitter-bootstrap-button-generator-3/

Tasks

Task Date
Complete the other buttons actions on bootstrap
Explain in here all the places a button can be used
Change href to Link and create a new Link Partial
Allow for an image or icon before also
locals[ :text ] seems to be required but what if we just want an icon button provide option and graceful fallback on errors
Handle the target a bit better should be contained in a link array link: { uri:, target: } so contained