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