mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 05:47:23 +02:00
Code Issues Releases Wiki Activity
Page: Extra utilities and experimental 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
1
Extra utilities and experimental classes
Angelos Chalaris edited this page 2016-09-14 13:37:29 +03:00
Table of Contents

The provided extra utilities and experimental 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.

Breadcrumbs

Breadcrumbs can be easily created in three different styles using the make-breadcrumbs mixin.

Definition

make-breadcrumbs(
	$breadcrumbs-name, 
	$breadcrumbs-style: 3)

Parameters

  • $breadcrumbs-name : The class name for the breadcrumbs style.
  • $breadcrumbs-style : The style of the breadcrumbs separator character. [1][2][3]

Notes:

  • [1] : $breadcrumbs-style accepts the values 1, 2 or 3. If an invalid value is supplied, it will be treated as 3.
  • [2] : The three provided styles are as follows:
    • $breadcrumbs-style == 1 : forward slash.
    • $breadcrumbs-style == 2 : greater than symbol.
    • $breadcrumbs-style == 3 : right angle symbol (default).
  • [3] : The value of $breadcrumbs-style can be omitted and will default to 3.

Containers

Customizable containers can be created using the provided mixin. Apart from the default make-generic-container mixin, two more are provided, one for alerts (which are close-button friendly) and one for panels which support headers.

Generic container definition

make-generic-container(
	$container-name, 
	$container-color, 
	$container-bg-color, 
	$container-border, 
	$container-border-radius, 
	$container-padding)

Parameters

  • $container-name : The class name for the generic container.
  • $container-color : The text color of the generic container.
  • $container-bg-color : The background color of the generic container.
  • $container-border : The border style of the generic container.
  • $container-border-radius : The border-radius of the generic container.
  • $container-padding : The content badding of the generic container.

Notes:

  • [1] : This mixin is also used for making alerts and panels.

Alert definition

make-alert(
	$alert-name, 
	$alert-color, 
	$alert-bg-color, 
	$alert-border, 
	$alert-border-radius, 
	$alert-padding, 
	$close-name)

Parameters

  • $alert-name : The class name for the alert.
  • $alert-color : The text color of the alert.
  • $alert-bg-color : The background color of the alert.
  • $alert-border : The border style of the alert.
  • $alert-border-radius : The border-radius of the alert.
  • $alert-padding : The content badding of the alert.
  • $close-name : The class name for the close utility. [1]

Notes:

  • [1] : The value of $close-name must match that of the class specified for close elements for the alert to work correctly.
  • [2] : This mixin uses make-generic-container to partially generate its CSS.

Panel definition

make-panel(
	$panel-name, 
	$panel-color, 
	$panel-bg-color, 
	$panel-border, 
	$panel-border-radius, 
	$panel-padding, 
	$panel-header-name, 
	$panel-header-color, 
	$panel-header-bg-color, 
	$panel-header-padding)

Parameters

  • $panel-name : The class name for the panel.
  • $panel-color : The text color of the panel.
  • $panel-bg-color : The background color of the panel.
  • $panel-border : The border style of the panel.
  • $panel-border-radius : The border-radius of the panel.
  • $panel-padding : The content badding of the panel.
  • $panel-header-name : The class name for the panel's header.
  • $panel-header-color : The text color of the panel's header.
  • $panel-header-bg-color : The background color of the panel's header.
  • $panel-header-padding : The padding of the panel's header.

Notes:

  • [1] : This mixin uses make-generic-container to partially generate its CSS.

Popovers

Popovers can be easily created and customized using the mixin provided.

Popover definition

make-popover($popover-name, 
	$popover-direction, 
	$popover-border-radius, 
	$popover-distance, 
	$popover-color, 
	$popover-bg-color, 
	$popover-padding)

Parameters

  • $popover-name : The name for the popover style
  • $popover-direction : The direction of the popover. [1]
  • $popover-border-radius : The border radius for the popover style.
  • $popover-distance : The distance for the popover style's placement. [2]
  • $popover-color : The text color of the popover style.
  • $popover-bg-color : The background color of the popover style.
  • $popover-padding : The padding of the popover.

Notes:

  • [1] : The values that $popover-direction accepts are 'top' and 'bottom'. If an invalid value is provided, it will be treated as 'bottom'.
  • [2] : The value of $popover-distance should be treated as a general guideline for the popover distance and is supposed to be tweaked with inline styles or helper classes for better use.

Experimental mixins

Some components that were developed but did not always behave properly are provided as experimental mixins. We suggest that you exercise caution when using them.

These components include buttons with states and button groups (only styling).

Stateful button defintion

	make-button-states($button-states-name)

Parameters

  • $button-states-name : The class name of the stateful button.

Notes:

  • [1] : This mixin is experimental, it might be buggy.

Button group definition

make-btn-group(
	$btn-group-name, 
	$btn-name, 
	$btn-group-border, 
	$btn-group-border-radius)

Parameters

  • $btn-group-name : The class name of the button group.
  • $btn-name : The name of the button class. [1][2]
  • $btn-group-border : The border style of the button group.
  • $btn-group-border-radius : The border radius at the edges of the button group.

Notes:

  • [1] : The value of $btn-name must match that of the generic button class.
  • [2] : The value of $btn-name can be hacked to allow for button variants to be styled in custom manners (e.g. if you button class is btn and your button variant's class is blue, you can style it, using btn +'.blue').
  • [3] : This mixin is experimental, although it is marked stable for most cases.
  • [4] : The results of this mixin are purely stylistic and do not provide any grouping functionality.

Remarks

  • The experimental classes might not behave as intended, use at your own risk.
  • Popovers are limited to above and below the content that uses them.
  • Some styling decisions have been already made concerning some classes, these can be tweaked manually.

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.