Kind for aligning at font’s baseline for those blocks where it won’t work from the box (like those with
The base kind just gives the inline-block behaviour with the vertical-align:
The content you want to align, you’ll need to place into
kind: baseliner (-content '&-content')
By default the
-helper element is created using
:before, but you could change this:
kind: baseliner (-helper '&-helper') (-content '&-content')
The standard kind for any simple block. Makes block to have
display: block and relative positioning.
kind-block have relative positioning. In rare cases when you’ll need to have it strictly static, you can use the
kind: block static
display: block, in case you’ll need an element to be in inline context, use
kind: block inline
This would give the block
display: inline-block and some default vertical alignment.
By default inline blocks have
vertical-align: top, in case you’ll need to change this, you can use one of the following params:
kind: block inline baseline kind: block inline middle kind: block inline bottom
(write there something about extending pill)
The default kind for buttons. Gives all the necessary styles for the button, including all the needed resets.
When applied to the element that won’t be ever a
<button> tag, you could use the
no-reset param to give the button all the layout styles it need, but without all the resets.
kind: button no-reset
By default buttons have
vertical-align: baseline, you can override that using one of the special params:
kind: button middle kind: button top kind: button bottom
Kind for aligning something to the middle of another element.
The wrapper with
kind: centering sets the context for the centering.
To define which elements would be centered, you need to use
-item element or call it by yourself:
.menu kind: centering (-item '&-item')
.menu-item kind: centering-item
For centering we use the method using inline-blocks, so we need to have a helper element. It is mapped to
:before by default, but you can override its selector using
.menu kind: centering (-helper '&-helper')
Or you could call it on another selector by hand:
.menu-helper kind: centering-helper
This kind is used for a clearfix. We use microclearfix, so by default we have clearing elements both at the top and at the bottom.
By default the block is cleared using pseudos, if you’ll want to have the clearfix at another element, you could override its selector using
kind: clear (-after '& > .clearfix')
If you need to use clearfix only at one side, you need to disable it from another by overriding
kind: clear (-before '') kind: clear (-after '')
kind: content 1em
Kind for “smart” content paddings. Accepts one to four units as params (like
margin), then creates paddings for the sides, but in a way the both and bottom paddings would be collapsing, so they would be overlapped by inner elements’ margins.
By default the collapsing paddings are created using the pseudos (except IE where the ordinal non-collapsing paddings are used), if you’d want to use it on the actual other elements, use the proper
kind: content 1em (-after '&-helper')
If you don’w want a collapsing padding from any side, you can override the element to the empty one, in this case this side would get its padding.
kind: content 1em (-before '')
The kind for disabling the blocks. This make the block transparent a bit, then removes cursor and any pointer events on it.
By default the block would have 50% opacity, if you’ll need to change this, just pass numeric param to it:
kind: disabled 0.6
This kind can be used to disable whole groups of elements, in that case all nested disabled elements would have proper opacity.
In case you’d need to disable this behaviour or redefine the selector for nested elements, you could use
kind: disabled (-nested '')
By default the disabled element would have
pointer-events: none, to turn off this behaviour, you can use
kind: disabled with-events
Kind for adding ellipsis for long text on line line.
If you’ll need to have inline element with ellipsis, you can use
kind: ellipsis _inline
Kind for “filling” elements using absolute positioned other ones.
This kind can accept up to four numeric params (like
margin), for corresponding sides (props
kind: fill 10px 20px 30px 40px
You can use shorthands just like for
kind: fill 10px 20px
Negative values are accepted too, of course:
kind: fill -1px
You can pass a color or url string as a param. The color passed this wat would become the element’s background:
kind fill red
String would be wrapped with
url() and would get the default bg styles:
kind fill 'pattern.png'
(we need to have there an option to write
url(), otherwise we would have troubles with resolvers)
Colors and images could be combined:
kind fill -1px rgba(0,0,0, 0.5) 'pattern.png'
By default the image won’t be repeated, you can override it using the appropriate extra params:
kind fill 'pattern.png' repeat kind fill 'pattern.png' repeat-x kind fill 'pattern.png' repeat-y
“Group” is a several elements combined visually into one. Such elements often go one after another without any gaps, like an input with button etc.
group kind does almost nothing except for the nonwrapping behaviour:
Elements could be divided into two types: abstract
group-item and specific
group-item, are the shortcuts for the specific ones using the defaulted CSS-selectors
:last-child. They could be used if the content of the group is unified:
If the visual order would be different from their order and nesting in DOM, it would be better to use specific ones:
kind: group-start kind: group-middle kind: group-end
Those elements could be easily configured: by default those elements don’t have border-radius between them and they’re also overlap each other by one pixel. To disable the removal of radiuses you can use
no-radius param, to disable the overlap, you can use the
More that that, if the visual side of the element is actually inside it, you could use the specific selector to say where the radiuses should be removed (and you can mark this way more than one element):
kind: group-item '& > .complex-button-inner, & > .complex-button-inner:before'
This kind extend the
fill one, makeing the block unclickable. To define the inner clickable elements, you’ll need to define them using the param element:
kind: guide (-item '&-item')
It seems this won’t work for now for some reason
By default everythign is done using
visibility property, if you’ll need to use this kind inside another block with visibility, you could use the
visible param, doing so would do the trick using the
kind: guide visible
This is a simple typo for telling block to hide using
display: none !important;.
If you need to hide the block visually for some reason (accessibility, for example), you can use the
kind: hidden visually
This is a default kind for links. By default such links have an underline, colored in blue and become red on hover. You can configure all of this using params.
To remove an underline from link just pass an empty
kind: link (_underline '')
And if you’ll need to underline a link only in some condition, pass the corresponding selector to this modifier:
kind: link (_underline '&:hover')
By default links become red on hover, you can remove this behaviour by passing empty selector to the
kind: link (_hover '')
To change the color of the link you can just pass this color as a param:
kind: link #22C
This would change the color of the link, while if you’d want to change the color on hover, you need to pass that color inside the
_hover modifier after the selector:
kind: link #22C (_hover '&:hover' #D00)
To make a dotted pseudo-link, you can pass
_pseudo modifier to this kind:
kind: link _pseudo
Sometimes you could want to add underline only to some inner element, like when adding some icons. In that case you can use the
_pseudo modifiers on the inner element:
kind: link (_underline '&-inner') kind: link (_pseudo '&-inner')