Bootstrap-like Grid System for Shopware 5 using PocketGrid

How to create rows and columns using PocketGrid as it is?

<div class="block-group"> <div class="b1 block">b1</div> <div class="b2 block">b2</div> <div class="b3 block">b3</div> <div class="b4 block">b4</div> <div class="b5 block">b5</div> <div class="b6 block">b6</div> <div class="b7 block">b7</div> <div class="b8 block">b8</div> <div class="b9 block">b9</div> <div class="b10 block">b10</div> </div>.b1, .b2, .b3 { width: 50%; } .b4, .b5, .b6, .b7 { width: 25%; } .b8, .b9, .b10 { width: 20%; }
  • b1 + b2 = 50% + 50% = 100%, so b3 goes to a new line.
  • b3 + b4 + b5 = 50% + 25% + 25% = 100%, so b6 goes to a new line.
  • b6 + b7 + b8 + b9 = 25% + 25% + 20% + 20% = 90%, but b10 has a width of 20%, so the total would be greater than 100%. Thus b10 goes to a new line!

How can we modify PocketGrid like bootstrap column grid using a LESS mixin?

  • We don’t want to add class. block-group for each row every time, it’s better to have these extended with the classes we use
  • We don’t’ want to add a. block class for each column, This also we need to apply dynamically.
  • We don’t want to use % anymore, instead, we use it like Bootstrap 12 column grid system.
// Variables @grid-columns: 12; //Loop Mixin .for(@i, @n) { .-each(@i) } .for(@n) when (isnumber(@n)) { .for(1, @n) } .for(@i, @n) when not (@i = @n) { .for((@i + (@n - @i) / abs(@n - @i)), @n); } .for(@array) when (default()) { .for-impl_(length(@array)) } .for-impl_(@i) when (@i > 1) { .for-impl_((@i - 1)) } .for-impl_(@i) when (@i > 0) { .-each(extract(@array, @i)) } // makeGrid Mixin .makeGrid(@child) { &:extend(.block-group all); // loop child .for(@child); .-each(@value) { @class: extract(@value, 1); @column: extract(@value, 2); // create child div .@{class} { &:extend(.block all); @media (min-width: 480px) { width: percentage((@column / @grid-columns)); } } } }
@import "mixin-name"; // Style .header{ .makeGrid( @child: logo 2, navigation 8, search 2; ); } <span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span><div class="header"> <div class="logo"></div> <div class="navigation"></div> <div class="search"></div> </div>
  • Automatic extension of the parent (. header) with. block-group
  • Looping all child and extending child with. block
  • The child must be a class without a dot(.)

Extend mixin to next level

  • Responsive breakpoints for different screen widths. Eg:
  • .makeGrid( @child: logo 2, navigation 8, search 2; @GridXS: logo 12, navigation 12, search 12; @GridSM: logo 4, navigation 6, search 2; @GridMD: logo 2, navigation 8, search 2; @GridLG: logo 2, navigation 8, search 2; @GridXL: logo 2, navigation 8, search 2; );
  • Let’s say we need to include another column in the footer — we can create a child without adding . block-group and also without MakeGrid
  • .makeChild( @class: search; @column: 4; );
  • Can manage margin/padding from mixin for all the children or to individual child, Eg:
  • .makeGrid( @child: logo 2; @padding: 0; @margin: 0; @childMargin: 0; @childPadding: 0; );

Compiled CSS from our example

.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before, .header, .header:after, .header:before, .header .logo, .header .logo:after, .header .logo:before, .header .navigation, .header .navigation:after, .header .navigation:before, .header .search, .header .search:after, .header .search:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .block-group, .header { *zoom: 1; } .block-group:before, .block-group:after, .header:before, .header:after { display: table; content: ""; line-height: 0; } .block-group:after, .header:after { clear: both; } .block-group, .header { list-style-type: none; padding: 0; margin: 0; } .block-group>.block-group, .header>.header { clear: none; float: left; margin: 0 !important; } .block, .header .logo, .header .navigation, .header .search { float: left; width: 100%; } @media (min-width: 480px) { .header .logo { width: 16.66666667%; } } @media (min-width: 480px) { .header .navigation { width: 66.66666667%; } } @media (min-width: 480px) { .header .search { width: 16.66666667%; } }

--

--

--

2Hats Logic is a technology service company provide customized web and mobile application development.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Manage Heroku Infrastructure with Terraform

The Five Pillars of Performance Engineering at Insider

Building the Obstacle Course

Transition from Non-IT to IT Career… Anyone else make a drastic career change

with non tech degree to get a job

Starting with Rust

Guide for Product Owners deploying Bluetooth Products: BLE Debugging

More focus on business value with cloud-native architecture and serverless software

Your first contribution to Flutter Buddies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
2Hats Logic Solutions

2Hats Logic Solutions

2Hats Logic is a technology service company provide customized web and mobile application development.

More from Medium

How to change theme dynamically client side in PrismJS

Generate avatar or profile picture with username initials (lettered avatar) with React

Calavera Studio is back

Build and deploy a chrome extension with React