Stylobate

Kinds

Hello, world

Baseliner

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')

Block

kind: block

The standard kind for any simple block. Makes block to have display: block and relative positioning.

Modifying 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

Inline-blocks

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.

Vertical alignment of inline blocks

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

Button

(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.

Disabling reset

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

Vertical alignment

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

Centering

kind: centering

Kind for aligning something to the middle of another element.

The wrapper with kind: centering sets the context for the centering.

Centered elements

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

Centering helper

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

Clearfix

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.

Clearfix elements

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')

Clearfix from one side

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 '')

Content

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.

Elements for collapsing helpers

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')

Limiting sides

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 '')

Disabling

kind: disabled

The kind for disabling the blocks. This make the block transparent a bit, then removes cursor and any pointer events on it.

Opacity

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

Nested disabled blocks

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 '')

Events

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

Ellipsis

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

Fill

kind: fill

Kind for “filling” elements using absolute positioned other ones.

Sides params

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

Background param

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'

Params for the repeating of the bg image

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

Groups

“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 of the 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'

Guides

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

Params for the used method

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

Hidden

kind: hidden

This is a simple typo for telling block to hide using display: none !important;.

Visual hiding

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.

Underline

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')

Hover

By default links become red on hover, you can remove this behaviour by passing empty selector to the _hover modifier:

kind: link (_hover '')

Changing the color

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')
Яндекс.Метрика