---json
{
    "page_id": "t9uqfg13kh50vhwvb36e8"
}
---
====== ComboStrap UI - Styling ======


===== About =====
''Styling'' in ''ComboStrap'' is the possibility to render every [[docs:component|component]] as you wish.

''ComboStrap'' has three levels of styling:
  * the [[#bootstrap stylesheet|bootstrap stylesheet level]] - bootstrap standard theme
  * the [[#user_stylesheet|user stylesheet level]] - a stylesheet with custom rule to tune the styling precisely
  * the [[#attribute level]] - inline css customization
      * [[#standard|standard]] - a set of the most important attributes to quickly style any components.
      * and [[#advanced|advanced]] which let's you use the full power of HTML and CSS.



===== Levels =====

==== Bootstrap Stylesheet ====

''ComboStrap'' is based on ''Bootstrap'' and comes with pre-packaged stylesheets. 
You can even create and install your own bootstrap stylesheet.


<btn>
[[:docs:theme:bootstrap|Bootstrap]]
</btn>

==== Theme ====

This functionality gives the possibility to the web designer to [[:docs:theme:theme|create their own theme]] and to customize every possible [[:docs:theme:template:template|layout template]].
==== Attributes ====

=== Standard  ===
The ''standard'' attributes are:

^ Name ^ Description ^
| [[docs:styling:dimension|Dimension]] | Take control of the width and height |
| [[docs:styling:align|Align]] | Align your block component  |
| [[docs:styling:spacing|Spacing]] | Master your layout at the pixel-perfect details |
| [[color|Color]] | Text, Border and Background color made easy with name and declarative gradient |
| [[docs:styling:shadow|Elevation]] | Add a shadow and elevate your component |
| [[float|Float]] | Position a component to the right or left and let the content flows along its side |
| [[lang|Lang]] | Set the language and direction of your text |
| [[release:beta:position|Position]] | Position a component inside a container |
| [[clickable|Clickable]] | Make a whole component such as a card clickable |
| [[release:deprecated:text-align|Text align]] | Align the lines inside a block |
| [[line-spacing|Line Spacing]] | Set the height between lines of text |
| [[opacity|Opacity]] | Renders a component more or less opaque / transparent|
| [[boldness|Boldness]] | Set the weight of a font (from thin to bold) |
| [[font-size|Font Size]] | Set the size of the characters. |
| [[underline|Underline]] | Underline one or more characters |
| [[print|Print]] | Hide component on print |


=== Animation ===
  * [[release:beta:onvisible|OnVisible]] - Add an animation when a component become visible
  * [[docs:animation:hover|OnHover]] - Add an animation when the mouse is over a component

=== Advanced ===
Every component is a [[docs:marki|html superset]] and you can therefore use the [[class|class]] for advanced styling.