Attribute Module CSS Grid Mixins
How do I make an attribute module css grid mixins?
Generic LESS mixins for creating a grid system leveraging the Attribute Module technique.More reading: http://glenmaddern.com/articles/introducing-am-css. What is a attribute module css grid mixins? How do you make a attribute module css grid mixins? This script and codes were developed by Bryan Fillmer on 11 December 2022, Sunday.
Attribute Module CSS Grid Mixins Previews
Attribute Module CSS Grid Mixins - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Attribute Module CSS Grid Mixins</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* === General === */
@import url(https://fonts.googleapis.com/css?family=Cabin:400,700);
body { padding: 3em; font-family: 'Cabin', sans-serif; font-weight: 400; font-size: 1em; color: #a3bfc6; background-color: #222a30;
}
h1,
h2,
h3,
h4 { font-weight: 700;
}
section div { margin-bottom: 0.5em;
}
section div div { height: 50px; background-color: #293a42;
}
/* === Grid === */
/** * I love the thought of calling a grid system with fractions: * grid-col="1/2", grid-col="2/3", grid-row etc. * So, let's build a mixin to generate the basic styles for us. * * At first the lack of simplified fractions bugged me a bit, but * after some thought I think it enhances the descriptive properties * of the system when viewing the HTML. A 1/2 column gives you no * information on the actual number of columns available in the grid. * * Thanks to @mdo for the great Preboot mixins and variables which * I based this grid setup on. (https://github.com/mdo/preboot) */
[grid-row] { *zoom: 1; margin-left: -0.5em; margin-right: -0.5em;
}
[grid-row]:before,
[grid-row]:after { content: " "; display: table; line-height: 0;
}
[grid-row]:after { clear: both;
}
[grid-col~='1/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='1/4'] { float: left; width: 25%; }
}
[grid-col~='2/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='2/4'] { float: left; width: 50%; }
}
[grid-col~='3/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='3/4'] { float: left; width: 75%; }
}
[grid-col~='4/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='4/4'] { float: left; width: 100%; }
}
[grid-col~='1/3'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='1/3'] { float: left; width: 33.33333333%; }
}
[grid-col~='2/3'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='2/3'] { float: left; width: 66.66666667%; }
}
[grid-col~='3/3'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='3/3'] { float: left; width: 100%; }
}
[grid-col~='1/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='1/12'] { float: left; width: 8.33333333%; }
}
[grid-col~='2/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='2/12'] { float: left; width: 16.66666667%; }
}
[grid-col~='3/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='3/12'] { float: left; width: 25%; }
}
[grid-col~='4/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='4/12'] { float: left; width: 33.33333333%; }
}
[grid-col~='5/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='5/12'] { float: left; width: 41.66666667%; }
}
[grid-col~='6/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='6/12'] { float: left; width: 50%; }
}
[grid-col~='7/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='7/12'] { float: left; width: 58.33333333%; }
}
[grid-col~='8/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='8/12'] { float: left; width: 66.66666667%; }
}
[grid-col~='9/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='9/12'] { float: left; width: 75%; }
}
[grid-col~='10/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='10/12'] { float: left; width: 83.33333333%; }
}
[grid-col~='11/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='11/12'] { float: left; width: 91.66666667%; }
}
[grid-col~='12/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='12/12'] { float: left; width: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Attribute Module CSS Grid Mixins</h1>
<h2>Four Column</h2>
<section grid-row> <div grid-col="1/4"> <div></div> </div> <div grid-col="1/4"> <div></div> </div> <div grid-col="1/4"> <div></div> </div> <div grid-col="1/4"> <div></div> </div>
</section>
<section grid-row> <div grid-col="1/4"> <div></div> </div> <div grid-col="1/4"> <div></div> </div> <div grid-col="2/4"> <div></div> </div>
</section>
<section grid-row> <div grid-col="1/4"> <div></div> </div> <div grid-col="3/4"> <div></div> </div>
</section>
<h2>Three Column</h2>
<section grid-row> <div grid-col="1/3"> <div></div> </div> <div grid-col="1/3"> <div></div> </div> <div grid-col="1/3"> <div></div> </div>
</section>
<section grid-row> <div grid-col="1/3"> <div></div> </div> <div grid-col="2/3"> <div></div> </div>
</section>
<h2>Twelve Column</h2>
<section grid-row> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div>
</section>
<section grid-row> <div grid-col="6/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div> <div grid-col="1/12"> <div></div> </div>
</section> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Attribute Module CSS Grid Mixins - Script Codes CSS Codes
/* === General === */
@import url(https://fonts.googleapis.com/css?family=Cabin:400,700);
body { padding: 3em; font-family: 'Cabin', sans-serif; font-weight: 400; font-size: 1em; color: #a3bfc6; background-color: #222a30;
}
h1,
h2,
h3,
h4 { font-weight: 700;
}
section div { margin-bottom: 0.5em;
}
section div div { height: 50px; background-color: #293a42;
}
/* === Grid === */
/** * I love the thought of calling a grid system with fractions: * grid-col="1/2", grid-col="2/3", grid-row etc. * So, let's build a mixin to generate the basic styles for us. * * At first the lack of simplified fractions bugged me a bit, but * after some thought I think it enhances the descriptive properties * of the system when viewing the HTML. A 1/2 column gives you no * information on the actual number of columns available in the grid. * * Thanks to @mdo for the great Preboot mixins and variables which * I based this grid setup on. (https://github.com/mdo/preboot) */
[grid-row] { *zoom: 1; margin-left: -0.5em; margin-right: -0.5em;
}
[grid-row]:before,
[grid-row]:after { content: " "; display: table; line-height: 0;
}
[grid-row]:after { clear: both;
}
[grid-col~='1/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='1/4'] { float: left; width: 25%; }
}
[grid-col~='2/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='2/4'] { float: left; width: 50%; }
}
[grid-col~='3/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='3/4'] { float: left; width: 75%; }
}
[grid-col~='4/4'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='4/4'] { float: left; width: 100%; }
}
[grid-col~='1/3'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='1/3'] { float: left; width: 33.33333333%; }
}
[grid-col~='2/3'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='2/3'] { float: left; width: 66.66666667%; }
}
[grid-col~='3/3'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='3/3'] { float: left; width: 100%; }
}
[grid-col~='1/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='1/12'] { float: left; width: 8.33333333%; }
}
[grid-col~='2/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='2/12'] { float: left; width: 16.66666667%; }
}
[grid-col~='3/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='3/12'] { float: left; width: 25%; }
}
[grid-col~='4/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='4/12'] { float: left; width: 33.33333333%; }
}
[grid-col~='5/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='5/12'] { float: left; width: 41.66666667%; }
}
[grid-col~='6/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='6/12'] { float: left; width: 50%; }
}
[grid-col~='7/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='7/12'] { float: left; width: 58.33333333%; }
}
[grid-col~='8/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='8/12'] { float: left; width: 66.66666667%; }
}
[grid-col~='9/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='9/12'] { float: left; width: 75%; }
}
[grid-col~='10/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='10/12'] { float: left; width: 83.33333333%; }
}
[grid-col~='11/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='11/12'] { float: left; width: 91.66666667%; }
}
[grid-col~='12/12'] { min-height: 1px; padding-left: 0.5em; padding-right: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width: 33em) { [grid-col~='12/12'] { float: left; width: 100%; }
}
Attribute Module CSS Grid Mixins - Script Codes JS Codes
/* Nope. */
| Developer | Bryan Fillmer |
| Username | bfillmer |
| Uploaded | December 11, 2022 |
| Rating | 3 |
| Size | 5,014 Kb |
| Views | 10,120 |
Do you need developer help for Attribute Module CSS Grid Mixins?
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!
Bryan Fillmer (bfillmer) Script Codes
| Name | Size |
| On A Boat | 2,615 Kb |
| Useful Loading Overlay | 3,833 Kb |
| YOLO KEITH | 4,043 Kb |
| Flat Toggle Switch | 2,469 Kb |
| Regex Sensei | 1,551 Kb |
| Attribute Modules for CSS | 5,810 Kb |
| Five Programming Problems | 4,091 Kb |
| General Tax Calculator | 2,902 Kb |
| JS Playground | 3,242 Kb |
| Basic Javascript Chaining | 2,399 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Exploring css spinners | Akagr | 3,569 Kb |
| Flex layout example | Mofny | 1,663 Kb |
| Responsive Pricing Table | Jeremycaris | 2,690 Kb |
| Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
| Prism | Pyrografix | 2,843 Kb |
| Console fun | Dviate | 1,500 Kb |
| Retina canvas w. resize | Erikterwan | 1,882 Kb |
| Clock with full screen background | Owebboy | 2,415 Kb |
| Zip Button test | Lje7462 | 1,932 Kb |
| Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Do you want hide your ip address?
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!