├── BEM-layouts.sketch ├── PNG-LAYOUTS ├── 16(4x4) │ └── 16(4x4)-1.png ├── 24(4x6) │ ├── 24(4x6)-1.png │ ├── 24(4x6)-2.png │ ├── 24(4x6)-3.png │ ├── 24(4x6)-4.png │ ├── 24(4x6)-5.png │ ├── 24(4x6)-6.png │ └── 24(4x6)-7.png ├── 24(8x3) │ ├── 24(8x3)-1.png │ ├── 24(8x3)-2.png │ └── 24(8x3)-3.png ├── 32(8X4) │ ├── 32(8X4)-1.png │ ├── 32(8X4)-10.png │ ├── 32(8X4)-11.png │ ├── 32(8X4)-12.png │ ├── 32(8X4)-13.png │ ├── 32(8X4)-14.png │ ├── 32(8X4)-15.png │ ├── 32(8X4)-16.png │ ├── 32(8X4)-2.png │ ├── 32(8X4)-3.png │ ├── 32(8X4)-4.png │ ├── 32(8X4)-5.png │ ├── 32(8X4)-6.png │ ├── 32(8X4)-7.png │ ├── 32(8X4)-8.png │ └── 32(8X4)-9.png ├── 36(4x9) │ ├── 36(4x9)-1.png │ ├── 36(4x9)-2.png │ ├── 36(4x9)-3.png │ ├── 36(4x9)-4.png │ ├── 36(4x9)-5.png │ ├── 36(4x9)-6.png │ └── 36(4x9)-7.png ├── internal │ ├── internal-1.png │ ├── internal-2.png │ ├── internal-3.png │ └── internal-4.png └── portal │ ├── portal-1.png │ ├── portal-2.png │ └── portal-3.png ├── README.md ├── common.blocks ├── tpl-grid │ ├── __fraction │ │ ├── _col │ │ │ ├── tpl-grid__fraction_col_1.post.css │ │ │ ├── tpl-grid__fraction_col_10.post.css │ │ │ ├── tpl-grid__fraction_col_11.post.css │ │ │ ├── tpl-grid__fraction_col_12.post.css │ │ │ ├── tpl-grid__fraction_col_2.post.css │ │ │ ├── tpl-grid__fraction_col_3.post.css │ │ │ ├── tpl-grid__fraction_col_4.post.css │ │ │ ├── tpl-grid__fraction_col_5.post.css │ │ │ ├── tpl-grid__fraction_col_6.post.css │ │ │ ├── tpl-grid__fraction_col_7.post.css │ │ │ ├── tpl-grid__fraction_col_8.post.css │ │ │ └── tpl-grid__fraction_col_9.post.css │ │ ├── _l-col │ │ │ ├── tpl-grid__fraction_l-col_1.post.css │ │ │ ├── tpl-grid__fraction_l-col_10.post.css │ │ │ ├── tpl-grid__fraction_l-col_11.post.css │ │ │ ├── tpl-grid__fraction_l-col_12.post.css │ │ │ ├── tpl-grid__fraction_l-col_2.post.css │ │ │ ├── tpl-grid__fraction_l-col_3.post.css │ │ │ ├── tpl-grid__fraction_l-col_4.post.css │ │ │ ├── tpl-grid__fraction_l-col_5.post.css │ │ │ ├── tpl-grid__fraction_l-col_6.post.css │ │ │ ├── tpl-grid__fraction_l-col_7.post.css │ │ │ ├── tpl-grid__fraction_l-col_8.post.css │ │ │ └── tpl-grid__fraction_l-col_9.post.css │ │ ├── _m-col │ │ │ ├── tpl-grid__fraction_m-col_1.post.css │ │ │ ├── tpl-grid__fraction_m-col_10.post.css │ │ │ ├── tpl-grid__fraction_m-col_11.post.css │ │ │ ├── tpl-grid__fraction_m-col_12.post.css │ │ │ ├── tpl-grid__fraction_m-col_2.post.css │ │ │ ├── tpl-grid__fraction_m-col_3.post.css │ │ │ ├── tpl-grid__fraction_m-col_4.post.css │ │ │ ├── tpl-grid__fraction_m-col_5.post.css │ │ │ ├── tpl-grid__fraction_m-col_6.post.css │ │ │ ├── tpl-grid__fraction_m-col_7.post.css │ │ │ ├── tpl-grid__fraction_m-col_8.post.css │ │ │ └── tpl-grid__fraction_m-col_9.post.css │ │ ├── _row │ │ │ ├── tpl-grid__fraction_row_1.post.css │ │ │ ├── tpl-grid__fraction_row_2.post.css │ │ │ ├── tpl-grid__fraction_row_3.post.css │ │ │ └── tpl-grid__fraction_row_4.post.css │ │ ├── _s-col │ │ │ ├── tpl-grid__fraction_s-col_1.post.css │ │ │ ├── tpl-grid__fraction_s-col_10.post.css │ │ │ ├── tpl-grid__fraction_s-col_11.post.css │ │ │ ├── tpl-grid__fraction_s-col_12.post.css │ │ │ ├── tpl-grid__fraction_s-col_2.post.css │ │ │ ├── tpl-grid__fraction_s-col_3.post.css │ │ │ ├── tpl-grid__fraction_s-col_4.post.css │ │ │ ├── tpl-grid__fraction_s-col_5.post.css │ │ │ ├── tpl-grid__fraction_s-col_6.post.css │ │ │ ├── tpl-grid__fraction_s-col_7.post.css │ │ │ ├── tpl-grid__fraction_s-col_8.post.css │ │ │ └── tpl-grid__fraction_s-col_9.post.css │ │ └── _xl-col │ │ │ ├── tpl-grid__fraction_xl-col_1.post.css │ │ │ ├── tpl-grid__fraction_xl-col_10.post.css │ │ │ ├── tpl-grid__fraction_xl-col_11.post.css │ │ │ ├── tpl-grid__fraction_xl-col_12.post.css │ │ │ ├── tpl-grid__fraction_xl-col_2.post.css │ │ │ ├── tpl-grid__fraction_xl-col_3.post.css │ │ │ ├── tpl-grid__fraction_xl-col_4.post.css │ │ │ ├── tpl-grid__fraction_xl-col_5.post.css │ │ │ ├── tpl-grid__fraction_xl-col_6.post.css │ │ │ ├── tpl-grid__fraction_xl-col_7.post.css │ │ │ ├── tpl-grid__fraction_xl-col_8.post.css │ │ │ └── tpl-grid__fraction_xl-col_9.post.css │ ├── _col-gap │ │ ├── tpl-grid_col-gap_full.post.css │ │ ├── tpl-grid_col-gap_half.post.css │ │ ├── tpl-grid_col-gap_none.post.css │ │ ├── tpl-grid_col-gap_third.post.css │ │ └── tpl-grid_col-gap_two-thirds.post.css │ ├── _columns │ │ ├── tpl-grid_columns_10.post.css │ │ └── tpl-grid_columns_12.post.css │ ├── _ratio │ │ ├── tpl-grid_ratio_1-1-1-1-1-1.post.css │ │ ├── tpl-grid_ratio_1-1-1-1-1.post.css │ │ ├── tpl-grid_ratio_1-1-1-1.post.css │ │ ├── tpl-grid_ratio_1-1-1.post.css │ │ └── tpl-grid_ratio_1-1.post.css │ ├── _row-gap │ │ ├── tpl-grid_row-gap_full.post.css │ │ ├── tpl-grid_row-gap_half.post.css │ │ ├── tpl-grid_row-gap_none.post.css │ │ ├── tpl-grid_row-gap_third.post.css │ │ └── tpl-grid_row-gap_two-thirds.post.css │ ├── tpl-grid.md │ └── tpl-grid.post.css └── tpl-layout │ ├── __container │ ├── _align │ │ └── tpl-layout__container_align_center.post.css │ ├── _size │ │ ├── tpl-layout__container_size_full.post.css │ │ ├── tpl-layout__container_size_m.post.css │ │ ├── tpl-layout__container_size_s.post.css │ │ └── tpl-layout__container_size_xs.post.css │ └── tpl-layout__container.post.css │ ├── __content │ └── tpl-layout__content.post.css │ ├── __heading │ └── tpl-layout__heading.post.css │ ├── __panel │ └── tpl-layout__panel.post.css │ ├── __section │ └── tpl-layout__section.post.css │ ├── _structure │ ├── tpl-layout_structure_10-90.post.css │ ├── tpl-layout_structure_20-60-20.post.css │ ├── tpl-layout_structure_30-70.post.css │ ├── tpl-layout_structure_50-50.post.css │ ├── tpl-layout_structure_70-30.post.css │ ├── tpl-layout_structure_90-10.post.css │ ├── tpl-layout_structure_fold-100.post.css │ ├── tpl-layout_structure_fold-25-50-25.post.css │ ├── tpl-layout_structure_fold-30-70.post.css │ ├── tpl-layout_structure_fold-50-50.post.css │ ├── tpl-layout_structure_fold-70-30.post.css │ ├── tpl-layout_structure_unfold-100.post.css │ ├── tpl-layout_structure_unfold-25-50-25.post.css │ ├── tpl-layout_structure_unfold-30-70.post.css │ ├── tpl-layout_structure_unfold-50-50.post.css │ └── tpl-layout_structure_unfold-70-30.post.css │ ├── tpl-layout.md │ └── tpl-layout.post.css └── package.json /BEM-layouts.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/BEM-layouts.sketch -------------------------------------------------------------------------------- /PNG-LAYOUTS/16(4x4)/16(4x4)-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/16(4x4)/16(4x4)-1.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(4x6)/24(4x6)-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(4x6)/24(4x6)-1.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(4x6)/24(4x6)-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(4x6)/24(4x6)-2.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(4x6)/24(4x6)-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(4x6)/24(4x6)-3.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(4x6)/24(4x6)-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(4x6)/24(4x6)-4.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(4x6)/24(4x6)-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(4x6)/24(4x6)-5.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(4x6)/24(4x6)-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(4x6)/24(4x6)-6.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(4x6)/24(4x6)-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(4x6)/24(4x6)-7.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(8x3)/24(8x3)-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(8x3)/24(8x3)-1.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(8x3)/24(8x3)-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(8x3)/24(8x3)-2.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/24(8x3)/24(8x3)-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/24(8x3)/24(8x3)-3.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-1.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-10.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-11.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-12.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-13.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-14.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-15.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-16.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-2.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-3.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-4.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-5.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-6.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-7.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-8.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/32(8X4)/32(8X4)-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/32(8X4)/32(8X4)-9.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/36(4x9)/36(4x9)-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/36(4x9)/36(4x9)-1.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/36(4x9)/36(4x9)-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/36(4x9)/36(4x9)-2.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/36(4x9)/36(4x9)-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/36(4x9)/36(4x9)-3.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/36(4x9)/36(4x9)-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/36(4x9)/36(4x9)-4.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/36(4x9)/36(4x9)-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/36(4x9)/36(4x9)-5.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/36(4x9)/36(4x9)-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/36(4x9)/36(4x9)-6.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/36(4x9)/36(4x9)-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/36(4x9)/36(4x9)-7.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/internal/internal-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/internal/internal-1.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/internal/internal-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/internal/internal-2.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/internal/internal-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/internal/internal-3.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/internal/internal-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/internal/internal-4.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/portal/portal-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/portal/portal-1.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/portal/portal-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/portal/portal-2.png -------------------------------------------------------------------------------- /PNG-LAYOUTS/portal/portal-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bemdesign/bem-layouts/c877d6c30c20af87fb75de3286d3cfa9420646f1/PNG-LAYOUTS/portal/portal-3.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Шаблоны 2 | 3 | Блок [**tpl-layout**](https://github.com/bemdesign/bem-layouts/blob/master/common.blocks/tpl-layout/tpl-layout.md) содержит в себе необходимые элементы в различных модификациях для реализации общих обвязок каркаса/проектов 4 | Блок [**tpl-grid**](https://github.com/bemdesign/bem-layouts/blob/master/common.blocks/tpl-grid/tpl-grid.md) управляет ритмом и композицией (расположением блоков) внутри секций 5 | 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_1.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_1 { 2 | grid-column: span 1; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_10.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_10 { 2 | grid-column: span 10; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_11.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_11 { 2 | grid-column: span 11; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_12.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_12 { 2 | grid-column: span 12; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_2.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_2 { 2 | grid-column: span 2; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_3.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_3 { 2 | grid-column: span 3; 3 | } 4 | 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_4.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_4 { 2 | grid-column: span 4; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_5.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_5 { 2 | grid-column: span 5; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_6.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_6 { 2 | grid-column: span 6; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_7.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_7 { 2 | grid-column: span 7; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_8.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_8 { 2 | grid-column: span 8; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_col/tpl-grid__fraction_col_9.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_col_9 { 2 | grid-column: span 9; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_1.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_1 { 3 | grid-column: span 1; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_10.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_10 { 3 | grid-column: span 10; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_11.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_11 { 3 | grid-column: span 11; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_12.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_12 { 3 | grid-column: span 12; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_2.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_2 { 3 | grid-column: span 2; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_3.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_3 { 3 | grid-column: span 3; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_4.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_4 { 3 | grid-column: span 4; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_5.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_5 { 3 | grid-column: span 5; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_6.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_6 { 3 | grid-column: span 6; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_7.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_7 { 3 | grid-column: span 7; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_8.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_8 { 3 | grid-column: span 8; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_l-col/tpl-grid__fraction_l-col_9.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-l) and (max-width: $screen-xl) { 2 | .tpl-grid__fraction_l-col_9 { 3 | grid-column: span 9; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_1.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_1 { 3 | grid-column: span 1; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_10.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_10 { 3 | grid-column: span 10; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_11.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_11 { 3 | grid-column: span 11; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_12.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_12 { 3 | grid-column: span 12; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_2.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_2 { 3 | grid-column: span 2; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_3.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_3 { 3 | grid-column: span 3; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_4.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_4 { 3 | grid-column: span 4; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_5.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_5 { 3 | grid-column: span 5; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_6.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_6 { 3 | grid-column: span 6; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_7.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_7 { 3 | grid-column: span 7; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_8.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_8 { 3 | grid-column: span 8; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_m-col/tpl-grid__fraction_m-col_9.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-l) { 2 | .tpl-grid__fraction_m-col_9 { 3 | grid-column: span 9; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_row/tpl-grid__fraction_row_1.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_row_1 { 2 | grid-row: span 1; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_row/tpl-grid__fraction_row_2.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_row_2 { 2 | grid-row: span 2; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_row/tpl-grid__fraction_row_3.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_row_3 { 2 | grid-row: span 3; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_row/tpl-grid__fraction_row_4.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid__fraction_row_4 { 2 | grid-row: span 4; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_1.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_1 { 3 | grid-column: span 1; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_10.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_10 { 3 | grid-column: span 10; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_11.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_11 { 3 | grid-column: span 11; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_12.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_12 { 3 | grid-column: span 12; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_2.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_2 { 3 | grid-column: span 2; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_3.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_3 { 3 | grid-column: span 3; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_4.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_4 { 3 | grid-column: span 4; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_5.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_5 { 3 | grid-column: span 5; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_6.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_6 { 3 | grid-column: span 6; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_7.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_7 { 3 | grid-column: span 7; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_8.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_8 { 3 | grid-column: span 8; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_s-col/tpl-grid__fraction_s-col_9.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: $screen-m) { 2 | .tpl-grid__fraction_s-col_9 { 3 | grid-column: span 9; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_1.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_1 { 3 | grid-column: span 1; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_10.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_10 { 3 | grid-column: span 10; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_11.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_11 { 3 | grid-column: span 11; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_12.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_12 { 3 | grid-column: span 12; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_2.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_2 { 3 | grid-column: span 2; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_3.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_3 { 3 | grid-column: span 3; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_4.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_4 { 3 | grid-column: span 4; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_5.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_5 { 3 | grid-column: span 5; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_6.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_6 { 3 | grid-column: span 6; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_7.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_7 { 3 | grid-column: span 7; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_8.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_8 { 3 | grid-column: span 8; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/__fraction/_xl-col/tpl-grid__fraction_xl-col_9.post.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-m) and (max-width: 2500px) { 2 | .tpl-grid__fraction_xl-col_9 { 3 | grid-column: span 9; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_col-gap/tpl-grid_col-gap_full.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_col-gap_full { 2 | grid-column-gap: var(--col-gap-full); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_col-gap/tpl-grid_col-gap_half.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_col-gap_half { 2 | grid-column-gap: var(--col-gap-half); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_col-gap/tpl-grid_col-gap_none.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_col-gap_none { 2 | grid-column-gap: var(--space-none); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_col-gap/tpl-grid_col-gap_third.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_col-gap_third { 2 | grid-column-gap: var(--col-gap-third); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_col-gap/tpl-grid_col-gap_two-thirds.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_col-gap_two-thirds { 2 | grid-column-gap: var(--col-gap-two-thirds); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_columns/tpl-grid_columns_10.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_columns_10 { 2 | grid-template-columns: repeat(10, 1fr); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_columns/tpl-grid_columns_12.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_columns_12 { 2 | grid-template-columns: repeat(12, 1fr); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_ratio/tpl-grid_ratio_1-1-1-1-1-1.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_ratio_1-1-1-1-1-1 { 2 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_ratio/tpl-grid_ratio_1-1-1-1-1.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_ratio_1-1-1-1-1 { 2 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_ratio/tpl-grid_ratio_1-1-1-1.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_ratio_1-1-1-1 { 2 | grid-template-columns: 1fr 1fr 1fr 1fr; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_ratio/tpl-grid_ratio_1-1-1.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_ratio_1-1-1 { 2 | grid-template-columns: 1fr 1fr 1fr; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_ratio/tpl-grid_ratio_1-1.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_ratio_1-1 { 2 | grid-template-columns: 1fr 1fr; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_row-gap/tpl-grid_row-gap_full.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_row-gap_full { 2 | grid-row-gap: var(--col-gap-full); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_row-gap/tpl-grid_row-gap_half.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_row-gap_half { 2 | grid-row-gap: var(--col-gap-half); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_row-gap/tpl-grid_row-gap_none.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_row-gap_none { 2 | grid-row-gap: none; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_row-gap/tpl-grid_row-gap_third.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_row-gap_third { 2 | grid-row-gap: var(--row-gap-third); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/_row-gap/tpl-grid_row-gap_two-thirds.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid_row-gap_two-thirds { 2 | grid-row-gap: var(--col-gap-two-thirds); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/tpl-grid.md: -------------------------------------------------------------------------------- 1 | 2 | # Сетка 3 | Используется для создания различных контентных конструкций. Сетка может использоваться как для фиксированных, так и для адаптивных проектов. 4 | 5 | Сетка связана с блоком [theme](https://github.com/bemdesign/bem-themes) и обвязкой [tpl-layout](https://github.com/bemdesign/bem-layouts/tree/master/common.blocks/tpl-layout). В соответствии с правилом близости, ширина межколонника (**col-gap**) и высота межстрочника (**row-gap**) высчитываются исходя из значения модификатора **gap** в блоке **theme**. Этому же значению равны охранные поля в элементе **content** в блоке **tpl-layout**. Таким образом межколонник и межстрочник сетки никогда не могут больше охранных полей. 6 | 7 | Для простых сеточных конструкций, где блоки равны друг другу — есть модификатор **ratio**. Используя его можно не задавать ширину непосредственным «детям» внутри сетки. Если нужны более сложные конструкции, то рекомендуем использовать модификатор **columns** в связке с элементами **fraction** и явным указанием их ширины. 8 | 9 | ## Модификаторы 10 | 11 | ### tpl-grid 12 | | Модификатор | Значение | Описание | 13 | | ----------- | --------------- | -------------------------------- | 14 | | columns | 10 / 12 | Колличество возможных колонок в сетке | 15 | | col-gap | none / third / half / two-thirds / full | Относительная ширина межколонника исходя из значения модификатора **gap** в блоке **theme**. | 16 | | row-gap | none / third / half / two-thirds / full | Относительная высота межстрочника исходя из значения модификатора **gap** в блоке **theme**. | 17 | | ratio | 1-1 / 1-1-1 / 1-1-1-1 / 1-1-1-1-1 / 1-1-1-1-1-1 | Модификатор для простых конструкций, где её элементы визуально равнозначны. **Не используйте** вместе с модификатором **columns** | 18 | 19 | 20 | ### __fraction 21 | 22 | Один элемент сетки. Mobile-first — модификаторы на ширину пишутся в порядке увелечения ширины экранов: col > s-col > m-col > l-col > xl-col. Например элемент на мобильном экране занимает 100% ширины контейнера, на планшете 50%, а начиная с ноутбуков одну треть. Для этого указываем модификаторы **col_12 s-col_6 l-col_4**. Если клиентский адаптив не предполагается на проекте, то рекомендуем использовать только модификатор **col** 23 | 24 | | Модификатор | Значение | Описание | 25 | | ----------- | --------------- | -------------------------------- | 26 | | col | 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12 | Ширина элемента в колонках | 27 | | s-col | 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12 | Ширина элемента в колонках при разрешении экрана равному переменной **screen-s** в блоке **theme** | 28 | | m-col | 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12 | Ширина элемента в колонках при разрешении экрана равному переменной **screen-m** в блоке **theme** | 29 | | l-col | 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12 | Ширина элемента в колонках при разрешении экрана равному переменной **screen-l** в блоке **theme** | 30 | | xl-col | 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12 | Ширина элемента в колонках при разрешении экрана равному переменной **screen-xl** в блоке **theme** | 31 | 32 | 33 | ## Примеры 34 | 35 | ### Встраивание сетки в обвязку страницы **tpl-layout** 36 | ```javascript 37 | { 38 | block: 'tpl-layout', 39 | mods: { col: 'fold-100' }, 40 | content: [ 41 | { 42 | elem: 'col', 43 | content: [ 44 | { 45 | block: 'main-menu', 46 | } 47 | ] 48 | }, 49 | { 50 | elem: 'col', 51 | content: [ 52 | { 53 | elem: 'panel', 54 | content: { 55 | block: 'submenu' 56 | } 57 | }, 58 | { 59 | elem: 'content', 60 | content: [ 61 | { 62 | elem: 'container', 63 | elemMods: { size: 'm', distribute: 'center' }, 64 | content: [ 65 | { 66 | elem: 'section', 67 | mix: { block: 'tpl-grid', mods: { ratio: '1-1-1', 'col-gap': 'half', 'row-gap': 'half' }}, 68 | content: [ 69 | { block: 'pt-card', content: '...' }, 70 | { block: 'pt-card', content: '...' }, 71 | { block: 'pt-card', content: '...' }, 72 | ] 73 | }, 74 | { 75 | elem: 'section', 76 | mix: { block: 'tpl-grid', mods: { columns: '12', 'col-gap': 'half', 'row-gap': 'two-thirds' }}, 77 | content: [ 78 | { 79 | block: 'foo', 80 | mix: { block: 'tpl-grid', elem: 'fraction', elemMods: { 'col': '6' }}, 81 | }, 82 | { 83 | block: 'bar', 84 | mix: { block: 'tpl-grid', elem: 'fraction', elemMods: { 'col': '4' }} 85 | }, 86 | { 87 | block: 'baz', 88 | mix: { block: 'tpl-grid', elem: 'fraction', elemMods: { 'col': '2' }} 89 | } 90 | ] 91 | } 92 | ] 93 | } 94 | ] 95 | } 96 | ] 97 | } 98 | ] 99 | } 100 | ``` 101 | 102 | ### Клиентский адаптив элементов сетки 103 | ```javascript 104 | ... 105 | { 106 | elem: 'container', 107 | elemMods: { size: 'm', distribute: 'center' }, 108 | content: [ 109 | { 110 | elem: 'section', 111 | mix: 'tpl-grid', mods: { columns: '12', 'col-gap': 'half', 'row-gap': 'two-thirds' } 112 | content: [ 113 | { 114 | block: 'foo', 115 | mix: { block: 'tpl-grid', elem: 'fraction', elemMods: { 'col': '12', 'l-col': '6' }} 116 | }, 117 | { 118 | block: 'bar', 119 | mix: { block: 'tpl-grid', elem: 'fraction', elemMods: { 'col': '6', 's-col': '8', 'l-col': '3', 'xl-col': '4' }} 120 | }, 121 | { 122 | block: 'baz', 123 | mix: { block: 'tpl-grid', elem: 'fraction', elemMods: { 'col': '6', 's-col': '4', 'l-col': '3', 'xl-col': '2' }} 124 | } 125 | ] 126 | }, 127 | ] 128 | } 129 | ... 130 | ``` 131 | -------------------------------------------------------------------------------- /common.blocks/tpl-grid/tpl-grid.post.css: -------------------------------------------------------------------------------- 1 | .tpl-grid { 2 | display: grid; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__container/_align/tpl-layout__container_align_center.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__container_align_center { 2 | margin: 0 auto; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__container/_size/tpl-layout__container_size_full.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__container_size_full { 2 | max-width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__container/_size/tpl-layout__container_size_m.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__container_size_m { 2 | max-width: 1144px; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__container/_size/tpl-layout__container_size_s.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__container_size_s { 2 | max-width: 880px; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__container/_size/tpl-layout__container_size_xs.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__container_size_xs { 2 | max-width: 560px; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__container/tpl-layout__container.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__container { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__content/tpl-layout__content.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__content { 2 | padding: 0 var(--gap); 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__heading/tpl-layout__heading.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__heading { 2 | border-bottom: 1px solid var(--color-border); 3 | margin-bottom: var(--space-xxxl); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__panel/tpl-layout__panel.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__panel { 2 | height: 72px; 3 | } 4 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/__section/tpl-layout__section.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout__section { 2 | box-sizing: border-box; 3 | font-size: var(--size-typo-m); 4 | line-height: var(--line-height-typo-m); 5 | } 6 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_10-90.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_10-90 { 2 | grid-template-columns: 10% 90%; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_20-60-20.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_20-60-20 { 2 | grid-template-columns: 20% 60% 20%; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_30-70.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_30-70 { 2 | grid-template-columns: 30% 70%; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_50-50.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_50-50 { 2 | grid-template-columns: 50% 50%; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_70-30.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_70-30 { 2 | grid-template-columns: 70% 30%; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_90-10.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_90-10 { 2 | grid-template-columns: 90% 10%; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_fold-100.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_fold-100 { 2 | grid-template-columns: var(--menu-fold) auto; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_fold-25-50-25.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_fold-25-50-25 { 2 | grid-template-columns: var(--menu-fold) calc((100% - var(--menu-fold)) * 0.25) calc((100% - var(--menu-fold)) * 0.5) calc((100% - var(--menu-fold)) * 0.25); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_fold-30-70.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_fold-30-70 { 2 | grid-template-columns: var(--menu-fold) calc((100% - var(--menu-fold)) * 0.3) calc((100% - var(--menu-fold)) * 0.7); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_fold-50-50.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_fold-50-50 { 2 | grid-template-columns: var(--menu-fold) calc((100% - var(--menu-fold)) * 0.5) calc((100% - var(--menu-fold)) * 0.5); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_fold-70-30.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_fold-70-30 { 2 | grid-template-columns: var(--menu-fold) calc((100% - var(--menu-fold)) * 0.7) calc((100% - var(--menu-fold)) * 0.3); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_unfold-100.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_unfold-100 { 2 | grid-template-columns: var(--menu-unfold) auto; 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_unfold-25-50-25.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_unfold-25-50-25 { 2 | grid-template-columns: var(--menu-unfold) calc((100% - var(--menu-unfold)) * 0.25) calc((100% - var(--menu-unfold)) * 0.5) calc((100% - var(--menu-unfold)) * 0.25); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_unfold-30-70.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_unfold-30-70 { 2 | grid-template-columns: var(--menu-unfold) calc((100% - var(--menu-unfold)) * 0.3) calc((100% - var(--menu-unfold)) * 0.7); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_unfold-50-50.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_unfold-50-50 { 2 | grid-template-columns: var(--menu-unfold) calc((100% - var(--menu-unfold)) * 0.5) calc((100% - var(--menu-unfold)) * 0.5); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/_structure/tpl-layout_structure_unfold-70-30.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout_structure_unfold-70-30 { 2 | grid-template-columns: var(--menu-unfold) calc((100% - var(--menu-unfold)) * 0.7) calc((100% - var(--menu-unfold)) * 0.3); 3 | grid-template-rows: minmax(100vh, auto); 4 | } 5 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/tpl-layout.md: -------------------------------------------------------------------------------- 1 | # Обвязка 2 | Используется для формирования общего каркаса страницы. Позволяет создавать различные сплитовые конструкции страницы. 3 | 4 | ## Модификаторы 5 | 6 | ### tpl-layout 7 | | Модификатор | Значение | Описание | 8 | | ------------ | --------------- | -------------------------------- | 9 | | structure | 10-90 / 30-70 / 50-50 / 70-30 / 90-10 / 20-60-20 / fold-25-50-25 / fold-30-70 / fold-50-50 / fold-70-30 / fold-100 / unfold-25-50-25 / unfold-30-70 / unfold-50-50 / unfold-70-30 / unfold-100 | Конструкции обвязки в различных пропорциях | 10 | 11 | Цифры в значениях модификатора опредлеяеют ширину колонки в процентах относительно всей страницы. Значение **fold** — задаёт первой колонке ширину схлопнотого меню, равной переменной **menu-fold** из блока **theme**. **unfold** — задаёт первой колонке ширину развёрнутого меню, равной переменной **menu-unfold** из блока **theme** 12 | 13 | 14 | ### __col 15 | Элемент для разграничения содержимого страницы по выбранному каркасу. 16 | 17 | ### __panel 18 | Опциональный семантический элемент для меню второго уровня, фильтров, настроек и т.п. 19 | 20 | ### 21 | Опциональный семантический элемент для заголовка страницы. 22 | 23 | ### __content 24 | Элемент обеспечивает охранные поля от границы содержимого до края экрана, либо соседнего сплита. Значение охранных полей берётся из модификатора **gap** блока **theme**. 25 | 26 | ### __container 27 | Элемент для основного контента страницы. Вкладывается в элемент **__content**. 28 | 29 | | Модификатор | Значение | Описание | 30 | | ------------ | --------------- | -------------------------------- | 31 | | size | xs / s / m / full | Максимальная ширина контейнера | 32 | | align | center | Распроложение контейнера по горизонтале | 33 | 34 | ### __section 35 | Элемент для семантического разделения содержимого. 36 | 37 | 38 | 39 | ## Примеры 40 | 41 | ### Обвязка со схлопнутым боковым меню, панелью и заголовком 42 | ```javascript 43 | { 44 | block: 'tpl-layout', 45 | mods: { structure: 'fold-100' }, 46 | content: [ 47 | { 48 | elem: 'col', 49 | content: [ 50 | { 51 | block: 'main-menu', 52 | } 53 | ] 54 | }, 55 | { 56 | elem: 'col', 57 | content: [ 58 | { 59 | elem: 'panel', 60 | content: { 61 | block: 'submenu' 62 | } 63 | }, 64 | { 65 | elem: 'heading', 66 | content: { 67 | block: 'title', 68 | content: 'Page title' 69 | } 70 | }, 71 | { 72 | elem: 'content', 73 | content: [ 74 | { 75 | elem: 'container', 76 | elemMods: { size: 'm', align: 'center' }, 77 | content: [ 78 | { 79 | elem: 'section', 80 | content: [ ] 81 | }, 82 | { 83 | elem: 'section', 84 | content: [ ] 85 | }, 86 | ] 87 | } 88 | ] 89 | } 90 | ] 91 | } 92 | ] 93 | } 94 | ``` 95 | 96 | ### Обвязка с раскрытым боковым меню, основным контентом и дополнительный боковой секцией 97 | ```javascript 98 | { 99 | block: 'tpl-layout', 100 | mods: { structure: 'unfold-70-30' }, 101 | content: [ 102 | { 103 | elem: 'col', 104 | content: [ 105 | { 106 | block: 'main-menu', 107 | } 108 | ] 109 | }, 110 | { 111 | elem: 'col', 112 | content: [ 113 | { 114 | elem: 'content', 115 | content: [ 116 | { 117 | elem: 'container', 118 | elemMods: { size: 'm', align: 'center' }, 119 | content: [ 120 | { 121 | elem: 'section', 122 | content: [ ] 123 | }, 124 | { 125 | elem: 'section', 126 | content: [ ] 127 | }, 128 | ] 129 | } 130 | ] 131 | } 132 | ] 133 | }, 134 | { 135 | elem: 'col', 136 | content: [ 137 | { 138 | block: 'aside-widget' 139 | }, 140 | { 141 | block: 'banner' 142 | } 143 | ] 144 | } 145 | ] 146 | } 147 | ``` 148 | 149 | ### Сплит экран в пропорциях 50 на 50 150 | ```javascript 151 | { 152 | block: 'tpl-layout', 153 | mods: { structure: '50-50' }, 154 | content: [ 155 | { 156 | elem: 'col', 157 | content: [ 158 | { 159 | block: 'pt-form', 160 | content: [] 161 | } 162 | ] 163 | }, 164 | { 165 | elem: 'col', 166 | content: [ 167 | { 168 | block: 'promo-image' 169 | } 170 | ] 171 | }, 172 | ] 173 | } 174 | ``` 175 | -------------------------------------------------------------------------------- /common.blocks/tpl-layout/tpl-layout.post.css: -------------------------------------------------------------------------------- 1 | .tpl-layout { 2 | display: grid; 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bem-layouts", 3 | "version": "2.1.4", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/bemdesign/bem-layouts.git" 12 | }, 13 | "author": "Yuriy Yegorov", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/bemdesign/bem-layouts/issues" 17 | }, 18 | "homepage": "http://bem.design" 19 | } 20 | --------------------------------------------------------------------------------