Element Guide
See also: Bluefoot Guide
Buttons
Always add "btn" class to a button.
Some button classes can be combined:
<a class="btn btn-primary btn-lg btn-block" href="#">Large primary block button</a>
<button>Button tag</button>
<a class="btn" href="#">Button</a>
<a class="btn btn-default" href="#">Default button</a>
<a class="btn btn-primary" href="#">Primary button</a>
<a class="btn btn-disabled" href="#">Disabled button</a>
<a class="btn btn-block" href="#">Block button</a>
<a class="btn btn-xs" href="#">Button XS</a>
<a class="btn btn-sm" href="#">Button SM<a>
<a class="btn btn-lg" href="#">Button LG</a>
<a class="btn btn-nowrap" href="#">Nowrap</a>
<a class="btn btn-dropdown" href="#">Dropdown</a>
<a class="btn btn-selected" href="#">Selected</a>
<a class="btn btn-invert" href="#">Invert button</a>
<a class="btn btn-raised" href="#">Raised button</a>
Button wrapper
Use when adding multiple buttons next to each other. This class adds some margin around the buttons.
<div class="btns"> <a href="#" class="btn">Button 1</a> <a href="#" class="btn">Button 2</a> <a href="#" class="btn">Button 3</a> </div>
Line container
<div class="line-container"> <span> <a href="#" class="btn btn-primary">Button</a> </span> </div>
Headings
Title H1
Title H2
Title H3
Title H4
Title H5
Title H6
<h1>Title H1</h1>
Brand H1
Brand H2
Brand H3
Brand H4
Brand H5
Brand H6
<h1 class="brand">Brand H1</h1>
Even margin
Get margin-bottom value and set it as margin-top
<h2 class="even-margin">Even margin</h2>
Heading - use pixel size
CSS class font-size-140 makes this text 140% bigger, but heading size stays the same when using h-pixel-size class!
<div class="font-size-140 h-pixel-size"> <h2>Heading</h2> <p>Text that gets bigger!</p> </div>
Bootstrap
We are using limited version of Bootstrap v4.0.0-beta.2. Only grid, float and display features added.
Breakpoints
xs: 0 →
sm: 576px →
md: 768px →
lg: 992px →
xl: 1200px →
Grid
Always use container/container-fluid and row wrappers for Bootstrap grids! Grids do not work without them in Magento.
<div class="container"> <div class="row"> <div class="col-md-3"> Column width 3/12 </div> <div class="col-md-9"> Column width 9/12 </div> </div> </div>
Float
<div class="float-right">Float right</div>
<div class="float-right">Float left</div>
<div class="float-none">Do not float</div>
<div class="float-md-right">Float right on viewports sized MD (medium) or wider</div>
Display
<div class="d-none">Display none</div>
<div class="d-block">Display block</div>
<div class="d-none d-md-block">Hide on viewports below MD (medium)</div>
Text and fonts
Font-family-*
* = bold, black, light, thin, regular, medium, base
Bold: Instru: BrandonText-Bold | Nissen: AvenirLTStd-Black | Keops: Lato
Black: Instru: BrandonText-Black | Nissen: AvenirLTStd-Black | Keops: Lato
Light: Instru: BrandonText-Light | Nissen: AvenirLTStd-Book | Keops: Lato
Thin: Instru: BrandonText-Thin | Nissen: AvenirLTStd-Book | Keops: Lato
Regular: Instru: BrandonText-Regular | Nissen: AvenirLTStd-Book | Keops: Lato
Medium: Instru: BrandonText-Medium | Nissen: AvenirLTStd-Book | Keops: Lato
Base: Instru: Helvetica Neue | Nissen: AvenirLTStd-Book | Keops: Arial
<span class="font-family-bold">Bold text</span>
Font-size-*
* = 50, 60, 70, ..., 200, 250, 300
<span class="font-size-50">Font size is 50% from the original</span>
Text alignment
Left, center, right
<div class="text-left">Left aligned text</div>
<div class="text-center">Centered text</div>
<div class="text-right">Right aligned text</div>
Text color
Brand colored text<span class="brand-color">Brand colored text</span>
Icons
Font Awesome
Font Awesome 5.0.9
<i class="fa fa-user-circle" aria-hidden="true"></i>
Glyphicons
Glyphicons are currently disabled - FontAwesome should be enough.
Glyphicons from Bootstrap 3.3.7
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
Navigations
Tabs
<ul class="nav nav-tabs"> <li><a href="#">First item</a></li> <li class="active"><a href="#">Second item</a></li> <li><a href="#">Third item</a></li> <li><a href="#">Fourth item</a></li> <li><a href="#">Fifth item</a></li> <li><a href="#">Sixth item</a></li> <li><a href="#">Seventh item</a></li> <li><a href="#">Eighth item</a></li> <li><a href="#">Ninth item</a></li> <li><a href="#">Tenth item</a></li> </ul>
Pill tabs
<ul class="nav nav-pills"> <li><a href="#">First item</a></li> <li class="active"><a href="#">Second item</a></li> <li><a href="#">Third item</a></li> <li><a href="#">Fourth item</a></li> <li><a href="#">Fifth item</a></li> <li><a href="#">Sixth item</a></li> <li><a href="#">Seventh item</a></li> <li><a href="#">Eighth item</a></li> <li><a href="#">Ninth item</a></li> <li><a href="#">Tenth item</a></li> </ul>
Sidebar links
Inline blocks in mobile, blocks in desktop.
<nav class="nav sidebar-links"> <ul> <li><a href="#">Item 1</a></li> <li class="active"><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </nav>
Panels
<div class="panel">Panel</div>
<div class="panel invert">Panel Invert</div>
Forms
Example form
Example form with Magento's form validation.
<form action="" method="get" data-mage-init='{"validation":{}}'> <div class="fields"> <div class="field required"> <label for="fname">Firstname</label> <div><input id="fname" type="text" name="firstname" data-validate='{"required":true}' /></div> </div> <div class="field required"> <label for="lname">Lastname<</label> <div><input id="lname" type="text" name="lastname" data-validate='{"required":true}' /></div> </div> <div class="field"> <label for="email">Email</label> <div><input id="email" type="text" value="" name="email" data-validate='{"validate-email":true}' /></div> <div><div class="tooltip"><div>?</div><div>Email address is not used for marketing.</div></div></div> </div> <div class="field"> <label>Sex</label> <div class="label-buttons"> <input type="radio" value="male" id="male" name="sex" checked="checked" /><label for="male">Male</label> <input type="radio" value="female" id="female" name="sex" /><label for="female">Female</label> </div> </div> <div class="field"> <label> </label> <div><input type="submit" class="btn btn-primary" value="Submit" /></div> </div> </div> </form>
Label buttons
Label needs to be right after the input element.
Radio buttons
<div class="label-buttons"> <input type="radio" value="1" name="rb" id="rb1" checked="checked" /><label for="rb1">First</label> <input type="radio" value="1" name="rb" id="rb2" /><label for="rb2">Second</label> <input type="radio" value="1" name="rb" id="rb3" /><label for="rb3">Third</label> <input type="radio" value="1" name="rb" id="rb4" /><label for="rb4">Fourth</label> </div>
Checkboxes
<div class="label-buttons"> <input type="checkbox" value="1" name="cb" id="cb1" checked="checked" /><label for="cb1">First</label> <input type="checkbox" value="1" name="cb" id="cb2" /><label for="cb2">Second</label> <input type="checkbox" value="1" name="cb" id="cb3" /><label for="cb3">Third</label> <input type="checkbox" value="1" name="cb" id="cb4" /><label for="cb4">Fourth</label> </div>
Backgrounds
<div class="bg-gradient-top-grey">Gradient: top grey, bottom white</div>
<div class="bg-gradient-bottom-grey">Gradient: top white, bottom grey</div>
<div class="bg-brand">Brand color as background color</div>
<div class="bg-panel">Panel color as background color</div>
Promo grid
Additional classes to use with promo-grid:
- invert – Changes background color to white. Uses panel colors by default.
- grid-width-* (* = 2-6) – How many tiles are shown per row in desktop view. Default = 3.
- limited limit-* (* = 2-9) – Limit how many tiles are shown.
<div class="promo-grid"> <div class="promo-tile"> <a href="#"> <img /> </a> <h4> <a href="#">First promo tile!</a> </h4> <p>Promo Tile 1<br>Nov 20. 2017</p> </div> <div class="promo-tile"> ... </div> </div>
Show All button:
<button onClick="jQuery('.promo-grid').removeClass('limited'); jQuery(this).fadeOut(200);">Show All</button>
Images
Use figure and figcaption tags when image has a caption.
<figure> <img /> <figcaption>Caption text</figcaption> </figure>
Owl Carousel - Content slider
Version v.2.2.1
See available options here: Owl Carousel options
It is recommended to use images or divs in the slider.
<div class="owl-carousel" data-mage-init='{"owl" : {}}'> <img /> <img /> <img /> </div>
Slider with tab navigation
Slider needs to be wrapped in .owl-carousel-wrapper div, that also contains .owl-carousel-tabs ul-element. Also "tabs" needs to be set to true in Owl options.
Set active class for the first tab item!
.owl-carousel-tabs do not have any default styles. Use "big-light-tabs" class with the "owl-carousel-wrapper" class to use the white tabs seen in the preview.
- Blue
- Green
- Red
- Yellow
<div class="owl-carousel-wrapper big-light-tabs" data-mage-init='{"owl" : {"nav": false, "autoplayTimeout": 3000, "tabs": true, "tabChangeSpeed": 300}}'> <div class="owl-carousel"> <div>Blue slide</div> <div>Green slide</div> <div>Red slide</div> <div>Yellow slide</div> </div> <ul class="owl-carousel-tabs"> <li class="active">Blue</li> <li>Green</li> <li>Red</li> <li>Yellow</li> </ul> </div>
Additional classes
.brand-arrows (brand colored arrows)
Tables
Default
Col 1 | Col 2 | Col 3 |
---|---|---|
Item | Item | Item |
Item | Item | Item |
Item | Item | Item |
<table>
Bordered
Col 1 | Col 2 | Col 3 |
---|---|---|
Item | Item | Item |
Item | Item | Item |
Item | Item | Item |
<table class="table table-bordered">
Lined
Col 1 | Col 2 | Col 3 |
---|---|---|
Item | Item | Item |
Item | Item | Item |
Item | Item | Item |
<table class="table table-lined">
Additional classes
Compact
Col 1 | Col 2 | Col 3 |
---|---|---|
Item | Item | Item |
Item | Item | Item |
Item | Item | Item |
<table class="table table-bordered table-compact">
Light borders
Col 1 | Col 2 | Col 3 |
---|---|---|
Item | Item | Item |
<table class="table table-bordered light-borders">
Inner borders
Col 1 | Col 2 | Col 3 |
---|---|---|
Item | Item | Item |
Item | Item | Item |
<table class="table table-bordered inner-borders">
Parallax banner
Class page-wide removes container's margins (by adding negative margins), making the banner page wide when using Wide layout.
<section class="page-wide" data-image-src="image.jpg" data-mage-init='{"parallax" : ""}'><section>
Sidebar menu
Add code to CMS block and inject it to a page with a widget. Use "Sidebar Additional" container in the widget.
<ul class="sidebar-menu"> <li><a href="#">Item 1</a></li> <li> <div class="toggler">Item 2</div> <ul> <li><a href="#">Subitem 2-1</a></li> <li><a href="#">Subitem 2-2</a></li> <li><a href="#">Subitem 2-3</a></li> </ul> </li> <li> <div class="toggler">Item 3</div> <ul> <li><a href="#">Subitem 3-1</a></li> <li><a href="#">Subitem 3-2</a></li> <li><a href="#">Subitem 3-3</a></li> </ul> </li> </ul>
Badge blocks
Calendar
badge-block badge-calendar
Phone
badge-block badge-phone
Store
badge-block badge-store
3 months
badge-block badge-3m
30%
badge-block badge-30percent
Insurance
badge-block badge-insurance
Repair
badge-block badge-repair
Receipe 6 months
badge-block badge-recipe6m
Term 6 months
badge-block badge-term6m
<div class="badge-block badge-phone"> <h4>Call us!</h4> <p>09-1234 5000</p> </div>
Dividers
Add border and some margin and padding to top/bottom of an element.
<div class="divider-at-top">Divider at top</div> <div class="divider-at-bottom">Divider at bottom</div>
Togglers
Open/close containers. Toggler class adds an arrow next to the element, and hides the next sibling element. When toggler is clicked, visibility (CSS display) of the next sibling element is changed. Toggler do not add any styles to the element, except the arrow icon. Examples below have some inline styles added.
Toggler
Content is hidden in all viewport sizes.
<div class="toggler">Toggle</div> <div>Content</div>
Mobile toggler
In desktop view, arrow icon is hidden and content is shown. In mobile view works like a normal toggler.
<div class="mobile-toggler">Toggle</div> <div>Content</div>
Slide toggler
Toggler with animation. Animation speed is 200ms.
<div class="slide-toggler">Toggle</div> <div>Content</div>
Mobile slide toggler
In desktop view, toggler is hidden and content is shown. In mobile view works like a normal slide toggler.
<div class="mobile-slide-toggler">Toggle</div> <div>Content</div>
Toggle panel
List of togglable items.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta dui metus, quis molestie est euismod eget. Donec sagittis mauris vestibulum massa vehicula, eu tincidunt neque faucibus. Sed consequat finibus turpis at vulputate. Curabitur ut fermentum tortor. Duis venenatis nec justo vitae vestibulum. Praesent aliquet mauris et tortor interdum, non congue eros fringilla. Mauris mattis sagittis felis, et aliquam sem. Fusce tempor sem eget nibh scelerisque, sit amet tincidunt tortor semper. Sed scelerisque eros lorem, vitae aliquet dui egestas non.
In hac habitasse platea dictumst. Nunc posuere, mi nec ornare feugiat, lorem ipsum pretium nulla, non molestie arcu mi blandit arcu. Ut sollicitudin viverra justo, pulvinar lacinia eros elementum sit amet. Fusce consequat est id mauris bibendum semper. In tempor nisl ac mauris pharetra, lacinia gravida mauris congue. Nullam faucibus imperdiet nunc vitae ullamcorper. Nam tempor nec elit vel molestie.
Vestibulum egestas tristique nulla vel pharetra. Pellentesque in tristique nisl. Curabitur venenatis consequat dui sed placerat. Etiam dictum ante sit amet diam vulputate consectetur. Mauris sed leo varius, malesuada mi a, ornare lorem. Aenean sit amet dapibus arcu, ut dictum eros. Maecenas lacinia rutrum lacinia. Quisque sed gravida risus. Praesent et nisi sit amet orci sollicitudin euismod sed eu justo. Suspendisse ut vehicula mi. Praesent sed purus sit amet sapien eleifend convallis. Aliquam pellentesque mauris vitae leo dictum, vitae accumsan ipsum vehicula. Integer nec nisl dui. In in ornare est. Sed congue tristique nisl nec molestie.
<div class="toggle-panel"> <div class="slide-toggler plusminus">Title</div> <div> Content </div> </div> <div class="toggle-panel"> ... </div>
Additional classes to use with toggler:
.visible-mobile-only
Show toggle button only in mobile view.
<div class="toggler visible-mobile-only">Toggle</div> <div>Content</div>
.plusminus
Arrow icon is replaced with +/- signs.
<div class="toggler plusminus">Toggle</div> <div>Content</div>
.no-arrow
Arrow icon is hidden.
<div class="toggler">Toggle</div> <div>Content</div>
Modals with Ambientia_ModalWidget module
ModalWidget module helps adding modals to CMS pages.
In CMS page/block, create elements for the open button and for the modal content. Then add Ambientia ModalWidget and fill the options.
<button id="openmymodal">Open Modal</button> <div id="mymodal">Modal content goes here!</div> {{widget type="Ambientia\ModalWidget\Block\Widget\Modal" title="Modal Title" open="#openmymodal" modal="#mymodal"}}
Bootstrap Scrollspy
Update active item in navigation while scrolling.
Options
- offset - Offset between the title and top of the page
data-mage-init='{"scrollspy" : {"offset": 200} }'
Bootstrap Affix
Sticky/following element
Options
- offset
- top - Set position fixed when X pixels are scrolled from top
- bottom - Remove fixed position when we are X pixels away from the bottom of the page
data-mage-init='{"affix" : { "offset": {"top": 50, "bottom": 850} }}'
FAQ page with Bootstrap Scrollspy & Affix
FAQ navigation
- Navigation items are anchor links
- Scrollspy's ul-element needs a "nav" class
- Element where the scrollspy is set needs an ID (in this case "faq-nav")
<nav id="faq-nav" class="faq-nav" data-mage-init='{"scrollspy" : {"offset": 130}, "affix" : { "offset": {"top": 50, "bottom": 850} }}'> <ul class="nav"> <li><a href="#item1">Item 1</a></li> <li><a href="#item2">Item 2</a></li> <li><a href="#item3">Item 3</a></li> </ul> </nav>
FAQ content
<div class="faq-content"> <div id="item1"> <h2>Item 1</h2> <p>Lorem ipsum...</p> </div> <div id="item2"> <h2>Item 2</h2> <p>Lorem ipsum...</p> </div> <div id="item3"> <h2>Item 3</h2> <p>Lorem ipsum...</p> </div> </div>
Design - Layout Update XML
Customize page layout in CMS pages.
Remove breadcrumbs
<referenceContainer name="page.top"> <referenceBlock name="breadcrumbs" remove="true" /> </referenceContainer>
Add hero banner (Ambientia_Banners)
<referenceContainer name="banner.area.hero"> <block class="Ambientia\Banners\Block\Widget\Banner"> <arguments> <argument name="identifier" xsi:type="string">IDENTIFIER-HERE</argument> </arguments> </block> </referenceContainer>