Prototyping Grid

Developer
Andy McFee
Size
3,608 Kb
Views
36,432
  1. Prototyping Grid Previews
  2. Prototyping Grid HTML Codes
  3. Prototyping Grid CSS Codes

How do I make an prototyping grid?

This is the grid I made to use when prototyping. It's light weight, mobile-first, customizable, responsive, SCSS and based loosely on Twitter Bootstrap's grid. . What is a prototyping grid? How do you make a prototyping grid? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.

Prototyping Grid Previews
IQ Test

Prototyping Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Prototyping Grid</title> <script src="http://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"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>My Prototyping Grid</h1> <p>Quick-and-dirty mobile-first, responsive SCSS Grid for rapid prototyping.</p> <h2>Numeric naming</h2> <div class="span12"> <i>span12</i> </div> <div class="row"> <div class="span11"> <i>span11</i> </div> <div class="span1"> <i>span1</i> </div> </div> <div class="row"> <div class="span10"> <i>span10</i> </div> <div class="span2"> <i>span2</i> </div> </div> <div class="row"> <div class="span9"> <i>span9</i> </div> <div class="span3"> <i>span3</i> </div> </div> <div class="row"> <div class="span8"> <i>span8</i> </div> <div class="span4"> <i>span4</i> </div> </div> <div class="row"> <div class="span7"> <i>span7</i> </div> <div class="span5"> <i>span5</i> </div> </div> <div class="row"> <div class="span6"> <i>span6</i> </div> <div class="span6"> <i>span6</i> </div> </div> <h2>Semantic</h2> <div class="span-full"> <i>span-full</i> </div> <div class="row"> <div class="span-half"> <i>span-half</i> </div> <div class="span-half"> <i>span-half</i> </div> </div> <div class="row"> <div class="span-third"> <i>span-third</i> </div> <div class="span-third"> <i>span-third</i> </div> <div class="span-third"> <i>span-third</i> </div> </div> <div class="row"> <div class="span-one-third"> <i>span-one-third</i> </div> <div class="span-two-thirds"> <i>span-two-thirds</i> </div> </div> <div class="row"> <div class="span-quarter"> <i>span-quarter</i> </div> <div class="span-quarter"> <i>span-quarter</i> </div> <div class="span-quarter"> <i>span-quarter</i> </div> <div class="span-quarter"> <i>span-quarter</i> </div> </div> <div class="row"> <div class="span-one-quarter"> <i>span-one-quarter</i> </div> <div class="span-three-quarters"> <i>span-three-quarters</i> </div> </div> <h2>Gridception</h2> <div class="row"> <div class="span-half"> <i>span-half</i> <div class="row embed-ex"> <div class="span-third"> <i>span-third</i> </div> <div class="span-third"> <i>span-third</i> </div> <div class="span-third"> <i>span-third</i> </div> </div> <div class="row embed-ex"> <div class="span3"> <i>span3</i> </div> <div class="span9"> <i>span9</i> </div> </div> </div> <div class="span-half"> <i>span-half</i> <div class="row embed-ex"> <div class="span-half"> <i>span-half</i> </div> <div class="span-half"> <i>span-half</i> </div> </div> <div class="row embed-ex"> <div class="span-full"> <i>span-full</i> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Prototyping Grid - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.row { overflow: hidden; *zoom: 1;
}
[class^="span"],
[class*="span"] { display: block; padding: 0; width: 100%; margin-bottom: 20px;
}
@media (min-width: 800px) { [class^="span"], [class*="span"] { float: left; padding: 0 10px; } [class^="span"]:first-child, [class*="span"]:first-child { padding-left: 0; } [class^="span"]:last-child, [class*="span"]:last-child { padding-right: 0; }
}
.span12, .span-full,
.span-full { width: 100%; float: none; padding: 0;
}
@media (min-width: 800px) { .span1 { width: 8.33333%; } .span2 { width: 16.66667%; } .span3, .span-quarter, .span-one-quarter { width: 25%; } .span4, .span-third, .span-one-third { width: 33.33333%; } .span5 { width: 41.66667%; } .span6, .span-half { width: 50%; } .span7 { width: 58.33333%; } .span8, .span-two-thirds { width: 66.66667%; } .span9, .span-three-quarters { width: 75%; } .span10 { width: 83.33333%; } .span11 { width: 91.66667%; } .span12, .span-full { width: 100%; }
}
html,
body { height: 100%;
}
body { height: 100%; background: #fff; color: #174858; text-align: center;
}
.container { width: 80%; max-width: 900px; margin: 0 auto;
}
i { display: block; text-align: center; background-color: #F17C41; padding: 5px 0; border-radius: 3px; font-style: normal; font-weight: bold; color: #FFF;
}
h1, h2, p { margin: 10px 0;
}
.embed-ex { background: #b2e3e1;
}
.embed-ex:first-of-type { padding-top: 20px;
}
Prototyping Grid - Script Codes
Prototyping Grid - Script Codes
Home Page Home
Developer Andy McFee
Username andymcfee
Uploaded August 09, 2022
Rating 3
Size 3,608 Kb
Views 36,432
Do you need developer help for Prototyping Grid?

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!

Andy McFee (andymcfee) Script Codes
Name
Flexbox vertcially centered nav text
Responsive Web App Panel Layout
CSS Loading Spinners
Round Music Player with Official.fm API
Single-page app layout with animating transitions
Flip Card - Bad Rotation
BEM Flexbox Nav build for a workshop
Whatsizeisthisscreen.com
Responsive Boxes without Images
Responsive Boxes with Images
Create amazing Facebook ads 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!