Container

We're using Bootstrap container and it's required when using our default grid system. Our .container is a mix between Bootstraps .container and .container-fluid. Our .container takes 100% of width on all breakpoints except xl and has extra padding on different breakpoints.

Grid system

We're using Bootstrap 4 grid system and flexbox utility so check the docs.

Do not modify anything on any grid component by adding extra CSS or adding any other class than column classes provided in the grid. IE: don't add .d-flex on a col to make the content inside vertically aligned. Add classes to column content and let the columns do the layout work.

Color utilities

Type utilities

Set font style properties and font alignment using utility classes.

Link Stretched

Inspired by Bootstrap Stretched link utility. To use add .link-stretched to a link to make its ::after pseudo element stretch. The ::after element will stretch to fill the content's of the first parent element that has position: relative; property set.

The example is using grid columns which have position: relative; set by the grid framework so the "Read more" link will stretch to fill the whole column vertically and horizontally.

Background Breakout

Add .bg-breakout class to break out of the .container.

The .bg-breakout creates a ::before pseudo element which has it's width stretched to 100% of the view port with width: 100vw and is centered with negative right and left margins in vw and adding 50% to right and left properties. Because vw doesn't include the scrollbar we have to add overflow-x: hidden; on the parent element otherwise when the page gets a vertical scrollbar it will also get an horizontal scrollbar.

For more info on this technique check this link.

For more info on the horizontal scrollbar issue check this link.

NOTE: The utility only creates the ::before element and set's background-color: inherit; property but it doesn't add any color. To add a background color use one of the color utilities or add the property in your CSS.

Type

Font levels

The scale also provides classes which you can use for type sizing. The classes are defined using utilities/headings.scss. Check $grid-heading-setup in common/variables.scss for a list of classes and sizes.

Titles

To use font levels in titles with bottom margin use .title-- prefix istead of .fl-- followed by the font level.

Headings

Headings also have some margins applied to them.

Body text

Links

Add classes to give links different styling.

Lists

Lists unstyled

Use .list-unstyled or extend %list-unstyled to get an unstyled list. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Lists styled

Use .list-styled to add styling too lists. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Only <ul> and <pl> lists are supported.

Blockquote

To add a source of the quote add a <footer> or <cite> in the <blockquote>.

Horizontal rule

Use to separate content sections.

NOTE: don't use it to separate <div> elements or some similar layout actions. Use border instead or if you have to add an element you can use .separator class on a <div> or <span> or any other element.

Abbreviations

Other text inline elements

.mark and .small classes are also available to apply the same styles as <mark> and <small>.

Accent

Helper to highlight text.

Buttons

Use .btn class to reset button styling on <button>, <input> or <a> and use the modifier classes to add color styling. Always use <button> element if you are writing the markup.

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

You can also use the .btn class on other elements but some interaction that is based on pseudo selectors (mainly :focus) will be different.

Pseudo selectors :focus and :active are styled but you also have classes (.focus and .active) to trigger the appearance programmatically.

Button variants

.btn--alpha

.btn--beta

.btn--gama

.btn--delta

.btn--epsilon

.btn--zeta

Button disabled

Add disabled attribute to <button> or .disabled class to <a>. All the buttons will look the same in their disabled state no mater the variant.

Button loading

You can use .loading class on all buttons if you need to add a loading feedback after user clicks on a button.

Button large

Button with larger spacing.

Button small

Button with smaller spacing.

Button icons

Add <svg> icons in buttons. You can add it in all button types or sizes.

NOTE: Only <button> and <a> can contain <svg> elements since <input> elements are self-closing (empty elements) which can't contain other HTML elements.

NOTE: If you want to use the icon next to the text add a modifier class btn--icon to the button so that you get a margin on the svg element.

Button block

Use .btn--block for full width buttons.

Alerts

Notices

Default notice

Notice with link

Cards

Card default class

Tips & tricks, Inspirations

Ad magna ut tempor commodo

Ahab

July 7, 2014

Inspirations

Incididunt et veniam excepteur

Ishmael

May 5, 2015

Reviews

Est occaecat amet ex

Starbuck

June 6, 2017

We are using grid to arrange the elements in the cards

Card modifier class .card--alpha

Hitne usluge

Ad magna ut tempor commodo

Sponsored

Years founded

1966

Type

Single LLC

Primary service

1966

Secondary service

Single LLC

About us

With more than 900 employees, ATP architects engineers is one of the largest offices for integrated planning in Europe. Founded in Innsbruck in 1951 as a pure architecture office, ATP has been developing an interdisciplinary partnership since 1976, which accompanies building owners as...

Hitne usluge

Incididunt et veniam excepteur

Sponsored

Years founded

1966

Type

Single LLC

Primary service

1966

Secondary service

Single LLC

About us

With more than 900 employees, ATP architects engineers is one of the largest offices for integrated planning in Europe. Founded in Innsbruck in 1951 as a pure architecture office, ATP has been developing an interdisciplinary partnership since 1976, which accompanies building owners as...

Hitne usluge

Est occaecat amet ex

Sponsored

Years founded

1966

Type

Single LLC

Primary service

1966

Secondary service

Single LLC

About us

With more than 900 employees, ATP architects engineers is one of the largest offices for integrated planning in Europe. Founded in Innsbruck in 1951 as a pure architecture office, ATP has been developing an interdisciplinary partnership since 1976, which accompanies building owners as...

Boxes

Tips & tricks, Inspirations

Ad magna ut tempor commodo

7 July 2014 3 min read

Read more

Inspirations

Incididunt et veniam excepteur

