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 |
The Awesome Responsive Form | 2,377 Kb |
Subleveled Menu - Responsive and simple | 4,471 Kb |
RWD Table v1.0 | 2,187 Kb |
A Pen by Daniel | 1,860 Kb |
Simple Responsive Navigation, | 2,236 Kb |
Tabelldata-TTSTAT | 2,163 Kb |
Box v0.1 | 2,187 Kb |
Tabelldata-TTSTAT-2 | 2,178 Kb |
Sitemap for footer | 2,271 Kb |
Accordion w. icons, 0.01 | 2,497 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 |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Adding Items | Valhead | 4,008 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 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!