ro:Kit

ro:Kit Buttons

Buttons, buttons, buttons! So many buttons to choose from and they're all so satisfying to click on.

Go ahead click on a few. They don't do anything - they're here just for the show.

Button Class

You can turn any HTML element into a button by adding .btn attribute to it. However, for the sake of semantic code I would recommend adding .btn only to <button> and <a> tags.

Styling

You can further style your new button by adding text-color, background, gradient and / or button style classes like .flat .raised .outline

Size Modifiers

The syntax of size class is .btn-[btn-size] with following button sizes xxs, xs, sm, md, lg, xl, xxl to change the size of your button. The default size is md and each subsequent and preceding size is modified by factor of 1.25.

Responsive Modifiers

You can add responsive classes to change the size of your button when reaching a certain breakpoint.

The syntax of responsive class is .btn-[breakpoint]-[btn-size] with following button sizes xxs, xs, sm, md, lg, xl, xxl and breakpoints sizes.

ro:Kit Button Examples

<button class="btn raised gradient-secondary-primary btn-lg-xxl">btn-md-xxl</button>

The button below will increase size to .btn-xxl once screen size exceeds the lg breakpoint (992px).

Tip: Hover over the buttons to see the classes used to create them

	Default	Primary	Secondary	Warning
Flat
Default
Raised
Outline

	Danger	Success	Disabled	Link
Flat				Link
Default				Link
Raised				Link
Outline				Link

	Primary	Secondary	Success	Warning	Danger
Primary
Secondary
Success
Warning
Danger

ro:Kit Navgiation

Every site needs navigation - ro:Kit provides you a simple, CSS only, menu driven navigation bar that can collapse on breakpoints. Simply use the template below to get started.

Navigation Classes

Use .nav-<breakpoint> to set a breakpoint below which the navigation collpases into block or flex if .nav-flex is applied. When the navigation is collpased, the nested dropdown content will also be displayed.

Navigation Code Template

<nav class="[?nav-flex|?nav-light|?center] [?nav-<breakpoint-size>]"> <a href="branding">My Branding</a>  <ul class="hover-[color:text = primary | secondary | danger | warning | success | code | dark | light]"> <li><a href="" class="active">Link 1</a></li> <li><a href="">Link 2</a>  <ul> <li><a href="">Sublink 1</a></li> <li><a href="">Sublink 2</a></li> </ul> </li> <li><a href="">Link 3</a></li> </ul> </nav>

Navigation Example

ro:Kit Jumbo

You want to make something stand out on your website? Use a jumbo! ro:Kit jumbo supports covers, which can be generated with bg-image mixin. Golden ratio placement of content (38.2%) left and right is supported. You can place an image element in the jumb and it will be resized to match width, however using covers will produce better results. You can use any ro:Kit size, color, gradient, fontscale and whitespace modifiers on the jumbo.

Jumbo Template

<div class="jumbo [?golden-ratio-left|?golden-ratio-right]">
    <!-- Optional Cover -->
    <div class="cover-class"></div>
    <!-- Optional Overlay -->
    <div class="overlay overlay-gradient-[top|left|bottom|right|]"></div>
    <!-- Optional Image -->
    <!-- Will resize image to fit the jumbo width-->
    <img src="img/myimage.png" />
    <div class="content">
        <!-- place your content here -->
    </div>
</div>

How to Use an Image as Jumbo Background

Use bg-image($img-url, $class-name) mixin located in components/_jumbo.scss to creat your own jumbo class with an image url.

Example below was generated with following code @include jumbo.bg-image("../img/Goriska_brda.jpg", "goriska-brda");

ro:Kit Tooltips

Tooltips are fun! Ro:Kit makes it very easy to add a tooltip to your site.

Just add data-tooltip-[top|left|bottom|right]="lorem ipsum" to your HTML tag and the tooltip will appear when hovered over.

If you want to display the tooltip without hovering over the element just add class="static-tooltip" to the tag with tooltip data attribute.

Caveat: when adding tooltips to Ro:Kit buttons (or any elements using ::before and ::after pseudo selectors) you should warp those elements in an inline-block element and add the tooltip data attribute to the wrapper.