...
| Col No. | xxs ( < 480px ) | xs ( < 768px ) | sm ( < 992px ) | md ( < 1200px ) | lg ( >=1200 ) |
|---|---|---|---|---|---|
| 1 | .xs-lower-one-col | .xs-lower-one-col | |||
| 2 | .xs-lower-two-col | .xs-lower-two-col | |||
| 3 | .xs-lower-three-col | .xs-lower-three-col | |||
| 4 |
SASS Mixins:
A mixin allow you to make groups of CSS declarations that you can reuse throughout your application. You can even pass in values to make your mixin more flexible.
For setting up the correct column styling use the general mixins: grid-column($index) and panel-w($sizes).
Example 1:
SASS:
| Code Block |
|---|
> .col1, > .col2, > .col3 {
@include grid-column(1);
}
|
Would generate the CSS:
| Code Block |
|---|
> .col1, > .col2, > .col3 {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
grid-row-start: auto !important;
grid-row-end: auto !important;
} |
Example 2:
SASS
| Code Block |
|---|
// RESPONSIVE STYLES FOR Responsive UI Forms // SIZES: xs @include panel-w('xs'){ > .dhx_cell_cont_layout > .dhxform_obj_material { > .f-2-col, > .f-3-col, > .f-4-col{ grid-template-columns: 1fr; > .col2, > .col4, > .col8{ @include grid-column(1); } } } } |
Would generate the CSS:
| Code Block |
|---|
// RESPONSIVE STYLES FOR Responsive UI Forms // SIZES: xs .dhx_cell_layout[akcontainersize="xs"] { > .dhx_cell_cont_layout > .dhxform_obj_material { > .f-2-col, > .f-3-col, > .f-4-col{ grid-template-columns: 1fr; > .col2, > .col4, > .col8{ grid-column-start: 1 !important; grid-column-end: 2 !important; grid-row-start: auto !important; grid-row-end: auto !important; } } } } |
Styling should be applied considering the generics. A Panel could contain another panel so you should be more specific in levels when applying new styles.
...