Compare Some Different Grid Systems

Developer
Brandon Kennedy
Size
11,553 Kb
Views
20,240
  1. Compare Some Different Grid Systems Previews
  2. Compare Some Different Grid Systems HTML Codes
  3. Compare Some Different Grid Systems CSS Codes

How do I make an compare some different grid systems?

I wanted to see different grid systems side by side. . What is a compare some different grid systems? How do you make a compare some different grid systems? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

Compare Some Different Grid Systems Previews
IQ Test

Compare Some Different Grid Systems - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Compare Some Different Grid Systems</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Different Responsive Grid Systems</h1>
<p>These are just basic examples of column usage. The total line count given is reflective of the styles needed to display the full spectrum of column sizes for each screen size breakpoint and any modifiers used in the examples below. It is not 100% accurate to each framework as a whole.</p>
<div id="grid--bootstrap"> <h3>Bootstrap<small>(332 lines of CSS)</small></h3> <p>halves</p> <div class="row"> <div class="col-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> <p>thirds-uneven</p> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-8">col-xs-8</div> </div> <p>quarters-uneven</p> <div class="row"> <div class="col-xs-3">col-xs-3</div> <div class="col-xs-9">col-xs-9</div> </div> <p>thirds-even</p> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div> <p>offset</p> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4 col-xs-offset-4">col-xs-4 col-xs-offset-4</div> </div> <p>incomplete</p> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div> <p>wrapped</p> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-6">col-xs-6</div> </div>
</div>
<div id="grid--ui-kit"> <h3>UI Kit<small>(764 lines of CSS)</small></h3> <p>halves</p> <div class="uk-grid"> <div class="uk-width-1-2">uk-width-1-2</div> <div class="uk-width-1-2">uk-width-1-2</div> </div> <p>thirds-uneven</p> <div class="uk-grid"> <div class="uk-width-1-3">uk-width-1-3</div> <div class="uk-width-2-3">uk-width-2-3</div> </div> <p>quarters-uneven</p> <div class="uk-grid"> <div class="uk-width-1-4">uk-width-1-4</div> <div class="uk-width-3-4">uk-width-3-4</div> </div> <p>thirds-even</p> <div class="uk-grid"> <div class="uk-width-1-3">uk-width-1-3</div> <div class="uk-width-1-3">uk-width-1-3</div> <div class="uk-width-1-3">uk-width-1-3</div> </div> <p>offset</p> <div class="uk-grid"> <div class="uk-width-1-3">uk-width-1-3</div> <div class="uk-width-1-3 uk-pull-1-3">uk-width-1-3 uk-pull-1-3</div> </div> <p>incomplete</p> <div class="uk-grid"> <div class="uk-width-1-3">uk-width-1-3</div> <div class="uk-width-1-3">uk-width-1-3</div> </div> <p>wrapped</p> <div class="uk-grid"> <div class="uk-width-1-3">uk-width-1-3</div> <div class="uk-width-1-3">uk-width-1-3</div> <div class="uk-width-1-2">uk-width-1-2</div> </div>
</div>
<div id="grid--foundation"> <h3>Foundation<small>(313 lines of CSS)</small></h3> <p>halves</p> <div class="row"> <div class="columns small-6">columns small-6</div> <div class="columns small-6">columns small-6</div> </div> <p>thirds-uneven</p> <div class="row"> <div class="columns small-4">columns small-4</div> <div class="columns small-8">columns small-8</div> </div> <p>quarters-uneven</p> <div class="row"> <div class="columns small-3">columns small-3</div> <div class="columns small-9">columns small-9</div> </div> <p>thirds-even</p> <div class="row"> <div class="columns small-4">columns small-4</div> <div class="columns small-4">columns small-4</div> <div class="columns small-4">columns small-4</div> </div> <p>offset</p> <div class="row"> <div class="columns small-4">columns small-4</div> <div class="columns small-4">columns small-4</div> </div> <p>incomplete</p> <div class="row"> <div class="columns small-4">columns small-4</div> <div class="columns small-4 end">columns small-4 end</div> </div> <p>wrapped</p> <div class="row"> <div class="columns small-4">columns small-4</div> <div class="columns small-4">columns small-4</div> <div class="columns small-6">columns small-6</div> </div>
</div>
<div id="grid--flex"> <h3>Custom Built Flexbox Grid<small>(142 lines of CSS)</small></h3> <p>halves</p> <div class="row"> <div class="column-1-2">column-1-2</div> <div class="column">column</div> </div> <p>thirds-uneven</p> <div class="row"> <div class="column-1-3">column-1-3</div> <div class="column">column</div> </div> <p>quarters-uneven</p> <div class="row"> <div class="column-1-4">column-1-4</div> <div class="column">column</div> </div> <p>thirds-even</p> <div class="row"> <div class="column-1-3">column-1-3</div> <div class="column-1-3">column-1-3</div> <div class="column-1-3">column-1-3</div> </div> <p>offset</p> <div class="row"> <div class="column-1-3">column-1-3</div> <div class="column-1-3">column-1-3</div> </div> <p>justified (row class)</p> <div class="row justify"> <div class="column-1-3">column-1-3</div> <div class="column-1-3">column-1-3</div> </div> <p>incomplete</p> <div class="row"> <div class="column-1-3">column-1-3</div> <div class="column-1-3">column-1-3</div> </div> <p>no-wrap</p> <div class="row"> <div class="column-1-3">column-1-3</div> <div class="column-1-3">column-1-3</div> <div class="column-1-2">column-1-2</div> </div> <p>wrapped (row class)</p> <div class="row wrap"> <div class="column-1-3">column-1-3</div> <div class="column-1-3">column-1-3</div> <div class="column-1-2">column-1-2</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Compare Some Different Grid Systems - Script Codes CSS Codes

