Imarc Components

mixins

accordion

@mixin accordion() { ... }

Description

ACCORDION

ACCORDION requires the accordion.plugin.js file. Call the ACCORDION function on your outer element (in our example we use an .accordion div). You can pass in optional plugin options. See the demo page for a list. Within the outer element class each accordion item requires a div wrapper. Within the div wrapper there is a .header class and a .content class.

Sass Parameters

None.

Emmet

.accordion>div>(.header{header}+.content>{lorem ipsum})

View Demo

Example

HTML

<div class="accordion">
    <div>
        <div class="header">header</div>
        <div class="content">
            lorem ipsum
        </div>
    </div>
</div>

JavaScript

$('.accordion').accordion({
    hiddenOnLoad: true,
    singleOpen: true
});

backgroundvideo

@mixin backgroundvideo() { ... }

Description

BACKGROUND VIDEO plays a video (without sound) in the background of an element. Increasing the parent’s ::before padding results in a larger height.

Sass Parameters

None.

Emmet

.backgroundvideo>(.mold>div>h1+p)+video>source[src]

View Demo

Example

HTML

<div class="backgroundvideo">
    <div class="mold">
        <div>
            <h1>
                Imarc loves background videos
            </h1>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit fuga.
            </p>
        </div>
    </div>
     <video autoplay="autoplay" loop="loop" poster="../img/video_placeholder.jpg">
        <source src="../img/imarc_culture_video_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="../img/imarc_culture_video_1.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
    </video>
</div>

breadcrumbs

@mixin breadcrumbs() { ... }

Description

BREADCRUMBS provides basic breadcrumb styling, complete with fontawesome icons for separators. Many styles for BREADCRUMBS are cascading from our base styles.scss file.

Sass Parameters

None.

Emmet

nav.breadcrumbs>ul>li>a+li.active>a

View Demo

Example

HTML

<nav class="breadcrumbs">
   <ul>
       <li>
           <a href="">Item</a>
       </li>
       <li class="active">
           <a href="">Item</a>
       </li>
       <li>
           <a href="">Item</a>
       </li>
   </ul>
</nav>

columns

@mixin columns() { ... }

Description

The COLUMNS mixin makes it so that immmediate child elements appear as columns. It assumes the use of < hr > elements to create visual gutters that are only visible while displayed as columns.

Sass Parameters

None.

Emmet

.columns>div+(hr+div)*2

View Demo

Example

HTML

 <div class="columns">
     <div>
         <h2>A column</h2>
     </div>
     <hr />
     <div>
         <h2>Another column</h2>
    </div>
</div>

dossier

@mixin dossier($gutter: 2rem, $photoWidth: 25%, $direction: row) { ... }

Description

The DOSSIER mixin displays an individual’s biography and photograph. If the photo portion is omitted, the biography element flexes to fill the space.

Sass Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

gutter between content and image

Measure2rem
$photoWidth

width of image

Measure25%
$direction

whether to put the images on the left or right

Directionrow

Emmet

.dossier>div>(.photo>img^.bio>h2{Lorem Ipsum}+p.title{Vice President}+p{Lorem20})

View Demo

Example

HTML

<div class="dossier">
    <div>
        <div class="photo">
            <img src="../img/dossier-1.jpg" alt="Jane Doe" />
        </div>
        <div class="bio">
            <h2>
                Jane Doe
            </h2>
            <p class="title">
                Executive Vice President of Operations
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quidem, soluta quisquam est velit praesentium ex, vero perspiciatis ad autem sapiente. Sed amet et voluptates, inventore corrupti quas assumenda nemo quibusdam magni officia ut, aperiam quo, quae! Eos, unde ea placeat ab earum molestias a veritatis architecto quas.
            </p>
            <p>
                Magnam quidem, soluta quisquam est velit praesentium ex, vero perspiciatis ad autem sapiente. Sed amet et voluptates, inventore corrupti quas assumenda nemo quibusdam magni officia ut, aperiam quo quae! Eos unde ea placeat.
            </p>
        </div>
    </div>
</div>

dropdown

@mixin dropdown() { ... }

Description

The DROPDOWN mixin allows for single-column dropdown menus. The mixin is called from the nav.primary element, not a list item.

Sass Parameters

None.

Emmet

nav.primary>ul>li>a{link name}+.dropdown>>ul>li>(a{link name})*3

View Demo

Example

HTML

<nav class="primary">
    <ul>
        <li>
            <a href="">Maine</a>
            <div class="dropdown">
                <ul>
                    <li><a href="">Augusta</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

dropdown-mega

@mixin dropdown-mega() { ... }

Description

