Kinds
Hello, world
Hello, world
Kind for aligning at font’s baseline for those blocks where it won’t work from the box (like those with overflow: hidden).
The base kind just gives the inline-block behaviour with the vertical-align:
kind: baseliner
The content you want to align, you’ll need to place into -content element:
kind: baseliner (-content '&-content')
By default the -helper element is created using :before, but you could change this:
kind: baseliner (-helper '&-helper') (-content '&-content')
kind: block
The standard kind for any simple block. Makes block to have display: block and relative positioning.
By default kind-block have relative positioning. In rare cases when you’ll need to have it strictly static, you can use the static param:
kind: block static
By default kind-block have display: block, in case you’ll need an element to be in inline context, use inline param:
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)
kind: button
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: centering
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')
or
.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 -helper element:
.menu
kind: centering (-helper '&-helper')
Or you could call it on another selector by hand:
.menu-helper
kind: centering-helper
kind: clear
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 -before and -after elements:
kind: clear (-after '& > .clearfix')
If you need to use clearfix only at one side, you need to disable it from another by overriding -before or -after element:
kind: clear (-before '')
kind: clear (-after '')
kind: content 1em
Kind for “smart” content paddings. Accepts one to four units as params (like padding or 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 -before or -after elements:
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 '')
kind: disabled
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 -nested element:
kind: disabled (-nested '')
By default the disabled element would have pointer-events: none, to turn off this behaviour, you can use with-events param:
kind: disabled with-events
Kind for adding ellipsis for long text on line line.
kind: ellipsis
If you’ll need to have inline element with ellipsis, you can use _inline modifier:
kind: ellipsis _inline
kind: fill
Kind for “filling” elements using absolute positioned other ones.
This kind can accept up to four numeric params (like padding or margin), for corresponding sides (props top, right, bottom и left):
kind: fill 10px 20px 30px 40px
You can use shorthands just like for padding:
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.
Base group kind does almost nothing except for the nonwrapping behaviour:
kind: group
Elements could be divided into two types: abstract group-item and specific group-start, group-middle and group-end.
Abstract group-item, are the shortcuts for the specific ones using the defaulted CSS-selectors :first-child and :last-child. They could be used if the content of the group is unified:
kind: group-item
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 no-margin one.
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'
kind: guide
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 pointer-events property.
kind: guide visible
kind: hidden
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 visually param:
kind: hidden visually
kind: link
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 _underline modifier:
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 _hover modifier:
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 _underline or _pseudo modifiers on the inner element:
kind: link (_underline '&-inner')
kind: link (_pseudo '&-inner')