Brick and CSS

brixioapp edited this page Feb 3, 2015 · 2 revisions

You can add css to a brick just by editing css properties. What happens then? Brix.io adds additional parameter data-brix_class to the brick and saves all css properties into /style-auto.css. We are not using class attribute. If you would like to style elements inside a brick (tag), click Open Style and add new selector below the main brick rule. Example:

[...] {...}
[...] div {...}  <-new for div inside a brick
Copy

You can copy a brick with css across project. All copies are connected with the same style. To set another style for a copy, click Unbind Style and set new values.

Add to Sections

Brix.io checks for connected css and saves css rules for all bricks inside. Brix.io also saves all rules for element inside saved brick - example above. What's important, brix.io changes all data-brix_class parameters to unique values so you can change the brick and save with new parameters as a new section.

What can I do with auto par in html code view

In a code view:

  • remove data-brix_class parameter: brix.io unbinds style from the element
  • copy data-brix_class parameter from another brick: binds other brick style

Info: Data-brix_class parameters are 100% valid and can be used as css selector (same as class parameter). If you prefer, you can change auto link position before your own css style and use your own class attribute for additional styling.

Reset style

You can manually add style-auto-reset.css before auto.css link with a list of brick selectors:

[...],
[...]
{Reset properties}