This is the main container used as root tag of your app body and for each component.
It's a position:absolute tag that fills all the available space (in horizontal and vertical).
Its direct children must to be a .PADDER, a .ROWS or a .COLS.
This is an Extender
Inside an EXTENDER you can place a PADDER.
This tag sets an uniform padding inside the .EXTENDER.
By default a .PADDER sets a 10px padding, you can also use PADDER0, PADDER5, PADDER10, PADDER15, PADDER25,
PADDER35, PADDER45, PADDER55 or you can create your own PADDER (.padder(@v)).
This is a padder
PADDER-CENTER
Many times we need to positioning a vertical and horizontal centered object inside a container. In this case
we can use .PADDER-CENTER.
This is a centered
element....
Try to edit text
ROWS & .COLS: are our flex containers.
They both fill all the available space (of their direct
parent) and enables a flex context for all their direct children (.CELL).
They define if we want to split the space (the father's space / .EXTENDER or .PADDER) by rows or columns and
establishes the main-axis, thus defining the direction flex items are placed in the flex container.
.ROWS:
- forces its children (.CELL) to be 100% width rows;
- main-axis: vertical;
- cross-axis: horizontal.
a
b
c
.COLS:
- forces its children (.CELL) to be 100% height columns;
- main-axis : horizontal;
- cross-axis: vertical.
a
b
c
If a flexible container (.ROWS or COLS) doesn't contains flexible elements these can be justified width JUS-STRAT (dafault), JUS-CENTER, JUS-END, JUS-AROUND and JUS-BETWEEN
a
b
c
a
b
c
CELL is a generic element, flexible or static. Its behavior depends by its father:
- CELL inside a .ROWS will be rows and you can interact with their heights;
- CELL inside a .COLS will be columns and you can interact with their width;
You can create a flexible CELL by adding _FLEX class as seen in previous examples.
a
b
c
Once introduced .ROWS, .COLS and CELL _FLEX we can see how we can set static (width or height) cells.
CssPlus defines both css and inline metrics.
Inline Matrics
Inline metrics provides a serie of shortcuts to specify cell size direct in HTML tag.
You can specify both pixel ( _50px ) and percentage ( _45pct ) values inside class attribute.
These values manipulates main-axis metrics
80px column
flexible column
20% column
Same for ROWS:
25px row
flexible row
40% row
Css Matrics
Css metrics give us a little more power.
All inline classes (EXTENDER, PADDER, ROWS, CELL,...) have their own alias in css syntax.
So (using less) you can write something like:
35px row
flexible row
35px row
Main-axis:
In Css syntax CELL elements - .cell() - are vertical or horizontal components depending on their father (
.rows() or .cols() ) so you can specify their height with .h(@v) or theri width with .w(@v).
In both cases .h() and .w() set main-axis size, so:
- A .cell() with .h(50px) is a row with height = 50px and width = 100%;
- A .cell() with .w(20pct) is a column with height = 100% and width = 20%.
Cross-axis
By adding a second parameter to .h() or .w() we can manipulate cross-axis size so:
- A .cell() with .h(50px, 20px) is a row with height = 50px and width = 20px;
- A .cell() with .w(20pct, 30px) is a column with width = 20% and height = 30px.
height = 35px and width = 270px
flexible row
height = 35px and width = 270px
To recap ROWS and COLS enable flex context for all their direct children (CELL).
CELL can be flexibles (_FLEX) or static by using .w() and .h().
These css classes manipulate main-axis and cross-axis sizes (the first parameters for main-axis and the
second one for cross-axis).
If specified the second parameter also enables cross-axis alignments:
height = 35px, width = 270px centered
flexible row
height = 35px, width = 270px end aligned
For now CSS+ provides a super easy way to create flexible scaffoldings.
This is its main objective. For scaffolding we mean the subdivision in sections of all available space (for app or web page) commonly called "layout".
These sections are always overflow:hidden. Scrolling areas must be managed by the components inside these sections.
CSS+ provides a basilar scrollable component named SCROLLABLE
a
This is a scrollable area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
c
This is an example of what you can do with css+
button
button
button
♠
♣
♥
♦
This is a scrollable area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
options
|
options
|
options