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

Documentation

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

Documentation

<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

Documentation

<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

Search icons

<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

Available glyphs

<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

Panel
<div class="panel">Panel</div>
Panel Invert
<div class="panel invert">Panel Invert</div>

Forms

Example form

Example form with Magento's form validation.

?
Email address is not used for marketing.
<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

Gradient: top grey, bottom white
<div class="bg-gradient-top-grey">Gradient: top grey, bottom white</div>
Gradient: top white, bottom grey
<div class="bg-gradient-bottom-grey">Gradient: top white, bottom grey</div>
Brand color as background color
<div class="bg-brand">Brand color as background color</div>
Panel color as background color
<div class="bg-panel">Panel color as background color</div>

Promo grid

First promo tile!

Promo Tile 1
Nov 20. 2017

Second promo tile!

Promo Tile 2
Nov 20. 2017

Third promo tile!

Promo Tile 3
Nov 20. 2017

Fourth promo tile!

Promo Tile 4
Nov 20. 2017

Fifth promo tile!

Promo Tile 5
Nov 20. 2017

Sixth promo tile!

Promo Tile 6
Nov 20. 2017

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.

Caption text
    <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.

<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 1Col 2Col 3
ItemItemItem
ItemItemItem
ItemItemItem
<table>

Bordered

Col 1Col 2Col 3
ItemItemItem
ItemItemItem
ItemItemItem
<table class="table table-bordered">

Lined

Col 1Col 2Col 3
ItemItemItem
ItemItemItem
ItemItemItem
<table class="table table-lined">

Additional classes

Compact

Col 1Col 2Col 3
ItemItemItem
ItemItemItem
ItemItemItem
<table class="table table-bordered table-compact">

Light borders

Col 1Col 2Col 3
ItemItemItem
<table class="table table-bordered light-borders">

Inner borders

Col 1Col 2Col 3
ItemItemItem
ItemItemItem
<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.

First (divider at bottom)
Second (divider at bottom)
Third

<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.

Toggle
<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.

Toggle
<div class="mobile-toggler">Toggle</div>
<div>Content</div>

Slide toggler

Toggler with animation. Animation speed is 200ms.

Toggle
<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.

Toggle
<div class="mobile-slide-toggler">Toggle</div>
<div>Content</div>

Toggle panel

List of togglable items.

Lorem Ipsum

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

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

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.

Toggle
<div class="toggler visible-mobile-only">Toggle</div>
<div>Content</div>

.plusminus

Arrow icon is replaced with +/- signs.

Toggle
<div class="toggler plusminus">Toggle</div>
<div>Content</div>

.no-arrow

Arrow icon is hidden.

Toggle
<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>