Utility

A collection of useful utility classes to style your content.


Container

Add the .container class to a block element to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.

To center the container, use the .container-center class. For any other block element, you additionally need to apply a width.

Usage

  • Class Description
    .container Applies a max-width to the element.
    .container-center Centers an element within it's container.
  • Centered block element
  • <div class="col-6-12-medium container-center">...</div>

Clearing and floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Usage

  • Class Description
    .float-left Float the element to the left.
    .float-right Float the element to the right.
    .clearfix Add this class to a parent container to clear floats.
  • Floating Left
    Floating Right
  • <div class="clearfix">
        <div class="float-right">...</div>
        <div class="float-left">...</div>
    </div>

Alignment of images and objects

Align images or other elements with spacing between the text and the element.

Usage

  • Class Description
    .align-left Floats the element to the left and creates right and bottom margin.
    .align-right Floats the element to the right and creates left and bottom margin.
    .align-center Centers the element and creates bottom margin.
    .align-left-medium Only affects device widths of 768px and higher.
    .align-right-medium Only affects device widths of 768px and higher.
  • 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.

  • <p class="clearfix">
        <img class="align-right-medium" src="sample.jpg">
        ...
    </p>
    
    <p class="clearfix">
        <img class="align-left" src="sample.jpg">
        ...
    </p>

Vertical alignment

To align objects vertically, you need to create a parent container to which the object itself will be aligned.

NOTE The object you align needs to have a width or max-width that is smaller than its parent container.

Usage

  • .vertical-align .vertical-align-middle .vertical-align-bottom
    Class Description
    .vertical-align Add this class to the parent container. This container needs a specific height.
    .vertical-align-middle Add this class to the child element to center your content.
    .vertical-align-bottom Add this class to the child element to align your content to the bottom.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="vertical-align">
        <div class="vertical-align-middle"> ... </div>
    </div>
    <div class="vertical-align">
        <div class="vertical-align-bottom"> ... </div>
    </div>

Height

Several classes allow you alter the height of an element:

Usage

  • Class Description
    .height-1-1 When applied to the <html> and <body> elements, this class will extend your styles to the height of the document.
    .height-viewport Using the vh unit of measurement, this class will extend the height of the element to that of the viewport.
  • <html class="height-1-1">
    	<head>
    		...
    	</head>
        <body class="height-1-1">
        	<!-- The page is now at least the height of the document -->
        </body>
    </html>
    
    <div class="height-viewport">
    	<!-- This element will be the same height as the screen or viewport -->
    </div>

Responsive Objects

Images in Clique.UI adapt to the width of their parent container by default. If you want to apply the responsive behavior to media elements or iframes, just add one of the following classes.

Usage

  • Class Description
    .responsive-width Adjusts the object's width according to its parent's width, maintaining the aspect ratio.
    .responsive-height Adjusts the object's height according to its parent's height, maintaining the aspect ratio.
  • <div style="height: 100px;">
    	<img class="responsive-height" src="sample.jpg" width="600px" height="900px">
    </div>
    
    <div style="width: 100px;">
    	<img class="responsive-height" src="sample.jpg" width="900px" height="600px">
    </div>

Margin

Add one of the following classes to add spacing to block elements.

Usage

  • Class Description
    .margin Adds the same top and bottom margins as a paragraph usually has.
    .margin-top Adds top margin.
    .margin-bottom Adds bottom margin.
    .margin-left Adds left margin.
    .margin-right Adds right margin.
  • Margin
    Margin Top
    Margin Bottom
    Margin Left
    Margin Right
  • <div class="margin">...</div>
    <div class="margin-top">...</div>
    <div class="margin-bottom">...</div>
    <div class="margin-left">...</div>
    <div class="margin-right">...</div>

Larger margin

Add one of the following classes to add larger spacing to block elements.

Class Description
.margin-large Adds large top and bottom margin.
.margin-large-top Adds large top margin.
.margin-large-bottom Adds large bottom margin.
.margin-large-left Adds large left margin.
.margin-large-right Adds large right margin.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Class Description
.margin-small Adds small top and bottom margin.
.margin-small-top Adds small top margin.
.margin-small-bottom Adds small bottom margin.
.margin-small-left Adds small left margin.
.margin-small-right Adds small right margin.

Remove margin

Add one of the following classes to remove spacing from block elements.

Class Description
.margin-remove Removes all margins.
.margin-top-remove Removes top margin.
.margin-bottom-remove Removes bottom margin.

Auto margin

To add spacing to stacking elements, for example inline elements that wrap on smaller vieports, just add the data-margin attribute to their parent container. It will automatically add the .margin-small-top to the lower element.

NOTE By default, the data attribute adds the .margin-small-top class to stacking elements. To apply a bigger margin, just add the {cls:'margin-top'} option.

Usage

  • <p data-margin>
        <button>...</button>
        <button>...</button>
    </p>

Border radius

To add rounded corners to an element, like an image, just add the .border-rounded. To a apply a circled shape, add the .border-circle class.

Usage

  • <!-- For rounded radius -->
    <img class="border-rounded" src="images/placeholder.svg">
    
    <!-- For circular radius -->
    <img class="border-circle" src="images/placeholder.svg">