$color-settings: ( 'colors': ( 'a': ( 0: #444, 'name': 'gray' ), 'b': ( 0: #f06, 'name': 'pink'), 'c': ( 0: #349bff, 'name': 'blue'), 'bootstrap': ( 0: #5b4282, 'name': 'bootstrap'), 'uikit': ( 0: #3dc0f1, 'name': 'ui-kit'), 'foundation': ( 0: #2ba6cb, 'name': 'foundation'), 'flex': ( 0: #f06, 'name': 'flex'), )
);
@include define-color-set;
$transition-duration: .4s;
$transition-easing: ease-in-out;
$transition: all $transition-duration $transition-easing;
$btn-color: color(b);
$btn-glow: 0 0 .6rem color($btn-color, -6);
$breakpoints: ( 'bootstrap': ( 'sm': 400px, 'md': 800px, 'lg': 1200px ), 'ui-kit': ( 'small': 400px, 'medium': 800px, 'large': 1200px ), 'foundation': ( 'small': 400px, 'medium': 800px, 'large': 1200px ), 'flex': ( 'sm': 400px, 'md': 800px, 'lg': 1200px ),
);
@mixin build-bootstrap-grid($media-size: 'md') { @for $i from 1 through 12 { @if $media-size == 'xs' { // build default grid [class*=' col-'], [class^='col-'] { &[class*='-#{$i}'] { width: percentage($i / 12); } &[class*='-offset-#{$i}'] { margin: { left: percentage($i / 12); } } } } @else { .col-#{$media-size}-#{$i} { // build media size grid width: percentage($i / 12); } .col-#{$media-size}-offset-#{$i} { margin: { left: percentage($i / 12); } } } }
}
@mixin build-ui-kit-grid($media-size) { @for $i from 1 through 6 { @for $x from 1 through $i { @if $media-size == 'default' { .uk-width-#{$x}-#{$i} { width: percentage($x / $i); } .uk-pull-#{$x}-#{$i} { margin: { left: percentage($x / $i); } } } @else { .uk-width-#{$media-size}-#{$x}-#{$i} { width: percentage($x / $i); } .uk-pull-#{$media-size}-#{$x}-#{$i} { margin: { left: percentage($x / $i); } } } } } @for $x from 1 through 10 { @if $media-size == 'default' { .uk-width-#{$x}-10 { width: percentage($x / 10); } .uk-pull-#{$media-size}-#{$x}-10 { margin: { left: percentage($x / 10); } } } @else { .uk-width-#{$media-size}-#{$x}-10 { width: percentage($x / 10); } .uk-pull-#{$media-size}-#{$x}-10 { margin: { left: percentage($x / 10); } } } }
}
@mixin build-foundation-grid($media-size) { @for $i from 1 through 12 { > .#{$media-size}-#{$i} { // build media size grid width: percentage($i / 12); } > .#{$media-size}-offset-#{$i} { // build media size grid margin: { left: percentage($i / 12); } } }
}
@mixin build-flex-grid($media-size: 'md') { $media-size: '#{$media-size}-'; @if $media-size == 'default-' { $media-size: ''; } @else { [class*=' column-'], [class^='column-'] { &[class*='-#{$media-size}'] { flex-shrink: 100; width: 100%; } } } .column { flex-shrink: 100; width: 100%; } @for $i from 1 through 5 { .column-#{$media-size}1-#{$i} { width: percentage(1 / $i); } }
}
html { font: { size: 10px; }
}
body { background: radial-gradient(color(white), color(white, 1), color(white, 2.5)); box-shadow: inset 20vw 0 16vw -20vw color(c, -5), inset -20vw 0 16vw -20vw color(c, -5); font: { size: 1.4rem; } min-height: 100vh; padding: 2rem; transition: $transition; @media (min-width: 600px) { box-shadow: inset 40vw 0 36vw -40vw color(c, -5), inset -40vw 0 36vw -40vw color(c, -5); padding: 2rem 3rem; }
}
h3 { border: { top: .2rem solid; } margin: 3rem 0 .6rem; padding: .4rem 0 0; small { margin: { left: 2rem; } }
}
p { margin: 2rem 0 .6rem;
}
#grid--bootstrap { h3 { color: color(bootstrap); } .row { margin: { left: -1rem; right: -1rem; }; &:before, &:after { clear: both; content: ""; display: table; } [class*=' col-'], [class^='col-'] { float: left; padding: { left: 1rem; right: 1rem; }; } @include build-bootstrap-grid('xs'); @each $point in map-get($breakpoints, 'bootstrap') { @media (min-width: #{nth($point, 2)}) { @include build-bootstrap-grid('#{nth($point, 1)}'); } } }
}
#grid--ui-kit { h3 { color: color(uikit); } .uk-grid { margin: { left: -1rem; right: -1rem; }; &:before, &:after { clear: both; content: ""; display: table; } [class*=' uk-width-'], [class^='uk-width-'] { float: left; padding: { left: 1rem; right: 1rem; }; } @include build-ui-kit-grid('default'); @each $point in map-get($breakpoints, 'ui-kit') { @media (min-width: #{nth($point, 2)}) { @include build-ui-kit-grid('#{nth($point, 1)}'); } } }
}
#grid--foundation { h3 { color: color(foundation); } .row { margin: { left: -1rem; right: -1rem; }; &:before, &:after { clear: both; content: ""; display: table; } > .columns { float: left; padding: { left: 1rem; right: 1rem; }; + .columns:last-child { float: right; &.end { float: left; } } } @include build-foundation-grid('small'); @each $point in map-get($breakpoints, 'foundation') { @media (min-width: #{nth($point, 2)}) { @include build-foundation-grid('#{nth($point, 1)}'); } } }
}
#grid--flex { h3 { color: color(flex); } .row { display: flex; flex-wrap: no-wrap; justify-content: flex-start; margin: { left: -1rem; right: -1rem; } &.wrap { flex-wrap: wrap; } &.justify { justify-content: space-between; } > [class*=' column-'], > [class^='column-'], > .column { padding: { left: 1rem; right: 1rem; } } @include build-flex-grid('default'); @each $point in map-get($breakpoints, 'flex') { @media (min-width: #{nth($point, 2)}) { @include build-flex-grid('#{nth($point, 1)}'); } } }
}
// highlight grid item
%gutter { box-shadow: inset 1rem 0 0 0 rgba(color(white), 0.3), inset -1rem 0 0 0 rgba(color(white), 0.3); padding: { bottom: .4rem; top: .4rem; }
}
#grid--bootstrap { .row { [class*=' col-'], [class^='col-'] { background: color(bootstrap, -5); @extend %gutter; } }
}
#grid--ui-kit { .uk-grid { [class*=' uk-width-'], [class^='uk-width-'] { background: color(uikit, -5); @extend %gutter; } }
}
#grid--foundation { .row { > .columns { background: color(foundation, -5); @extend %gutter; } }
}
#grid--flex { .row { > [class*=' column-'], > [class^='column-'], > .column{ background: color(flex, -5); @extend %gutter; } }
}
//************************************************
* { &, &:before, &:after { box-sizing: border-box; &, &:focus, &:active, &:focus:active { outline: none; } }
}
Compare Some Different Grid Systems - Script Codes
Compare Some Different Grid Systems - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 4
Size 11,553 Kb
Views 20,240
Do you need developer help for Compare Some Different Grid Systems?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brandon Kennedy (brandonkennedy) Script Codes
Name
Crooked section dividers
Scrolling helix
CSS Only Banner Rotation
Negative Padding
Browser Detection
Lazyload.js
3D 2D Box-Shadow Fish
Box-shadow loader
And yet another box shadow loader
SCSS Tick Marks Function
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!