From f9fd94371515bc422d04691fa496f0feca764e0c Mon Sep 17 00:00:00 2001 From: Naresh Sharma II Date: Mon, 30 Sep 2019 12:26:44 +0530 Subject: [PATCH] Adding flex grid system --- README.md | 599 +++++++++++++++++++++++- at_flex_grid/.DS_Store | Bin 0 -> 6148 bytes at_flex_grid/less/at_flex_grid.less | 129 +++++ at_flex_grid/less/at_flex_grid__lg.less | 4 + at_flex_grid/less/at_flex_grid__md.less | 66 +++ at_flex_grid/less/at_flex_grid__sm.less | 95 ++++ 6 files changed, 892 insertions(+), 1 deletion(-) create mode 100644 at_flex_grid/.DS_Store create mode 100644 at_flex_grid/less/at_flex_grid.less create mode 100644 at_flex_grid/less/at_flex_grid__lg.less create mode 100644 at_flex_grid/less/at_flex_grid__md.less create mode 100644 at_flex_grid/less/at_flex_grid__sm.less diff --git a/README.md b/README.md index 3298c6d..6ad8bc2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,604 @@ -# CSS Utilities +# CSS Utilities ## 1. Responisve Flex Grid A responsive Flex box based grid Layouting module with SCSS and CSS3 ## 2. Responsive 2 Dimensional Grid + +_______ + +```css + +``` + +```html +

Flex Grid

+ +
+

The sn-flex class enables a flex context for all its direct children.. + +

+ 
+    
+      <div class="sn-flex">
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Grid Column

+
+

The flex- class to create columns i.e, to create 2 column use class column flex-2 for 3 column flex-3

+ 
+    
+      <div class="sn-flex flex-3">
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex flex-4">
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+ + +

{{page.fsdId}} - Small View Port Flex Overwrite

+
+

The flex-stack-mobile class to stack/Flex Overwrite all child element in mobile view

+ 
+    
+      <div class="sn-flex flex-stack-mobile">
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid column Overwrite

+
+

The grid-flex-overwrite class to stack/Flex Overwrite columns, for this one more class required on child + elemnet flex-overwrite

+ 
+    
+      <div class="sn-flex grid-flex-overwrite flex-3">
+        <div></div>
+        <div></div>
+        <div class="flex-overwrite"></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Justify-content (Horizontally)

+
+

The item-justify class defines how the browser distributes space between and around content items along + the main axis of their container. +
+ item-justify-: start | end | center | between | around; +

+ 
+    
+      <div class="sn-flex flex-3 item-justify-left">
+        <div></div>
+        <div></div>
+      </div>
+    

+      <div class="sn-flex flex-3 item-justify-right">
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex flex-3 item-justify-center">
+        <div ></div>
+        <div ></div>
+      </div>
+      

+      <div class="sn-flex flex-3 item-justify-between">
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex flex-3 item-justify-around">
+        <div></div>
+        <div></div>
+      </div>
+    
+
+

Justify left

+
+
+
+
+

Justify right

+
+
+
+
+

Justify center

+
+
+
+
+

Justify between

+
+
+
+
+

Justify around

+
+
+
+
+
+ +

{{page.fsdId}} - Align Items (Vertically)

+
+

The item-align- class defines how the browser distributes space between and around content items along the + main axis of their container. +
+ item-align-: start | end | center | between | around; +

+ 
+    
+      <div class="sn-flex flex-3 item-align-start">
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex flex-3 item-align-end">
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex flex-3 item-align-center">
+        <div></div>
+        <div></div>
+      </div>
+      <div class="sn-flex flex-3 item-align-between">
+        <div></div>
+        <div></div>
+      </div>
+      

+      <div class="sn-flex flex-3 item-align-around">
+        <div></div>
+        <div></div>
+      </div>
+    
+
+

Align start

+
+
+
+
+

Align end

+
+
+
+
+

Align center

+
+
+
+
+

Align between

+
+
+
+
+

Align around

+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-1-2

