mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-04 04:47:23 +02:00
Code Issues Releases Wiki Activity
Page: Utilities and helper classes
Pages
Base Buttons Carousel Collapse Documentation Extra utilities and experimental classes Flavors Forms Grid Home Labels and Badges Modals Navigation Navigation: Dropdown Progress Bars Spinners Tables Tabs Utilities and helper classes
Clone
2
Utilities and helper classes
Angelos Chalaris edited this page 2016-10-07 16:07:16 +03:00
Table of Contents

The provided utilities and helper classes give the users full control over their naming and styling and can be easily toggled on or off, as they are all built using mixins. All of these can be found in the _utility.scss partial file.

Image styling

Images can be styled with a custom class to allow them to look like thumbnails.

Definition

make-thumb(
	$thumb-name, 
	$thumb-padding, 
	$thumb-border, 
	$thumb-border-radius,
            $thumb-hover-color)

Parameters

  • $thumb-name : The class name for the thumbnail style.
  • $thumb-padding : The padding between the image and the border.
  • $thumb-border : The style of the thumbnail's border.
  • $thumb-border-radius : The border radius of the thumbnail.
  • $thumb-hover-color : The color of the thumbnail's border when hovering over it.

Notes:

  • [1] : This style only applies to img elements with the class specified in $thumb-name.

Border styling

Custom borders can be added to any element using the provided mixins that generate custom classes for generic borders and border radiuses.

Generic border definition

make-border-generic(
	$border-generic-name)

Parameters

  • $border-generic-name : The class name for the generic border.

Notes:

  • [1] : The border style uses rgba to create a 1px solid border with 0.25 opacity around an element, which makes it look properly bordered. Might be incompatible with older browsers.
  • [2] : The border style overwrites any border style as it uses !important, exercise caution when using.

Generic border radial defintion

make-border-radial-style(
	$border-style-name, 
	$border-style-radius)

Parameters

  • $border-style-name : The class name for the generic border radius style.
  • $border-style-radius : The radius for the generic border radius style.

Notes:

  • [1] : The border style overwrites any border style as it uses !important, exercise caution when using.

Text styling

Contextual text or contextual backgrounds can be generated using the provided mixins.

Contextual text defintion

make-colored-text(
	$colored-text-name, 
	$colored-text-color)

Parameters

  • $colored-text-name : The class name for the contextual color text style.
  • $colored-text-color : The color for the contextual color text style.

Notes:

  • [1] : The contextual color text style overwrites any text color as it uses !important, exercise caution when using.

Contextual background definition

make-colored-bg-text(
	$colored-bg-text-name, 
	$colored-bg-text-color)

Parameters

  • $colored-bg-text-name : The class name for the contextual background text style.
  • $colored-bg-text-color : The background color for the contextual background text style.

Notes:

  • [1] : The contextual background text style overwrites any text color as it uses !important, exercise caution when using.

Utility symbols

Carets and close signs can be easily created using the provided mixins.

Caret definition

make-caret-down(
	$caret-name, 
	$caret-size, 
	$caret-color)

Parameters

  • $caret-name : The class name for caret utility class.
  • $caret-size : The size of the caret utility element. [1]
  • $caret-color : The color of the caret utility element.

Notes:

  • [1] : The caret is built using the border trick. Sizes can be specified in either px or em, but they might take a bit of tweaking to get right.

Close definition

make-close(
	$close-name, 
	$close-color, 
	$close-cursor, 
	$close-font-size, 
	$close-font-weight, 
	$close-hover-color)

Parameters

  • $close-name : The class name for close utility class.
  • $close-color : The color of the close utility element.
  • $close-cursor : The cursor for the close utility element.
  • $close-font-size : The font-size for the close utility element.
  • $close-font-weight : The font-weight for the close utility element.
  • $close-hover-color : The color of the close utility element when hovering over it.

Helper classes

mini.css provides a handful of helper classes for quick floats, centering content blocks, clearfix and hidden elements.

Quick floats definition

make-drags(
	$drag-left-name, 
	$drag-right-name)

Parameters

  • $drag-left-name : The class name for left drags.
  • $drag-right-name : The class name for right drags.

Notes:

  • [1] : These classes use !important to set the float properties, exercise caution when using.

Center content block definition

make-center-block($center-block-name)

Parameters

  • $center-block-name : The class name for center block class.

Clearfix definition

 make-clearfix($clearfix-name)

Parameters

  • $clearfix-name : The class name for the clearfix class.

Hidden definition

make-hidden($hidden-name)

Parameters

  • $hidden-name : The class name for hidden elements.

Notes:

  • [1] : This class uses !important to set the display property, exercise caution when using.

Remarks

  • Many of the classes created by the above mixins use !important to overwrite other attributes, be very careful when using them.

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.