ComboStrap UI Styling

1 - About

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

ComboStrap has three levels of styling:

3 - Levels

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

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

3.3 - Attributes

3.3.1 - Standard

The standard attributes are:

  • Dimension (Width and height) - Take control of the dimensions
  • Align - Align your component and their text as you wish
  • 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
  • Position - Position a component inside a container
  • Clickable - Make a whole component such as a card clickable

For the Geek

Standard attributes are all transformed into CSS rules.

3.3.2 - Animation

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

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