+ +
+

+ The class flex-1-1-2 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile/tablet and 2 column in deskop +

+ 
+    
+      <div class="sn-flex flex-1-1-2">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-1-3

+ +
+

+ The class flex-1-1-3 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile/tablet and 3 column in deskop +

+ 
+    
+      <div class="sn-flex flex-1-1-3">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-2-2

+ +
+

+ The class flex-1-2-2 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile and 2 column in tablet/deskop +

+ 
+    
+      <div class="sn-flex flex-1-2-2">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-2-3

+ +
+

+ The class flex-1-2-3 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile, 2 column in tablet and 3 column in deskop +

+ 
+    
+      <div class="sn-flex flex-1-2-3">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-3-3

+ +
+

+ The class flex-1-3-3 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile and 3 column in tablet/deskop +

+ 
+    
+      <div class="sn-flex flex-1-3-3">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-1-4

+ +
+

+ The class flex-1-1-4 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile/tablet and 4 column in deskop +

+ 
+    
+      <div class="sn-flex flex-1-1-4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-2-4

+ +
+

+ The class flex-1-2-4 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile, 2 column in tablet and 4 column in deskop +

+ 
+    
+      <div class="sn-flex flex-1-2-4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-3-4

+ +
+

+ The class flex-1-3-4 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile, 3 column in tablet and 4 column in deskop +

+ 
+    
+      <div class="sn-flex flex-1-3-4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

{{page.fsdId}} - Flex Grid 1-4-4

+ +
+

+ The class flex-1-4-4 use to get a three various-width columns starting at mobile and scaling to desktops +
1 column in mobile and 4 column in tablet/deskop +

+ 
+    
+      <div class="sn-flex flex-1-4-4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +

{{page.fsdId}} - Flex Grid as per content width

+ +
+

Use flex-none class to make container inline(width according to the content)

+ 
+    
+      <div class="sn-flex flex-none">
+        <div>Component A</div>
+        <div>Component B</div>
+      </div>
+    
+
+
+
Component A
+
Component B
+
+
+ + +

{{page.fsdId}} - Flex Grid grow classes

+ +
+

The grow class specifies how much the item will grow relative to the rest of the flexible items inside the + same container.