5 May 2015 7 min read

Read more

Reviews

Est occaecat amet ex

6 June 2017 9 min read

Read more

Box without image

Box modifier .box--alpha

Tips & tricks, Inspirations

Ad magna ut tempor commodo

Inspirations

Incididunt et veniam excepteur

Reviews

Est occaecat amet ex

Box modifier .box--beta

Tips & tricks, Inspirations

Ad magna ut tempor commodo

7 July 2014 3 min read

Inspirations

Incididunt et veniam excepteur

5 May 2015 7 min read

Reviews

Est occaecat amet ex

6 June 2017 9 min read

Rectangle

Navs

Add .nav class to a <ul> that contains a list of links to add layout and styling properties.

Use .active and .disabled classes to style the links in those situations. NOTE: the classes get added to the <li> element and not the <a>.

NOTE: This component is built to be compatible with WordPress wp_nav_menu(); function which has an opinionated markup. To get around that we're not adding any classes to the containing elements and are using element and child selector selectors to style them (IE: .nav > li). That's also the reason why .active and .disabled classes are added to the <li> element instead of the <a> element.

Bold nav

Add .nav--bold for bold nav.

Stacked nav

Add .nav--stacked for vertical nav.

Primary nav

Add .nav--primary for primary nav.

Secondary nav

Add .nav--secondary for secondary nav.

Inverted nav

Add .nav--inv for inverted nav.

NOTE: Combine nav--inv with nav--stacked because nav--inv has no horizontal padding, only vertical.

Nav group

Pagination

The pagination is built to work with WordPress paginate_links(); function (documentation) which means we had to make some exceptions from our default coding standards:

• Class names don't follow BEM.
• We wrap the output of paginate_links(); inside a <nav> with the class of .pagination.
• We have to use an element selector to style the <ul> since .page-numbers class is applied to both <ul> and the element in <li> (IE: .pagination ul).
• We have to use an element selector to style the <li> since paginate_links(); doesn't add any class to <li> (IE: .pagination ul li).
• Since .page-numbers gets added to .dots & .current which are a <span> we are using an overqualified selector (a.page-numbers) to give appropriate styling (IE: :hover state) to only <a> elements.

To make the pagination more accessible:

• Wrap paginate_links(); inside a <nav> element.
• Add a descriptive aria-label to the <nav> element.
• If using only icons for .next and .prev pagination elements add aria-hidden="true" to the icon and add a .sr-only text that describes the action.

Forms

Use .form-control to style all input elements except where otherwise noted.

File

For file, use .form-control-file.

NOTE: this is not a modifier of .form-control.

Disabled forms

Add the disabled attribute on an input to prevent user interactions and change the styling or add disabled to a <fieldset> to disable all fields.

NOTE: type="file" and type="range" don't have any special styling for disabled except the browser defaults.

Readonly

Use attr readonly to disable interactions and change the style. Also use .form-control--text to make a readonly field look like plain text.

Checkbox and radio

Each checkbox and radio <input> and <label> pairing is wrapped in .form-check.

Browsers that support appearance property will get the styled checkbox and the ones that don't support it will get the default browser styled checkbox. Check this section in Internet Explorer 11 to se how the default fallback looks like.

Inline checkbox and radio

Inline checkbox and radios are not supported in Internet Explorer (bug). If you need that option to work in Internet Explorer 11 use the grid and .col-auto to achieve a similar result or add min-width to .form-check--inline.

Checkbox and radio with a link

Useful for adding links to terms in checkbox and similar.

Additional helper elements

• Use .form-block for a wrapper for each input element that adds bottom margin.
• <label> for input get's styled via element selector but add .form-label for additional styling required for form validation.
• Use .form-text for additional text under input elements for feedback or instruction for the user.
• Hide <label> with .sr-only to make it accessible.
• You can also use Bootstrap spacing utility classes on labels or add additional elements you need to add.

Form validation

Add .is-valid or .is-invalid class to .form-block.

NOTE: Requires all form elements to be wrapped in .form-block because we are changing the appearance of some of the additional form elements based on the form field validation state.

Use the buttons bellow to check all the states.

Switch

Page navigation

NOTE: If you want your navigation to be at the top of the screen(fixed on the top), add the class .page-nav--sticky. In that case, you must also add the attribute data-scroll-offset="#page-nav" because the scroll-to script will then measure the height of the navigation itself.

About

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Company info

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Locations

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Brands

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pills

Map

This table shows the county ids and their names.

To use the map, call the component map and pass it a array with the keys and values of the desired counties.

Gallery Lightbox

View more

Banner

Default banner.

We use utility classes for spacing, sizing fonts and descriptions within the banner.

We also use the Boostrap grid if we need to center or move the content of the banner from the edge.

Tabs

We're using a modified version of Bootstrap tabs. The most notable change is that class names have been changed (both in CSS and JavaScript) to use BEM. One more difference is that we're not using navs component for tab controls but a separate component .tab-control.

Use grid classes for layout in .tab-control. Add .no-gutters on .row or you'll get gaps between .control__item elements.

The tab you want to be visible on initial view has to have .active class on both .tab-content__item and .tab-control__item.

NOTE: .tab-control looks the same as underlined navigation full but it's not related to it in any way. We had to separate those components because the Bootstrap tabs JavaScript can't handle the markup that our navs component uses.

Tooltips

Searchbox

Add a class .searchbox to get a box with shadow and padding.

Scrollbar

Wrap elements within a class .scrollbar-container to get custom scrollbar.

Wrap elements within a class .scrollbar-container--sm to get small custom scrollbar.