The DROPDOWN (mega) mixin allows for full-width mega dropdown menus. Call this mixin on a list item, not on nav.primary. Note that the simple dropdown component is a dependency of DROPDOWN (mega). The mega dropdown is positioned to header.primary instead of its parent list item.

Sass Parameters

None.

Emmet

nav.primary>ul>li.mega>a{link name}+.dropdown>.menu(div*3)

View Demo

Example

HTML

<nav class="primary">
    <ul>
        <li class="mega">
            <a href="">Maine</a>
            <div class="dropdown">
                <div class="menu">
                    <div>
                        <ul>
                            <li><a href="">Augusta</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</nav>

features

@mixin features($gutter: 3rem) { ... }

Description

FEATURES holds three modules in one row. Powered by flexbox, this allows for a bottom alignment of an optional button. Use the $gutter variable to pass a preferred gutter width.

Sass Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

gutter between features

Measure3rem

Emmet

.features>(div>(.icon>img)+h4+p+a)*3

View Demo

Example

HTML

<div class="features">
    <div class="feature">
        <div class="icon"><img src="" alt=""></div>
        <h4></h4>
        <p></p>
        <a href=""></a>
    </div>
</div>

listing

@mixin listing() { ... }

Description

LISTING shows a listing of entries. It includes an optional search form with filters. Remove the search form elements for a simple list.

Sass Parameters

None.

Emmet

.listing>(form>.search>(.text>label+input^.submit>label+input[type="submit"]))+p.guide{Showing 10 of 20}+ul>li>a>h2{Listing headline}+a.meta+div.summary>p{Lorem Ipsum}

View Demo

Example

HTML

<div class="listing">
    <form>
        <div class="search">
            <div class="text">
                <label for="search">Search the website</label>
                <input id="search" type="search" placeholder="Search using keywords (CSS tips, Amazon EC2)" />
            </div>
            <div class="submit">
                <input type="submit" value="Search" />
            </div>
        </div>
        <div class="filters">
            <label>
                <input type="checkbox"><span>case study</span>
            </label>
            <label>
                <input type="checkbox"><span>event</span>
            </label>
        </div>
    </form>
    <p class="guide">
        Showing results 1–10 for <strong>responsive design</strong>
    </p>
    <ul>
        <li>
            <h2>
                <a href="">Responsive Web Design roundup for 2016 | Imarc </a>
            </h2>
            <a class="meta" href="">http://imarc.com/blog/responsive-web-design</a>
            <div class="summary">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta obcaecati voluptatem facere alias nisi sint aliquid a deserunt nostrum explicabo. Ipsa dicta possimus ipsam dignissimos culpa maiores amet eaque! Natus.
                </p>
            </div>
        </li>
     </ul>
 </div>

login

@mixin login() { ... }

Description

The LOGIN mixin is a basic implementation of a login module that includes an email input, password input, submit button, forgot password link, and remember me checkbox.

Sass Parameters

None.

Emmet

.login>form>(div.text>label{Username}+input)+(div.password>label{Password}+input[type="password"])+div.actions>(.submit>button{Login})+(label>input[type="hidden"]+input[type="checkbox"])+a{Forgot Your Password?}

View Demo

Example

HTML

<div class="login">
    <form action="">
        <div class="text">
            <label for="username">Username</label>
            <input type="text" name="username" />
        </div>
        <div class="password">
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div class="actions">
            <div class="submit">
                <button type="submit">Login</button>
            </div>
            <label for="remember_me">
                <input type="hidden" name="remember_me" value="no" />
                <input type="checkbox" name="remember_me" value="yes" id="remember_me" />
                Remember me
            </label>
            <a href="#">Forgot Your Password?</a>
        </div>
    </form>
</div>

mobileNavigation

@mixin mobileNavigation() { ... }

Description

The mobile navigation mixin is missing any kind of sass, docblock style documentation within _components.scss. Sorry.

Sass Parameters

None.

View Demo

pagination

@mixin pagination() { ... }

Description

PAGINATION provides a navigational unordered list of pages. Often used in conjunction of a LISTING component.

Sass Parameters

None.

Emmet

nav.pagination>ul>(li.previous>a{Previous})+(li*2>a)+(li.active>a)+(li*2>a)+li.next>a{Next}

View Demo

Example

HTML

<nav class="pagination">
    <ul>
        <li class="previous"><a href=""><span class="sr-only">Previous</span></a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li class="active"><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li><a href="">6</a></li>
        <li class="next disabled"><a href=""><span class="sr-only">Next</span></a></li>
    </ul>
</nav>

progress

@mixin progress() { ... }

Description