+ 
+    
+      <div class="sn-flex grow">
+        <div>Col 1</div>
+        <div class="grow-2">Col 2</div>
+        <div>Col 3</div>
+        <div class="grow-2">Col 4</div>
+        <div>Col 2</div>
+      </div>
+    
+
+
+
Col 1
+
Col 2
+
Col 3
+
Col 4
+
Col 2
+
+
+ +``` diff --git a/at_flex_grid/.DS_Store b/at_flex_grid/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..f3f819d1bf72a5b0c1c4274a90d8e1fe1305733f GIT binary patch literal 6148 zcmeHKy>0?A47TYZA$4J7%quXlM(Fwkw|1z+Avzo!;-_=QzF^;{pJP`d;yO|lWJ}5C z*s*i@q)TEV;^n!W6HSR|f+onK42YNqT_c-32D0SnHuGlHZ}$U9{;Ns8y`qlRbfjbX z{j<+Y-?p#o_Iz3qeJx(G+tSzm>f66xauSQUkLIxJ`rQUb%_v?MXTTY72AlzB;I<6d zoilm9?J}O-8E^*fkO4U#0-9hnOp5vFK$lAZUUuLk#FGGCf3^)T1 z#sF7!Q!lY8yIZfeCwFZ?dqWeEc}Wxq^x_eKft(|=>{Ndc9rL1LQj{!W&*4CS2xLOM Ja|Zr^fp3cmDQo}$ literal 0 HcmV?d00001 diff --git a/at_flex_grid/less/at_flex_grid.less b/at_flex_grid/less/at_flex_grid.less new file mode 100644 index 0000000..af48661 --- /dev/null +++ b/at_flex_grid/less/at_flex_grid.less @@ -0,0 +1,129 @@ +@horizontal-spacing-section :0; // horizontal spacing between elements side by side, e.g. between two buttons on the same row +@vertical-spacing-section :20px; // vertical spacing between elements side by side, e.g. between two buttons on the same row +.sn-flex { + display: flex; + >* { + flex: 1 1 auto; + margin-left: @horizontal-spacing-section; + margin-bottom: @vertical-spacing-section; + &:first-child { + margin-left: 0; + } + } + // overrite flex on samll screen + &.flex-stack-mobile, &.flex-1, &.flex-1-1-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-1-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-1-1-4, &.flex-1-4-4 { + display: block; + > * { + margin-left: 0; + } + } + // justify-content + &.item-justify-left { + justify-content: flex-start; + } + &.item-justify-right { + justify-content: flex-end; + } + &.item-justify-center { + justify-content: center; + } + &.item-justify-between { + justify-content: space-between; + } + &.item-justify-around { + justify-content: space-around; + } + // Align Items + &.item-align-start { + align-items: flex-start; + } + &.item-align-end { + align-items: flex-end; + } + &.item-align-center { + align-items: center; + } + &.item-align-between { + align-items: space-between; + } + &.item-align-around { + align-items: space-around; + } + &.inline { + display: inline-flex; + } + .no-grow{ + flex-grow: 0; + } + // overrite column in a flex layout + &.grid-flex-overwrite { + flex-wrap: wrap; + .flex-overwrite { + flex: 0 0 100%; + max-width: 100%; + margin-left: 0; + & + * { + margin-left: 0; + } + } + } + // column will expand as per the content within + &.flex-none { + >* { + flex: 0 0 auto; + } + } + &.no-vertical-margin { + > * { + &:nth-child(even), + &:nth-child(odd) { + margin-bottom: 0; + } + } + } + // no margin class + &.grid-flex-no-margin { + > * { + &:nth-child(even), + &:nth-child(odd) { + margin-left: 0 !important; + } + } + } + .sn-flex { + margin-bottom: 0; + } +} + +// class for snflex, jc: justify-center, ac: align-center +.sn-flex-jc-ac { + .sn-flex; + .item-justify-center; + .item-align-center; +} + +// class for snflex, jb: justify-between, ac: align-center +.sn-flex-jb-ac { + .sn-flex; + .item-justify-between; + .item-align-center; +} + +// sn-flex helper classes +.flex-stack-helper { + display: block; + > * { + margin-left: 0; + margin-bottom: @horizontal-spacing-section; + } +} + +.flex-stack-helper-overwrite { + display: flex; + > * { + margin-left: @horizontal-spacing-section; + &:first-child { + margin-left: 0; + } + } +} diff --git a/at_flex_grid/less/at_flex_grid__lg.less b/at_flex_grid/less/at_flex_grid__lg.less new file mode 100644 index 0000000..a9dedab --- /dev/null +++ b/at_flex_grid/less/at_flex_grid__lg.less @@ -0,0 +1,4 @@ +@media (min-width: @screen-lg-min) { + .at_flex { + } +} diff --git a/at_flex_grid/less/at_flex_grid__md.less b/at_flex_grid/less/at_flex_grid__md.less new file mode 100644 index 0000000..b19aaaf --- /dev/null +++ b/at_flex_grid/less/at_flex_grid__md.less @@ -0,0 +1,66 @@ +@media (min-width: @screen-md-min) { + + @flex-2-spacing: 0; + @flex-3-spacing: 0; + @flex-4-spacing: 0; + .sn-flex { + &.flex-1-2-3, &.flex-1-2-4 { + > * { + &:nth-child(2n+3) { + margin-left: @horizontal-spacing-section; + } + } + } + &.flex-1-3-4 { + > * { + &:nth-child(3n+4) { + margin-left: @horizontal-spacing-section; + } + } + } + &.flex-2, &.flex-1-1-2, &.flex-1-2-2 { + .flex-stack-helper-overwrite; + > * { + flex: 0 0 auto; + flex-basis: calc(~'50% - '@flex-2-spacing); + max-width: calc(~'50% - '@flex-2-spacing); + &:nth-child(2n+3) { + margin-left: 0; + } + } + } + &.flex-3, &.flex-1-1-3, &.flex-1-2-3 { + .flex-stack-helper-overwrite; + > * { + flex: 0 0 auto; + flex-basis: calc(~'33.3333% - '@flex-3-spacing); + max-width: calc(~'33.3333% - '@flex-3-spacing); + &:nth-child(3n+4) { + margin-left: 0; + } + } + .flex-overwrite { + margin-left: 0; + } + } + &.flex-4, &.flex-1-1-4, &.flex-1-2-4, &.flex-1-3-4, &.flex-1-4-4 { + .flex-stack-helper-overwrite; + > * { + flex: 0 0 auto; + flex-basis: calc(~'25% - '@flex-4-spacing); + max-width: calc(~'25% - '@flex-4-spacing); + &:nth-child(4n+5) { + margin-left: 0; + } + } + .flex-overwrite { + margin-left: 0; + } + } + .grow-md-4 { + flex-grow: 4; + } + } +} + + diff --git a/at_flex_grid/less/at_flex_grid__sm.less b/at_flex_grid/less/at_flex_grid__sm.less new file mode 100644 index 0000000..c49187a --- /dev/null +++ b/at_flex_grid/less/at_flex_grid__sm.less @@ -0,0 +1,95 @@ +@media (min-width: @screen-sm-min) { + @flex-2-spacing: 0; + @flex-3-spacing: 0; + @flex-4-spacing: 0; + .sn-flex { + @total-col: 12; + @flex-width : percentage(1/@total-col); + >* { + margin-bottom: @vertical-spacing-section; + margin-left: @horizontal-spacing-section; + &:first-child { + margin-left: 0; + } + } + + &.flex-stack-mobile, &.flex-1, &.flex-1-1-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-1-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-1-1-4, &.flex-1-4-4 { + display: flex; + flex-wrap: nowrap; + > * { + margin-left: @horizontal-spacing-section; + &:first-child { + margin-left: 0; + } + } + } + &.flex-1, &.flex-1-1-3, &.flex-2, &.flex-1-1-2, &.flex-1-2-2, &.flex-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-3-4, &.flex-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-4, &.flex-1-1-4, &.flex-1-4-4, &[class*="overflow"]{ + flex-wrap: wrap; + } + &.flex-1, &.flex-1-1-2, &.flex-1-1-3, &.flex-1-1-4 { + + margin-left: 0; + margin-bottom: @vertical-spacing-section; + } + &.flex-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4{ + > * { + flex: 0 0 auto; + flex-basis: calc(~'50% - '@flex-2-spacing); + max-width: calc(~'50% - '@flex-2-spacing); + &:nth-child(2n+3) { + margin-left: 0; + } + } + } + &.flex-3, &.flex-1-3-4, &.flex-1-3-3 { + > * { + flex: 0 0 auto; + flex-basis: calc(~'33.3333% - '@flex-3-spacing); + max-width: calc(~'33.3333% - '@flex-3-spacing); + &:nth-child(3n+4) { + margin-left: 0; + } + } + } + + + &.flex-4, &.flex-1-4-4 { + > * { + flex: 0 0 auto; + flex-basis: calc(~'25% - '@flex-4-spacing); + max-width: calc(~'25% - '@flex-4-spacing); + &:nth-child(4n+5) { + margin-left: 0; + } + } + } + + + .grid-loop (@i) when (@i > 0) { + .flex-width-@{i}-col { + flex-basis: @flex-width * @i; + max-width: @flex-width * @i; + } + .grid-loop(@i - 1); + } + .grid-loop (@total-col); + + &.grow { + > *{ + flex-basis: 0; + flex-grow: 1; + padding-left: 10px; + padding-right: 10px; + } + } + .grow-2 { + flex-grow: 2; + } + .grow-3 { + flex-grow: 3; + } + .grow-4 { + flex-grow: 4; + } + } +}