ComboStrap UI - Styling
Table of Contents
About
Styling in ComboStrap is the possibility to render every component as you wish.
ComboStrap has three levels of styling:
- the bootstrap stylesheet level - bootstrap standard theme
- the user stylesheet level - a stylesheet with custom rule to tune the styling precisely
- the attribute level - inline css customization
Articles Related
Levels
Bootstrap Stylesheet
ComboStrap is based on Bootstrap and comes with pre-packaged stylesheets. You can even create and install your own bootstrap stylesheet.
User Stylesheet
This functionality gives the possibility to the web designer to create their own CSS rules in a custom stylesheet in order to tune the theme exactly to their needs.
More see ComboStrap Styling - User stylesheet (userstyle.css)
Attributes
Standard
The standard attributes are:
| Name | Description |
|---|---|
| Dimension | Take control of the width and height |
| Align | Align your block component |
| Spacing | Master your layout at the pixel-perfect details |
| Color | Text, Border and Background color made easy with name and declarative gradient |
| Elevation | Add a shadow and elevate your component |
| Float | Position a component to the right or left and let the content flows along its side |
| Lang | Set the language and direction of your text |
| Position | Position a component inside a container |
| Clickable | Make a whole component such as a card clickable |
| Text align | Align the lines inside a block |
| Line Spacing | Set the height between lines of text |
| Opacity | Renders a component more or less opaque / transparent |
| Boldness | Set the weight of a font (from thin to bold) |
| Font Size | Set the size of the characters. |
| Underline | Underline one or more characters |
| Hide component on print |
Animation
Advanced
Every component is a html superset and you can therefore use the HTML attributes:
- and style
for advanced styling.
You can also create your own rule in the userstyle.css stylesheet if you have CSS knowledge.