Gridwork
How do I make an gridwork?
Under development. What is a gridwork? How do you make a gridwork? This script and codes were developed by Daniel on 04 September 2022, Sunday.
Gridwork - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gridwork</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- FONT API-->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<!-- ICON API-->
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="row">
<div class="container"> <div class="row"> <div class="one-third column">1:3</div> <div class="one-third column">1:3</div> <div class="one-third column">1:3</div> </div> <div class="row"> <div class="one-four column">1:4</div> <div class="one-four column">1:4</div> <div class="one-four column ">1:4</div> <div class="one-four column">1:4</div> </div> <div class="row"> <div class="one-half column">halfth</div> <div class="one-half column">halfth</div> </div> <div class="row"> <div class="full column">full</div> </div>
</div>
</div> <script src="js/index.js"></script>
</body>
</html>
Gridwork - Script Codes CSS Codes
/*Classic Clearfix*/
.clearfix{clear: both;}
.clearfix { display: inline-block; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;
}
* html .clearfix { height: 1%; }
html[xmlns] .clearfix { display: block; }
/* IE 6/7 */
.clearfix { zoom: 1; }
/*-------------------------------------------*/
/*ROOT
-------------*/
html {display:block;}
html, body{ height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
body { margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-size: 11pt; font-weight: 400; color: #656565; }
img{height:auto;max-width:100%;width:100%;border:none;}
.center{margin:0 auto;}
/*BASE
-------------*/
.row{ margin:2% 0 2% 0; background:#c4c4c4; height:100%; height:auto;
}
.container { background:pink; position: relative; width: 90%; max-width: 940px; margin: 0 auto; height:auto;}
.container:after, .row:after { content: ""; display: table; clear: both; }
/* Grid
-------------*/
.column { float: left; margin-left:1%; line-height:45px; background:lightgrey; text-align:center; min-height:100px;line-height:100px; font-size:150%;
}
.column:first-child { margin-left: 0%; }
/*Base Grid*/
.one-four { width: 24.24%; }
.one-third { width: 32.6666666667%; }
.one-half { width: 49.5%; }
.full { width: 100%; }
/* MEDIA QUERIES*/
@media (min-width: 599px) {.container {width: 90%;}}
/* > 550px */
@media (max-width: 720px) { .container {width: 90%;} .column{margin:0; float: none; min-height:40px; background:lightgrey;
}
.column:first-child { margin-left: 0; }
.column:last-child { margin-right: 0; }
/*Base Grid*/
.one-four, .one-third, .one-half { width: 100%; }}
/*MENUSTYLE---------------------------------*/
/*ROOT*/
/*MAIN MENU*/
.brand, .menu{ margin-top:0; line-height:80px;}
.brand{ width:30%; margin:0 1% 0 1%; float:left; color:#fefefe; font-weight:700;
}
/*MOBIL VERSION, 0 > 600px*/
@media screen and (min-width: 600px){ .brand{ width:30%; margin-left:1%; }
}
@media screen and (max-width: 600px){}
/*End Media Queries*/
/*End CSS*/
Gridwork - Script Codes JS Codes
/*
141223:
Setup
Google Font API integration
*/
Developer | Daniel |
Username | deeman |
Uploaded | September 04, 2022 |
Rating | 3 |
Size | 2,628 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 |
Accordion w. icons, 0.01 | 2,497 Kb |
Box w. images v0.1 | 1,932 Kb |
Box v0.1 | 2,187 Kb |
YellowBoxes | 2,481 Kb |
Column Columns | 1,649 Kb |
Tabelldata-TTSTAT | 2,163 Kb |
Simple Responsive Navigation, | 2,236 Kb |
Tabelldata-TTSTAT-2 | 2,178 Kb |
RWD Table v1.0 | 2,187 Kb |
Top Header w. shadowed bottom | 1,578 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 |
Canvas stripes | Adrianparr | 1,948 Kb |
Segments mouse following | Nosir | 2,909 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Social buttons | Flacu | 2,022 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
Atom | Bhlaird | 1,932 Kb |
Codero Sitemap | S1m0ne | 28,169 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!