Utilities

Close Button

To unify our websites there is prepared generic close button for dismissing content like modals and popups. Include in development aria-label with the correct translation for screen readers.

<button type="button" class="close" aria-label="Close">
    <i class="icon-cross"></i>
</button>

Cursor

Generic cursor classes allow to quickly change a cursor behavior without creating dedicated classes in code for elements, which need that type of cursor.

The following table presents the values for the CSS property cursor :


`.clickable`	pointer
`.not-allowed`	not-allowed

<div class="clickable"></div>
<div class="not-allowed"></div>

Display

Generic display classes allow to quickly change property without creating dedicated classes in code for elements, which need that type of cursor.

The following table presents the values for the CSS property display :


`.block`	block
`.inline`	inline
`.inline-block`	inline-block

Block

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

Inline

<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>

Inline-block

<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>

Float

Change how an element is positioned within the layout using float and clear generic classes.

Using float classes remember to add .clearfix to the parent element.

The following table presents the CSS property float:


`.float-none`	none
`.float-left`	left
`.float-right`	right

<div class="clearfix">
    <div class="float-none"></div>
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

Image

Images are made responsive with .img-responsive thanks that class the image will be scaling with the parent element.

<div>
    <img class="img-responsive" src="kss-assets/image/placeholder_gray_200x200.png" alt="...">
</div>

Link

There is the possibility to add fancy animation to the links by using class link to the <a> tag.

Example

<a class="link">Example</a>

Position

Change an element’s position using generic positioning classes.

<div class="relative">
    <div class="absolute"></div>
</div>

Prevent events

Generic utilities class no-events makes that the element is not the target of pointer events.

<input class="no-events btn btn-primary" type="button" onclick="Alert(Euroflorist.com);" value="Click on me">