ComboStrap UI - Styling

About

Styling in ComboStrap is the possibility to render every component as you wish.

ComboStrap has three levels of styling:

Levels

Bootstrap Stylesheet

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

ComboStrap Styling - StyleSheet (Theme)

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
Print Hide component on print

Animation

  • OnVisible - Add an animation when a component become visible
  • OnHover - Add an animation when the mouse is over a component

Advanced

Every component is a html superset and you can therefore use the HTML attributes:

for advanced styling.

You can also create your own rule in the userstyle.css stylesheet if you have CSS knowledge.

Powered by ComboStrap