If a link should not have the default link color, just add the .link-reset class to the anchor element or the parent element. The anchor element will then inherit the color of it's parent (unless specified, that of the body). This class also removes the text-decoration: underline; on hover and focus.

Usage


Scrollable box

Add the .scrollable-box class to create a panel-like box which has a max-height and provides a vertical scrollbar.

Usage

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper quam nec lectus gravida fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque accumsan ex quis porta mattis. Nunc posuere, sem a dignissim gravida, magna augue eleifend purus, luctus facilisis est nibh quis erat. In vitae eros vitae magna vulputate venenatis. Etiam tempor orci id congue vehicula. Duis varius at metus nec volutpat. Nullam id pellentesque libero. Proin malesuada commodo arcu sit amet tincidunt. Curabitur hendrerit porta nisl vitae varius.

    Nulla feugiat mi velit, et scelerisque ante blandit in. Suspendisse laoreet sapien at feugiat maximus. Vivamus facilisis efficitur neque, sit amet mattis diam malesuada faucibus. Aliquam at bibendum dui. Sed eu nunc eu urna feugiat varius a non justo. Integer aliquet ligula vel massa congue, sed sodales justo tincidunt. Aliquam sed turpis tincidunt, aliquam dui eget, eleifend elit. Vestibulum id enim ut nulla viverra vulputate sed eu velit. Aliquam erat volutpat. Sed egestas finibus consequat. Donec porta ut augue a tincidunt.

    Nulla fermentum quis orci a cursus. Etiam a porta velit, ac congue risus. Sed dictum, enim ornare molestie venenatis, dolor dui varius dolor, ac maximus ipsum ipsum non lorem. Nunc cursus, diam non mattis tristique, turpis velit blandit risus, a lacinia dui neque ac odio. Pellentesque volutpat tortor eget nisl pretium, quis gravida neque porta. Fusce ut risus iaculis, luctus sem nec, tristique arcu. Mauris diam ex, suscipit quis aliquam in, commodo vel purus. Cras vulputate odio sit amet ante sollicitudin, ac pharetra leo vulputate. Cras felis risus, eleifend sit amet orci sollicitudin, condimentum tempus lectus. Sed at mi tincidunt, semper libero at, congue odio. Donec sollicitudin magna sapien, eu rutrum ex viverra vitae. Praesent vestibulum felis quis quam varius blandit. Nunc eu erat mattis, imperdiet enim ut, pulvinar mi.

    Fusce eu lectus justo. Nulla eget mauris sem. Cras nulla nibh, malesuada ut porttitor at, maximus sed dolor. Mauris varius purus enim, ut gravida nisi laoreet eget. Quisque eget dolor lobortis, sodales urna at, aliquet tellus. Nulla nec urna blandit, pellentesque mi ac, commodo enim. Donec at porttitor velit. Sed varius nisi eget dui laoreet, nec sagittis velit tincidunt. Donec rhoncus fringilla libero in dignissim.

    Aliquam ornare purus sit amet convallis sagittis. Cras eget laoreet magna. Maecenas diam leo, maximus a dui id, hendrerit bibendum diam. Curabitur mi enim, egestas eget facilisis non, accumsan eu lectus. Vestibulum dictum volutpat erat eget interdum. Aliquam in dapibus enim. Nunc finibus tempus scelerisque. Mauris dignissim tempus diam at molestie.

  • <div class="scrollable-box">
        ...
    </div>

Overflow container

To create a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself, just add the .overflow-container class to a <div> element. This comes in useful when having to handle tables on a responsive website, which at some point would just get too big.

Usage

  • Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
    Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
    Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
  • <div class="overflow-container">
        <table>
            ...
        </table>
    </div>

Position elements

Clique.UI provides a number of classes to position your content without having to add your own CSS.

Class Description
.position-top Positions an element absolute at the top.
.position-top-left Positions an element absolute at the top left.
.position-top-right Positions an element absolute at the top right.
.position-bottom Positions an element absolute at the bottom.
.position-bottom-left Positions an element absolute at the bottom left.
.position-bottom-right Positions an element absolute at the bottom right.
.position-cover Adds absolute positioning to an element and stretches it to cover the entire parent.
.position-relative Adds relative positioning to an element.

Display utilities

Add one of these classes to change the display properties of an element.

Class Description
.display-block Forces the element to behave like a block element.
.display-inline Forces the element to behave like an inline element.
.display-inline-block Forces the element to behave like an inline-block element.

Visibility utilities

Usage

  • Class Description
    .hidden Hides the element on any device.
    .hidden-touch Hides the element on touch devices.
    .hidden-notouch Hides the element on non-touch devices.
    .invisible Visually hides the element without affecting dom structure.
    .visible-hover Displays hidden content on hover using display: block. Add this class to the parent element.
    .visible-hover-inline Displays hidden content on hover using display: inline-block. Add this class to the parent element.
  • Hover me...
  • <div class="visible-hover">
        ...
        <div class="hidden">...</div>
    </div>

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set by LESS variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.

Class Small
(Phones)
up to 767
Medium
(Tablets)
768 to 959
Large
(Desktops)
960 and larger
.visible-small Visible Hidden Hidden
.visible-medium Hidden Visible Hidden
.visible-large Hidden Hidden Visible
.hidden-small Hidden Visible Visible
.hidden-medium Visible Hidden Visible
.hidden-large Visible Visible Hidden