Tutorial: Easy CSS-Background-Box to PADDED grids (like but not only Bootstrap)

[Yetiie]

Tutorial and Solution:
Ad Boxes to PADDED Grids of modern Frameworks like (but not only) Bootstrap
Easy acces to box gridded elements for common editors (without html knowledge) in wb



To prepare wb the way a normal editor (without html knowledge) is able to ad elements to a webpage is not easy. A way to ad gridded elements (in columns) to the webpage is to use lists. But if you use a modern PADDED* grid framework it is not easy to ad a box to the li elements. This tutorial shows a solution to ad a background box to the gridded list by choosing a style for the list only.

* This examples is based on a typical problem in modern padded grids. But of course the solution can be used everywhere, where a box-design needs to be added without the possibility to ad a box container and where jQuery should not be used.

NOTE: This is not and plug and play solution. To understand and work with this tutorial you need to have knowledge in using CSS and the use (and knowledge how they work) of padded grid systems. Adapt the solutions to your project.





Boxes normal needs additional container
this can be difficult in wb

One attribute of the column grids of modern frameworks (i.e. but not only Bootstrap) is, that the content area does start directly in the element but in the padded inner area of the column div.

If you want to ad a box-design to this column element you are not able to style the column itself: you need to ad a box div first. Using wb adding block elements is not as easy cause this possibilities in the editor are extremely restricted.

This problem even grows up if you use list elements to create gridded boxes (i.e. Item Boxes) which act like columns of the grid system. (This is a very easy way to offer the editor the possibility to create gridded elements because the list can be formatted by choosing a style for the list from the style-combo-box.)

example

Code: [Select]

<ul.classWithCSSofGridRows
prepared with css of grid row>
   <li – gridColumnCSSisPreparedAs ul.class li {...
   prepared with css of grid column>
      <item-image>
      <item-text>
      <item-link>
   </li>
   <li
   prepared with css of grid column>
      <item-image>
      <item-text>
      <item-link>
   </li>
   ...
</ul>

Now: If you use the column-grid system to get the same(!) spaces between the columns you can not set a border to the li-elements because the contentment-area is padded in the li-element.

example scheme

Code: [Select]

|
column li|XXXinner-paddingXXX content area needs inner box for box style XXXinner-paddingXXX|column li|
And special in the editor of wb you are not able to ad an inner div to ad box styles to list elements.





Solution: background-box with CSS only
sass-mixin or clear css

Attached to this post for this problem (that we are not able or do not want to ad an box container) you will find a SASS mixin together with a clear css example. The CSS paints the box as a css background pattern to the element. Optional it simulates the box padding by adding the spaces to the content.

If you use the SASS mixin you can call it flexible with colors, border-width and optional box paddings. If you need to write clear CSS use the example and adapt the properties to your usage.

If you would like to use it for boxed list items in wb prepare it as follows:




Prepare your CSS …


(1) Add the css of your grid rows to element/class ul.list-item:
ul.list-items {
   … css used to build grid rows in your project
}


(2) Add the css of your grid columns to the element/class ul.list-item li
ul.list-items li {
   … css used to build grid columns in your project
}


(3a alternative one)
sass-include background-box to li-element
ul.list-items li {
   @include background-box(parameters);
}


(3b or alternative two)
Add the clear background-box-css with your properties to li-element
ul.list-items li {
   ad prepared css from example
}




Prepare WB ….

(4) ad style 'background-boxes' to Module CKEditor (template folder: editor, file: editor.styles.js)




Use WB ….

(5) write a list with Image, text, … in wb (with ckEdior) and chose style 'background-boxes' from combo box for styles.




---------------------------
Hope it could help someone else.
Find SASS mixin and CSS for this tutorial attached to this post.

[Yetiie]

Sorry I forgot to add the picture with an optical explanation what is meant with gridded items.
Maybe the forum admin is able move the picture and the text below under the first posting ... and delete this post. So it would be clearer ... that would be very nice
VVVVVVVVVVV


----
An example what is meant with gridded items is shown on the picture.
The screenshot is done from wb template http://WebsiteBaker.at/wb-templates/template-bs_fragg.html