Custom Grid using @size from SASS Map
How do I make an custom grid using @size from sass map?
This allows us to customise what breakpoints get grids and still allows us to use the grid classes inline.. What is a custom grid using @size from sass map? How do you make a custom grid using @size from sass map? This script and codes were developed by James Nowland on 31 October 2022, Monday.
Custom Grid using @size from SASS Map - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Grid using @size from SASS Map</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="page-header"> <h1>Test Custom grid examples</h1> <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p> </div> <h3>Three equal columns</h3> <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p> <div class="row"> <div class="col-4@medium">.col-4@medium</div> <div class="col-4@medium">.col-4@medium</div> <div class="col-4@medium">.col-4@medium</div> </div> <h3>Three unequal columns</h3> <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p> <div class="row"> <div class="col-3@medium">.col-3@medium</div> <div class="col-6@medium">.col-6@medium</div> <div class="col-3@medium">.col-3@medium</div> </div> <h3>Two columns</h3> <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p> <div class="row"> <div class="col-8@medium">.col-8@medium</div> <div class="col-4@medium">.col-4@medium</div> </div> <h3>Full width, single column</h3> <p class="text-warning">No grid classes are necessary for full-width elements.</p> <hr> <h3>Two columns with two nested columns</h3> <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p> <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p> <div class="row"> <div class="col-8@medium"> .col-8@medium <div class="row"> <div class="col-6@medium">.col-6@medium</div> <div class="col-6@medium">.col-6@medium</div> </div> </div> <div class="col-4@medium">.col-4@medium</div> </div> <hr> <h3>Mixed: mobile and desktop</h3> <p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p> <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p> <div class="row"> <div class="col-12 col-8@medium">.col-12 .col-8@medium</div> <div class="col-6 col-4@medium">.col-6 .col-4@medium</div> </div> <div class="row"> <div class="col-6 col-4@medium">.col-6 .col-4@medium</div> <div class="col-6 col-4@medium">.col-6 .col-4@medium</div> <div class="col-6 col-4@medium">.col-6 .col-4@medium</div> </div> <div class="row"> <div class="col-6">.col-6</div> <div class="col-6">.col-6</div> </div> <hr> <h3>Mixed: mobile, tablet, and desktop</h3> <p></p> <div class="row"> <div class="col-12 col-6@small col-8@big">.col-12 .col-6@small .col-8@big</div> <div class="col-6 col-4@big">.col-6 .col-4@big</div> </div> <div class="row"> <div class="col-6 col-4@small">.col-6 .col-4@small</div> <div class="col-6 col-4@small">.col-6 .col-4@small</div> <div class="col-6 col-4@small">.col-6 .col-4@small</div> </div> <hr> <h3>Column clearing</h3> <p><a href="https://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p> <div class="row"> <div class="col-6 col-3@small"> .col-6 .col-3@small <br> Resize your viewport or check it out on your phone for an example. </div> <div class="col-6 col-3@small">.col-6 .col-3@small</div> <!-- Add the extra clearfix for only the required viewport --> <!-- <div class="clearfix visible-xs"></div> --> <div class="col-6 col-3@small">.col-6 .col-3@small</div> <div class="col-6 col-3@small">.col-6 .col-3@small</div> </div> <hr>
<!-- <h3>Offset, push, and pull resets</h3> <p>Reset offsets, pushes, and pulls at specific breakpoints.</p> <div class="row"> <div class="col-sm-5 col-6@medium">.col-sm-5 .col-6@medium</div> <div class="col-sm-5 col-sm-offset-2 col-6@medium col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-6@medium .col-md-offset-0</div> </div> <div class="row"> <div class="col-6@small col-md-5 col-6@lg">.col-6@small .col-md-5 .col-6@lg</div> <div class="col-6@small col-md-5 col-md-offset-2 col-6@lg col-lg-offset-0">.col-6@small .col-md-5 .col-md-offset-2 .col-6@lg .col-lg-offset-0</div> </div>
--> </div> <!-- /container --> <script src="js/index.js"></script>
</body>
</html>
Custom Grid using @size from SASS Map - Script Codes CSS Codes
.container { margin-right: auto; margin-left: auto; padding-left: 25px; padding-right: 25px; max-width: 992px;
}
.container:before, .container:after { content: " "; display: table;
}
.container:after { clear: both;
}
.container--fluid { max-width: none;
}
.row { margin-left: -25px; margin-right: -25px;
}
.row:before, .row:after { content: " "; display: table;
}
.row:after { clear: both;
}
[class^=col-] { float: left; margin: 0; padding: 0 25px; width: 100%;
}
.col-1 { width: 8.33333%;
}
.col-2 { width: 16.66667%;
}
.col-3 { width: 25%;
}
.col-4 { width: 33.33333%;
}
.col-5 { width: 41.66667%;
}
.col-6 { width: 50%;
}
.col-7 { width: 58.33333%;
}
.col-8 { width: 66.66667%;
}
.col-9 { width: 75%;
}
.col-10 { width: 83.33333%;
}
.col-11 { width: 91.66667%;
}
.col-12 { width: 100%;
}
@media (min-width: 480px) { .col-1\@mini { width: 8.33333%; } .col-2\@mini { width: 16.66667%; } .col-3\@mini { width: 25%; } .col-4\@mini { width: 33.33333%; } .col-5\@mini { width: 41.66667%; } .col-6\@mini { width: 50%; } .col-7\@mini { width: 58.33333%; } .col-8\@mini { width: 66.66667%; } .col-9\@mini { width: 75%; } .col-10\@mini { width: 83.33333%; } .col-11\@mini { width: 91.66667%; } .col-12\@mini { width: 100%; }
}
@media (min-width: 640px) { .col-1\@small { width: 8.33333%; } .col-2\@small { width: 16.66667%; } .col-3\@small { width: 25%; } .col-4\@small { width: 33.33333%; } .col-5\@small { width: 41.66667%; } .col-6\@small { width: 50%; } .col-7\@small { width: 58.33333%; } .col-8\@small { width: 66.66667%; } .col-9\@small { width: 75%; } .col-10\@small { width: 83.33333%; } .col-11\@small { width: 91.66667%; } .col-12\@small { width: 100%; }
}
@media (min-width: 768px) { .col-1\@medium { width: 8.33333%; } .col-2\@medium { width: 16.66667%; } .col-3\@medium { width: 25%; } .col-4\@medium { width: 33.33333%; } .col-5\@medium { width: 41.66667%; } .col-6\@medium { width: 50%; } .col-7\@medium { width: 58.33333%; } .col-8\@medium { width: 66.66667%; } .col-9\@medium { width: 75%; } .col-10\@medium { width: 83.33333%; } .col-11\@medium { width: 91.66667%; } .col-12\@medium { width: 100%; }
}
@media (min-width: 992px) { .col-1\@big { width: 8.33333%; } .col-2\@big { width: 16.66667%; } .col-3\@big { width: 25%; } .col-4\@big { width: 33.33333%; } .col-5\@big { width: 41.66667%; } .col-6\@big { width: 50%; } .col-7\@big { width: 58.33333%; } .col-8\@big { width: 66.66667%; } .col-9\@big { width: 75%; } .col-10\@big { width: 83.33333%; } .col-11\@big { width: 91.66667%; } .col-12\@big { width: 100%; }
}
/* apply a natural box layout model to all elements, but allowing components to change */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
[class*="col-"] { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86, 61, 124, 0.15); border: 1px solid #ddd; border: 1px solid rgba(86, 61, 124, 0.2);
}
body { background: red;
}
@media (min-width: 640px) { body { background: white; }
}
Custom Grid using @size from SASS Map - Script Codes JS Codes
// Custom grids that syncs
// inline mediaquries and optional grid generation.
// Works on padding based grid from boostrap
// Custom naming allows using the escaped @ symbol
// @ symbol is used to show a modifier that is triggered by a breakpoint.
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 5,000 Kb |
Views | 20,240 |
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!
Name | Size |
Letting.js Demo using vanilla js. | 2,298 Kb |
Responsive Typography for dummies. | 6,869 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
SVG Modified with Query String | 1,663 Kb |
Download Rebound | 10,865 Kb |
CSS Ribbon with inner border. | 166,994 Kb |
Lorem pixel Images | 2,290 Kb |
Hamburger and Search CSS Animations | 4,173 Kb |
Ad Folding without regions | 3,938 Kb |
Three Heading Solutions | 11,415 Kb |
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!
Name | Username | Size |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
RSW | JordanC | 3,726 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!