PROGRESS provides a basic, pill-style progress nav bar like you might find as part of an ecommerce or registration process.

Sass Parameters

None.

Emmet

nav.progress>ul>(li.complete*2>a)+(li.active>a)+(li*2>a)

View Demo

Example

HTML

<nav class="progress">
    <ul>
        <li class="complete"><a href="">Nav Item 1</a></li>
        <li class="complete"><a href="">Nav Item 2</a></li>
        <li class="active"><a href="">Nav Item 3</a></li>
        <li><a href="">Nav Item 4</a></li>
        <li><a href="">Nav Item 5</a></li>
        <li><a href="">Nav Item 6</a></li>
    </ul>
</nav>

sticky-element

@mixin sticky-element() { ... }

Description

The STICKY-ELEMENT component works with (sticky-element.plugin.js) to fix an element at a certain point in the viewport. Has options for offsets, duration, until, etc. It does not have a SASS mixin.

Sass Parameters

None.

Emmet

View Demo

sticky-header

@mixin sticky-header() { ... }

Description

The STICKY-HEADER mixin works with (sticky-header.plugin.js) to hide a site’s header.primary element as you scroll down page. The element reappears when the user scrolls up the page. This is responsive as the "top" value is dynamically set in the js based on the height of the header. Top padding is also added to the body dynamically via js so that the header doesn't overlap any content.

Sass Parameters

None.

Emmet

header.primary

View Demo

tabs

@mixin tabs() { ... }

Description

TABS allows for the showing and hiding of panels via an associated tab navigation.

Sass Parameters

None.

Emmet

.tabs>(nav>ul>li*4)>.panel.active+(.panel*3)

View Demo

Example

HTML

<div class="tabs">
    <nav>
        <ul>
            <li class="active">Patriots</li>
            <li>Bruins</li>
            <li>Celtics</li>
        </ul>
    </nav>
    <div class="panel active">
        <p>
            The New England Patriots are a professional American
            football team based in the Greater Boston area.
        </p>
        <p>
            Since the arrival of head coach Bill Belichick in 2000,
            the Patriots have become one of the most successful teams.
        </p>
    </div>
    <div class="panel">
        <p>
             The Boston Bruins are an American professional
             ice hockey team based in Boston, Massachusetts.
        </p>
        <p>
            The Bruins have won six Stanley Cup championships,
            tied for fifth most of all-time with the Blackhawks.
        </p>
    </div>
</div>

testimonial

@mixin testimonial($gutterWidth: 4rem) { ... }

Description

The TESTIMONIAL mixin is a basic implementation of a testimonial design. Add in an optional image wrapped in an element with a class of .asset.

Sass Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutterWidth

gutter between asset and quote

Measure4rem

Emmet

div.testimonial.asset>div.container>(div>img)+blockquote+p

View Demo

Example

HTML

<div class="testimonial">
    <div class="container">
        <div class="wrapper">
            <div class="asset">
                <img src="http://dummyimage.com/900x900/ff675b/fff.png&text=Company logo or headshot" alt="" />
            </div>
            <div>
                <blockquote>
                    It was an honor to work with Imarc. They demonstrated, very early on, a true ability to understand our business and solve for our needs—create a new intranet site, one that would increase engagement and foster community. Imarc delivered incredible results, taking our former site to new heights. We couldn’t be happier with their work and subject matter expertise.
                </blockquote>
                <p>
                    – John Smith, Chief Marketing Officer, Acme Co
                </p>
            </div>
        </div>
    </div>
</div>

tiles

@mixin tiles($gutter: 2rem, $columns: 4) { ... }

Description

TILES helps you create an equal-width column grid layout without the use of row wrappers. Tiles is similar to the Features component, except that TILES’ items can wrap. Powered by flexbox, you can pass in a $gutter width and $column amount. Note that the specified $column amount only is respected at the large breakpoint. Tiles will automatically two-up your items at the medium breakpoint, and stack them at the small breakpoint.

Sass Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

vertical gutter between tiles

Measure2rem
$columns

number of columns while min-width is $large

Number4

Emmet

.tiles>(.tile>p{Lorem Ipsum})*2

View Demo

Example

HTML

<div class="tiles">
    <div class="tile">
        <div>
            <h4>One Great Headline</h4>
            <p>Lorem ipsum dolor</p>
        </div>
    </div>
    <div class="tile">
        <div>
            <h4>One Great Headline</h4>
            <p>Lorem ipsum dolor</p>
        </div>
    </div>
    <div class="tile">
        <div>
            <h4>One Great Headline</h4>
            <p>Lorem ipsum dolor</p>
        </div>
    </div>
</div>