Slim Grid SASS SCSS v3.2

Developer
Michael Stursberg
Size
4,709 Kb
Views
14,168
  1. Slim Grid SASS SCSS v3.2 Previews
  2. Slim Grid SASS SCSS v3.2 HTML Codes
  3. Slim Grid SASS SCSS v3.2 CSS Codes

How do I make an slim grid sass scss v3.2?

This is a fork of Simple Grid that has been formatted in scss and modified (http://thisisdallas.github.io/Simple-Grid/). What is a slim grid sass scss v3.2? How do you make a slim grid sass scss v3.2? This script and codes were developed by Michael Stursberg on 27 October 2022, Thursday.

Slim Grid SASS SCSS v3.2 Previews
IQ Test

Slim Grid SASS SCSS v3.2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slim Grid SASS SCSS v3.2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="grid grid-pad"> <div class="col-1-3 med-col-1-4 sm-col-1-2"> <div class="content"> <span>col-1-3</span> </div> </div> <div class="col-1-3 med-col-9-12 sm-col-1-2"> <div class="content"> <span>col-1-3</span> </div> </div> <div class="col-1-3 med-col-1-1 sm-col-1-2"> <div class="content"> <span>col-1-3</span> </div> </div>
</div>
<div class=" "> <!--end .row--> <div class="grid grid-pad"> <div class="col-1-6 med-col-1-3 sm-col-1-1"><div class="content"> <span>col-1-6</span> </div></div> <div class="col-1-6 med-col-1-3 sm-col-1-2"><div class="content"> <span>col-1-6</span> </div></div> <div class="col-1-6 med-col-1-3 sm-col-1-2"><div class="content"> <span>col-1-6</span> </div></div> <div class="col-1-2 med-col-1-1 sm-col-1-1"><div class="content"> <span>col-1-4</span> </div></div> </div> <!--end .row--> <div class="grid grid-pad col-1-2 margin-center"> <div class="col-1-5 med-col-1-1 "><div class="content"> <span>col-1-6</span> </div></div> <div class="col-9-12 push-right"><div class="content vhtest-wrap"> <div class="vhtest vh-center">keep center</div> </div></div> </div> <div class="grid grid-pad col-1-2 margin-center"> <div class="col-1-1"> <div class="content"> <div class="square-test col-1-3 match-height2width">keep square</div> </div> </div> </div> <!--end .row-->
<ul class="serviceshome grid grid-pad col-1-1 list-col3 med-list-col2 sm-list-col1 list-center"> <li class="serlisthome first"> <a href="services/"> <div class="title">Our Service 1</div></a></li> <li class="serlisthome"> <a href="services/"> <div class="title">Our Service 2</div></a></li> <li class="serlisthome"> <a href="services/"> <div class="title">Our Service 3</div></a></li> <li class="serlisthome"> <a href="services/"> <div class="title">Our Service 4</div></a></li> <li class="serlisthome"> <a href="services/"> <div class="title">Our Service 5</div></a></li> <li class="serlisthome last"> <a href="services/"> <div class="title">Our Service 6</div></a></li> </ul> </div>
</div>
<!-- Demo CSS -->
<style> *[class*=col] {
overflow:hidden;
}
.vhtest-wrap {
position: relative; height:155px;
}
.vhtest { background-color: green; padding:11px;
}
.square-test {
text-align:center; background-color: yellow;
}
.content { background-color: gray; padding:1em; overflow: auto; } [class*='list-col'] { list-style-position:inside; }
[class*='list-col'] a { display: inline-block;
}
</style>
</body>
</html>

Slim Grid SASS SCSS v3.2 - Script Codes CSS Codes

/*----- Basics -----*/
*,
*:after,
*:before { box-sizing: border-box;
}
/* vertical/horizontal align */
/* parent or grandparent must be set to position:relative; */
.v-center { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.h-center { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.vh-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.match-height2width:before { content: ''; padding: 50% 0; display: inline-block; vertical-align: top;
}
/*--- Grid----*/
[class*='grid'] { box-sizing: border-box;
}
[class*='col-'] { box-sizing: border-box; float: left; min-height: 1px; padding: .25em .25em;
}
[class*='med-'] { box-sizing: border-box;
}
.grid { width: 100%; max-width: 4000px; min-width: 320px; margin: 0 auto; overflow: hidden;
}
.grid:after { box-sizing: border-box; content: ""; display: table; clear: both;
}
.grid-pad { padding: .25em 0 .25em;
}
.push-right { float: right;
}
.col-1-1 { width: 100%;
}
.col-2-3,
.col-8-12 { width: 66.66%;
}
.col-1-2,
.col-6-12 { width: 50%;
}
.col-1-3,
.col-4-12 { width: 33.33%;
}
.col-1-4,
.col-3-12 { width: 25%;
}
.col-1-5 { width: 20%;
}
.col-1-6,
.col-2-12 { width: 16.667%;
}
.col-1-7 { width: 14.28%;
}
.col-1-8 { width: 12.5%;
}
.col-1-9 { width: 11.1%;
}
.col-1-10 { width: 10%;
}
.col-1-11 { width: 9.09%;
}
.col-1-12 { width: 8.33%;
}
.col-11-12 { width: 91.66%;
}
.col-10-12 { width: 83.333%;
}
.col-9-12 { width: 75%;
}
.col-5-12 { width: 41.66%;
}
.col-7-12 { width: 58.33%;
}
.push-2-3,
.push-8-12 { margin-left: 66.66%;
}
.push-1-2,
.push-6-12 { margin-left: 50%;
}
.push-1-3,
.push-4-12 { margin-left: 33.33%;
}
.push-1-4,
.push-3-12 { margin-left: 25%;
}
.push-1-5 { margin-left: 20%;
}
.push-1-6,
.push-2-12 { margin-left: 16.667%;
}
.push-1-7 { margin-left: 14.28%;
}
.push-1-8 { margin-left: 12.5%;
}
.push-1-9 { margin-left: 11.1%;
}
.push-1-10 { margin-left: 10%;
}
.push-1-11 { margin-left: 9.09%;
}
.push-1-12 { margin-left: 8.33%;
}
/* Use list-col# in the parent element like "ul" or "ol". */
.list-col1 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;
}
.list-col2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
}
.list-col3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3;
}
.list-col4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4;
}
.list-col5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5;
}
.list-col6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6;
}
.list-center { text-align: center;
}
@media handheld, only screen and (max-width: 768px) { .med-col-1-1 { width: 100%; } .med-col-2-3, .med-col-8-12 { width: 66.66%; } .med-col-1-2, .med-col-6-12 { width: 50%; } .med-col-1-3, .med-col-4-12 { width: 33.33%; } .med-col-1-4, .med-col-3-12 { width: 25%; } .med-col-1-5 { width: 20%; } .med-col-1-6, .med-col-2-12 { width: 16.667%; } .med-col-1-7 { width: 14.28%; } .med-col-1-8 { width: 12.5%; } .med-col-1-9 { width: 11.1%; } .med-col-1-10 { width: 10%; } .med-col-1-11 { width: 9.09%; } .med-col-1-12 { width: 8.33%; } .med-col-11-12 { width: 91.66%; } .med-col-10-12 { width: 83.333%; } .med-col-9-12 { width: 75%; } .med-col-5-12 { width: 41.66%; } .med-col-7-12 { width: 58.33%; } .med-list-col1 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .med-list-col2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .med-list-col3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .med-list-col4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .med-list-col5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .med-list-col6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } .hide-on-med { display: none !important; width: 0; height: 0; }
}
@media handheld, only screen and (max-width: 425px) { .sm-col-1-1 { width: 100%; } .sm-col-2-3, .sm-col-8-12 { width: 66.66%; } .sm-col-1-2, .sm-col-6-12 { width: 50%; } .sm-col-1-3, .sm-col-4-12 { width: 33.33%; } .sm-col-1-4, .sm-col-3-12 { width: 25%; } .sm-col-1-5 { width: 20%; } .sm-col-1-6, .sm-col-2-12 { width: 16.667%; } .sm-col-1-7 { width: 14.28%; } .sm-col-1-8 { width: 12.5%; } .sm-col-1-9 { width: 11.1%; } .sm-col-1-10 { width: 10%; } .sm-col-1-11 { width: 9.09%; } .sm-col-1-12 { width: 8.33%; } .sm-col-11-12 { width: 91.66%; } .sm-col-10-12 { width: 83.333%; } .sm-col-9-12 { width: 75%; } .sm-col-5-12 { width: 41.66%; } .sm-col-7-12 { width: 58.33%; } .sm-list-col1 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .sm-list-col2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .sm-list-col3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .sm-list-col4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .sm-list-col5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .sm-list-col6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; } .hide-on-sm { display: none !important; width: 0; height: 0; }
}
.margin-center { margin: 0 auto; float: none;
}
Slim Grid SASS SCSS v3.2 - Script Codes
Slim Grid SASS SCSS v3.2 - Script Codes
Home Page Home
Developer Michael Stursberg
Username thesturs
Uploaded October 27, 2022
Rating 3
Size 4,709 Kb
Views 14,168
Do you need developer help for Slim Grid SASS SCSS v3.2?

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!

Michael Stursberg (thesturs) Script Codes
Name
GetViewport4CSS
JQuery Sticky Element 1
Get url info and break up into classes then add to body class
Slick Slider img or vid autoplay
Detect in view Jquery
Automatically Generate a Google Address Link or Map
Print image link
Slim Grid SASS SCSS mixins - Beta
Clip-Path Tests
Key Detection
Create amazing blog posts 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!