0ct0pu5/min
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redesign landing page

Browse source
This commit is contained in:
Owen Versteeg 2016-06-23 10:16:38 -04:00
parent fe73afc9e1
commit 3c47296241
5 changed files with 901 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
docs.html
View file

@ -96,22 +96,14 @@
<button class="btn btn-sm btn-close">×</button>
<div class="container">
<div>
<h1>Min Basics</h1>
<h1>Basics & Browser Support</h1>
<p>
Min's minimalism has several advantages. Firstly, it doesn't prescribe a specific design for you. Each element has just a handful of CSS rules applied to it, and as a result overriding default styles is extremely easy. Min being only 995 bytes means that there's less of it to get in your way when you want to customize your site. Contrast this with Bootstrap, where you may have to override many different rules to get what you want.
</p>
<p>
Secondly, there's less markup to type. Min requires fewer superfluous divs and classes than any other framework, allowing every part of your code to be readable and semantically correct.
</p>
<p>
Min is also extremely flexible: you can apply the btn class to any element - a link, a &lt;button&gt;, a div - anything. The same goes for any of the column sizes, any of the button coloration styles, and many more classes in plugins. You can apply the smooth class to anything to give it a 200ms transition.
Min's minimalism has several advantages. Firstly, it doesn't prescribe a specific design for you. Each element has just a handful of CSS rules applied to it, and as a result overriding default styles is extremely easy. Min being only 995 bytes means that there's less of it to get in your way when you want to customize your site. Contrast this with Bootstrap, where you may have to override many different rules to get what you want. Secondly, there's less markup to type. Min requires fewer superfluous divs and classes than any other framework, allowing every part of your code to be readable and semantically correct.
</p>
<p>
Because of its minimalist goal, Min core has fewer features than Bootstrap. Many of the features omitted in Min are superfluous, unsemantic, and just plain idiotic (I'm looking at you, text-left class.) However, when using the <a href="http://owenversteeg.com/min-bootstrap-plugin">3.5kB Min Bootstrap plugin</a>, Min has full feature parity with Bootstrap. If you are migrating a complex site from Bootstrap to Min, it is highly recommended that you use this plugin.
</p>
<a class="btn btn-a" href="example.html">View simple example</a>
</div>
<h1>Browser support</h1>
<div class="support">
<table class="table">
<thead>
@ -149,12 +141,7 @@
</table>
<!-- Reverse Mali flag, Bolivian flag, and Helvetic Republic flag -->
<p>Key: <span class="full key">Full support</span>, <span class="partial key">partial support</span>, and <span class="none key">no support</span>. <span class="browserdetails">Market share data <a href="http://stats.wikimedia.org/archive/squid_reports/2014-01/SquidReportClients.htm">from Wikimedia</a> is in parens (in the format desktop+mobile+tablet); browser release dates are in brackets. Due to web crawlers and other mobile browsers, numbers will add up to about 80%.</span> Click on each cell for details (if available.) </p>
<p>
Partial support means that Min supports that browser but there may be a small visual quibble, such as no rounded corners on buttons, a difference in how the page responds to resizing, or slight table shading differences.
</p>
<p>
Netscape support has ended with the release of Min 2.0 as part of a push towards using semantic HTML5 elements. Replace all &lt;nav&gt; elements with &lt;div&gt;s to make Min work in Netscape 7+.
<p>Key: <span class="full key">Full support</span>, <span class="partial key">partial support</span>, and <span class="none key">no support</span>. <span class="browserdetails">Market share data <a href="http://stats.wikimedia.org/archive/squid_reports/2014-01/SquidReportClients.htm">from Wikimedia</a> is in parens (in the format desktop+mobile+tablet); browser release dates are in brackets. Due to web crawlers and other mobile browsers, numbers will add up to about 80%.</span> Click on each cell for details (if available.) Partial support means that Min supports that browser but there may be a small visual quibble, such as no rounded corners on buttons, a difference in how the page responds to resizing, or slight table shading differences. <b>Netscape support has ended</b> with the release of Min 2.0 as part of a push towards using semantic HTML5 elements. Replace all &lt;nav&gt; elements with &lt;div&gt;s to make Min work in Netscape 7+.
</p>
</div>
<div class="buttons">

300
hireme.css Normal file
View file

@ -0,0 +1,300 @@
.pod {
font-family: Helvetica, sans-serif;
margin: 0;
}
h1.name {
margin: .5em .5em 0 1em;
}
.pod h1 {
font-size: 3.75em;
display: inline-block;
}
.pod {
background: #ddd;
border-radius: 5px;
padding: 1.25em 1.9em;
position: relative;
margin: 1.88em 3.75em;
}
.pod h1 {
margin: 0;
}
.pod p {
font-size: 1.2em;
margin: 0 0 1.1em 0;
}
@media (max-width: 700px) {
.pod {
font-size: 12px;
}
}
@media (max-width: 550px) {
.pod {
font-size: 10px;
}
}
@media (max-width: 420px) {
.pod {
/*font-size: 8px;*/
margin: 0;
}
.notinyfonts {
font-size: 10px;
}
.pod p {
font-size: 15px;
margin: 0 0 15px 0;
}
}
@media (max-width: 350px) {
.pod {
/*\ font-size: 6px;*/
}
}
.examples img {
display: inline-block;
height: 4.5em;
position: relative;
margin-left: 1.6em;
}
.examples {
float: right;
height: 4.5em;
position: relative;
}
.logo.twitter {
background: #55acee
}
.logo.keybase {
background: #fc8558;
}
.logo.mail {
background: #000;
}
.examples a:first-child img {
margin: 0;
}
/*.pod:hover {
color: white;
transition: 0.3s all;
background: #333;
}*/
/*
.pod.code:hover {
background: url('min-pretty-ultracropped.png');
}
.pod.design:hover {
background: url('goalcalendar.png');
}
.pod.photos:hover {
background: url('bismuth-cropped-2.jpg');
background: url('shadows-cropped.jpg');
}
.pod.contact:hover {
background: url('publickey.png');
}*/
/*.pod:hover .examples {
background: rgba(255,255,255,0.7);
box-shadow: 0 0 25px 16px rgba(255,255,255,0.7);
transition: 0.3s all;
}
*/
.pod:not(.hire):after {
background: #ddd;
content: '';
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
position: absolute;
z-index: 11;
top: 0;
left: 0;
border-radius: 5px;
transition: 0.3s all;
}
/*
.pod:hover:after {
background: #000;
opacity: 0.2;
}*/
.pod > * {
position: relative;
z-index: 12;
}
.right {
float: right;
clear: both;
}
/*.pod:hover * {
color: white;
}*/
.pod input, .pod h3, .pod .duration, .pod label {
font-size: 1.2em;
}
.pod input[type=number], .pod textarea, .pod input[type=text], .pod input[type=email], .pod input[type=submit] {
border: 1px solid;
border-radius: 4px;
}
.pod input[type=email]:focus, .pod input[type=submit]:active, .pod input[type=submit]:focus {
border-color: #5ab;
}
.pod input[type=number] {
width: 3em;
text-align: center;
}
.pod input[type=number]::-webkit-inner-spin-button, .pod input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
.pod h3 {
display: inline-block;
}
.duration {
display: block;
margin: 10px 0;
}
.pod > label {
display: block;
margin: 15px 0;
}
form {
position: relative;
z-index: 100 !important;
width: 218px;
}
form input[type=submit] {
width: 100%;
font-weight: bold;
}
textarea {
margin-top: -2px;
width: 100%;
box-sizing: border-box;
height: 118px;
position: relative;
z-index: 100 !important;
display: block;
position: relative;
}
#email {
display: block;
position: relative;
/*margin-top: 10px;*/
width: 100%;
box-sizing: border-box;
}
#email::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #000;
}
#email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000;
opacity: 1;
}
#email::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;
opacity: 1;
}
#email:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #000;
}
#email:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #000;
}
.hire:hover #email::-webkit-input-placeholder { /* WebKit, Blink, Edge */
/*color: #fff;*/
}
.hire:hover #email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
/*color: #fff;*/
/*opacity: 1;*/
}
.hire:hover #email::-moz-placeholder { /* Mozilla Firefox 19+ */
/*color: #fff;*/
/*opacity: 1;*/
}
.hire:hover #email:-ms-input-placeholder { /* Internet Explorer 10-11 */
/*color: #fff;*/
}
.hire:hover #email:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
/*color: #fff;*/
}
/*#email, textarea {
display: none;
}*/
.timepicker * {
margin: 0;
}
.hire h1 {
margin-bottom: 10px;
}
@media (max-width: 600px) {
form {
width: 160px;
}
.timepicker h3 {
margin-left: 2px;
}
}
.pod {
overflow: auto;
}
.timepicker div {
display: inline-block;
margin-bottom: 8px;
}
.hire label:first-of-type {
margin-top: 7px;
}
.pod form {
margin-left: 5px;
}

43
hireme.js Normal file
View file

@ -0,0 +1,43 @@
var messageModified = false;
function calculateEstimate() {
var time = +hourinput.value*60 + +minuteinput.value;
rate = 3.5
var total = time*rate;
if (nonprofit.checked) total *= 0.7
if (min.checked) total *= 0.5
if (fullstack.checked) total *= 1.15
if (hackhands.checked) total *= 1.2
totalestimate.innerHTML = '$' + Math.round(total)
var timeText = ''
if (+hourinput.value !== 0) timeText = hourinput.value + ' hours' + timeText
if (+minuteinput.value !== 0 && +hourinput.value !== 0) timeText += ' and '
if (+minuteinput.value !== 0) timeText += minuteinput.value + ' minutes'
if (+hourinput.value === 1) timeText = timeText.replace(/hours/g, 'hour')
if (+minuteinput.value === 1) timeText = timeText.replace(/minutes/g, 'minute')
if (time === 0) timeText = 'no time at all'
if (!messageModified) {
if (time >= 0) message.value = "Hi Owen,\n\nI'd like to hire you for " + timeText + ' to work on ______.'
else message.value = "Hi Owen,\n\nI'd like you to pay me to work on something, entirely disregarding the purpose of this form."
message.value += "\n\nCheers, _____"
}
if(window.mixpanel) mixpanel.track('Estimate', {'Total': total, 'Time': time, 'Min': min.checked, 'Nonprofit': nonprofit.checked, 'Fullstack': fullstack.checked, 'Hackhands': hackhands.checked, 'Modified': messageModified})
}
calculateEstimate()
var inputs = document.querySelectorAll('.pod input');
for (var i=0; i<inputs.length; i++) {
inputs[i].onchange = inputs[i].keyup = inputs[i].mouseup = inputs[i].oninput = calculateEstimate
}

343
index.html
View file

@ -13,6 +13,7 @@
<title>min</title>
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
<link href="hireme.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<style>
@ -21,26 +22,6 @@
}
</style>
<![endif]-->
<style type="text/css">
/* Min+ plugin*/
message {
display: block;
padding: 2em;
background: #def;
border-left: 5px solid #44e;
}
.warning {
border-color: #e44;
background: #fdd;
}
.great {
border-color: #2d2;
background: #dfd;
}
</style>
<!--[if lte IE 6]>
<style>
@ -102,6 +83,7 @@
font-size: 90px;
margin-top: 0;
color: white;
margin-bottom: 20px;
}
.hero em {
@ -119,7 +101,7 @@
background-image: url('congruent_outline.png');
margin: 0;
width: 100%;
padding: 50px;
padding: 50px 50px 10px 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@ -173,11 +155,11 @@
}
/* Otherwise it spills over on iOS */
.download-btn {
/*.download-btn {
font-size: 1.3em;
padding: 8px 19px 9px;
line-height: 2em;
}
}*/
.btn {
margin: 7px 9px 7px 0;
@ -197,67 +179,282 @@
.hireme h1 {
margin: 30px 0 0 0;
}
.i {
color: #91D564;
position: relative;
}
.i:before {
content: "ı";
position: absolute;
color: white;
}
.money input, select {
color: white;
width: 7em;
}
.money input {
text-align: center;
}
.money input, .money label, .money select {
font-size: 20px;
}
.money input.short {
width: 2em;
}
.money select {
width: 10.15em;
}
.c4 {
padding: 10px;
box-sizing: border-box;
}
option {
color: black;
}
h3 {
font-size: 27px;
margin: 0 0 20px 0;
}
.hero input:focus, .hero select:focus {
border-color: #91D564;
}
.mobileonly {
display: none;
}
.hero > *:not(.timeismoney):not(.maintext) br {
display: none;
}
.timeholder {
box-shadow: -3px 0 0 0;
}
@media (max-width: 870px) {
.timeholder {
box-shadow: 0 0 0 0;
}
.hero {
padding: 14px;
}
.hero .row .col.c4 {
width: 100%;
/*width: 33.33%;*/
padding: 0;
font-size: 15px;
line-height: 20px;
}
.hero h3 {
margin: 10px 0 10px 0;
}
.hero .c4:first-of-type h3 {
margin-top: 0;
}
.unnecessary {
display: none;
}
.mobileonly {
display: initial;
}
h4.mobileonly {
margin-top: 3px;
display: block;
}
h1.title {
margin-bottom: 0;
}
/* Fancy! https://css-tricks.com/line-on-sides-headers/ */
.fancy {
text-align: center;
display: inline-block;
position: relative;
}
.fancy:before,
.fancy:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 3px solid white;
/*border-top: 1px solid white;*/
top: 4px;
width: 600px;
}
.fancy:before {
right: 100%;
margin-right: 8px;
}
.fancy:after {
left: 100%;
margin-left: 8px;
}
.hero br {
display: block;
}
/*@media (min-height: 600px) {*/
.hero h3 {
margin: 20px 0 20px 0
}
/*}*/
#lt {
margin: 0;
}
}
.timeismoney h3:not(#lt) {
font-size: 38px;
}
.timeholder {
padding: 0 15px;
box-sizing: border-box;
}
/* I like big btns and i cannot lie */
.bigbtns .btn {
width: 140px;
}
.timeismoney h3.fancy {
line-height: 0.5;
}
.sitebutton {
border: 1px solid;
padding: 9.5px;
border-radius: 4px;
color: black;
font-size: 1.2em;
text-align: center;
width: 100%;
display: inline-block;
font-weight: bold;
box-sizing: border-box;
text-decoration: none;
}
</style>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<!--<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="index.html">Min</a>
<a href="docs.html">Docs</a>
<!--
<a href="bootstrapconverter.html">Bootstrap Converter</a>
<a href="examples.html">Examples</a>
-->
<a href="examples.html">Examples</a>
<a href="download.html">Download</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>
</nav>-->
<button class="btn btn-sm btn-close">×</button>
<div class="hero">
<h1 class="title">Min</h1>
<h3>The <em>995 byte</em> CSS framework that supports <em>IE5.5+</em></h3>
<h1 class="title">M<span class="i">i</span>n</h1>
<!--<h3>The <em>995 byte</em> CSS framework that supports <em>IE5.5+</em></h3>-->
<h4 class="mobileonly">The world's <em>fastest</em> CSS framework</h4>
<div class="row maintext">
<div class="col c4"><h3 class="fancy">Milliseconds matter<span class="unnecessary">.</span></h3><br>Amazon found that each 100ms delay cost them over a <em>billion</em> dollars in sales. Google found that 1/3 of this hit remained after decreasing loading times. <span class="unnecessary">Your CSS framework is costing you money. </span></div>
<div class="col c4"><h3 class="fancy">Tried and tested<span class="unnecessary">.</span></h3><br>Min is used by over <em>65,000</em> people in 195<span class="unnecessary">+</span> countries, from North Korea to <span class="unnecessary"> South Sudan to Mongolia to</span> Somalia. Think your software is critical? Try a webapp keeping you alive in a warzone.</div>
<div class="col c4"><h3 class="fancy">Works everywhere<span class="unnecessary">.</span></h3><br>That's no exaggeration. Min works on your decade-old Opera 9 install, your grandpa's <em>IE5.5</em>, and your kid's Nintendo DS. Wikipedia gets 500MM hits from IE6 a month... Bootstrap 4 doesn't even support IE8.</div>
</div>
<div class="row timeismoney">
<div class="col c6 moneyholder">
<div class="money">
<h3 class="fancy">Save money<span class="unnecessary">.</span></h3><br>
<label for="revenue">Revenue $ </label> <input value="500,000" type="text" onchange="updateLosses()" onkeyup="updateLosses()" class="smooth" id="revenue" name="revenue"> <label class="unnecessary">per year</label><label class="mobileonly">/yr</label>
<br><br><label for="timehit">Current framework load time: </label><select onchange="updateLosses()" class="smooth" name="timehit" id="timehit">
<option value="0">None</option>
<option value=".01">100ms</option>
<option value=".02">200ms (PureCSS)</option>
<option value=".03">300ms</option>
<option value=".04" selected>400ms (Bootstrap)</option>
<option value=".05">500ms</option>
<option value=".06">600ms</option>
<option value=".07">700ms</option>
</select>
<br><br>
<label>Switching to Min saves you</label><h3 id="lt"><span id="lossText_e">$20,000</span> per year.</h3>
<!--<label for="devtime">Developer time </label> <input value="9" type="text" class="short" id="revenue" name="revenue"> hours <label for="rates">at $</label> <input class="short" value="200" type="text" id="rates" name="rates"> /hr-->
<script>
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function updateLosses() {
var totalRev = parseInt(revenue.value.replace(/\,/g,''))
var losses = Math.round(totalRev * timehit.value)
var lossText = '$' + numberWithCommas(losses)
lossText_e.innerHTML = lossText
}
</script>
</div>
</div>
<div class="col c6 timeholder">
<h3 class="fancy">Save time<span class="unnecessary">.</span></h3><br>
Min provides easy copy-and-paste examples for every element. You can get started with any of the provided templates, or you can read the complete and concise documentation with visual examples for every part of Min.
<br><br>Min also styles your page using hundreds of times fewer properties vs. other CSS frameworks. This makes it easy to customize your page to look novel, avoiding the "bootstrapization" trend that makes your page look exactly like the rest.
</div>
</div>
<div class="row intro bigbtns">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<a href="docs.html" class="btn em smooth">Docs</a>
</div>
<div class="col c4">
<a href="examples.html" class="btn smooth">Examples</a>
</div>
<div class="col c2">&nbsp;</div>
</div>
</div>
<!--[if IE 5]> <br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<h3>Exceptional browser support</h3>
<p>Min supports IE5.5+, FF3+, Opera 9+, and Safari 4+, the best browser support of any CSS framework by far. Unfortunately, IE5.5 does not support border-radius and as such does not have rounded button corners. That said, IE5.5 users will be so surprised to see a site load correctly they will overlook this.</p>
</div>
<div class="col c4">
<h3>Ridiculously small</h3>
<p>Min is only 995 bytes, so it will never slow down your website unlike bulky frameworks like Bootstrap. Min also does not require Javascript. Pages built with Min can load faster than a blink of an eye. (Average loading times for three Min pages tested were 334ms; a human eye blink is 400ms.)</p>
</div>
<div class="col c2">&nbsp;</div>
</div>
<!--[if lt IE 7]> <br><br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<h3>Unprescriptive</h3>
<p>Min is extremely lightweight and doesn't prescribe a certain design for you, like Bootstrap. It's easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.</p>
</div>
<div class="col c4">
<h3>Semantic markup</h3>
<p>Min uses the new HTML5 semantic elements liberally, has clear and short class names, and uses &lt;div&gt;s sparingly. Patients that switched from Bootstrap to Min reported up to a ninefold decrease in markup and drastic improvements in most cases of divitis. Ask your CSS-atrician if Min is right for you.</p>
</div>
<div class="col c2">&nbsp;</div>
</div>
<!--[if lt IE 7]> <br><br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<a href="docs.html" class="btn em smooth">Docs</a>
</div>
<div class="col c4">
<a href="download.html" class="btn smooth download-btn">Download</a>
</div>
<div class="col c2">&nbsp;</div>
</div>
<div class="container intro hireme">
<div class="pod hire">
<h1>Hire Owen</h1>
<p>As the creator of Min, the smallest and fastest CSS framework in the world, I know CSS. My software is used by over 100,000 people in 185+ countries, and I have countless years of experience with front-end work. Nobody knows Min better than I do, and for this month only I am offering a <b>50% discount to anyone using Min in their project.</b> Use the link below to get a quote at my website.</p>
<a href="http://owenversteeg.com" class="btn smooth download-btn btn-a">Hire Me</a>
<br><br>
<h1 id="totalestimate" class="right">$35</h1>
<p>As the creator of Min, I know CSS. My software is used by over 100,000 people in 200+ countries, and I have countless years of experience with front-end work. Nobody knows Min better than I do.</p>
<form class="right" action="//formspree.io/me@owenversteeg.com" method="POST">
<input class="right notinyfonts" id="email" type="email" required placeholder="Email" name="_replyto">
<textarea id="message" onkeyup="if (messageModified === false) mixpanel.track('Message modified'); messageModified = true;" name="message" class="right"></textarea>
<input class="right notinyfonts" type="submit" value="Send message">
</form>
<div class="timepicker">
<!-- the this.value fuckery is to set the cursor to the end of the textbox -->
<div><input type="number" value=0 class="notinyfonts" min=0 id="hourinput"> <h3 id="hourh3" class="notinyfonts">hours</h3> </div>&nbsp;<div><input type="number" class="notinyfonts" value=20 min=0 max=59 id="minuteinput" autofocus onfocus="this.value = this.value"> <h3 id="minute3" class="notinyfonts">minutes</h3></div>
</div>
<label class="notinyfonts"><input type="checkbox" id="nonprofit"> Nonprofit (-30%)</label>
<label class="notinyfonts"><input type="checkbox" id="min" checked> Involves Min (-50%, June only)</label>
<label class="notinyfonts"><input type="checkbox" id="fullstack"> Full-stack (+15%)</label>
<label class="notinyfonts"><input type="checkbox" id="hackhands"> Hire me on HackHands (+20%, I have all 5-star reviews)</label>
<a class="sitebutton notinyfonts" href="http://owenversteeg.com">Go to OwenVersteeg.com for more about me</a>
</div>
<script src="hireme.js"></script>
<div class="container">
<script type="text/javascript">
function downloadJSAtOnload() {
@ -272,6 +469,8 @@
else window.onload = downloadJSAtOnload;
</script>
</div>
<!-- Quantcast Tag -->
<noscript>

284
oldindex.html Normal file
View file

@ -0,0 +1,284 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="google-site-verification" content="6K0jyXHnCKUqFBgxR_CiAo7rvsfLNCXwHPt3zetR_wk" />
<script>
document.createElement("nav"); document.createElement("button");
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>min</title>
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<style>
html {
overflow-x: hidden;
}
</style>
<![endif]-->
<style type="text/css">
/* Min+ plugin*/
message {
display: block;
padding: 2em;
background: #def;
border-left: 5px solid #44e;
}
.warning {
border-color: #e44;
background: #fdd;
}
.great {
border-color: #2d2;
background: #dfd;
}
</style>
<!--[if lte IE 6]>
<style>
.col {
margin: 0.5%;
}
.c12 {
margin: 0.5%;
margin-left: 0.5%;
width: 97%;
}
.container {
width: 90%;
}
</style>
<![endif]-->
<!--[if IE 5]>
<style>
.container {
width: 100%;
}
.btn-close {
display: none;
}
body {
font: 16px Arial;
}
h3 {
font-size: 20px;
}
.nav {
height: 60px;
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 8]>
<style>
.hero {
margin-top: -10px !important;
}
</style>
<![endif]-->
<style type="text/css">
/* Index only styles */
.row {
margin-top: 0;
overflow: hidden;
}
h1.title {
border-bottom: none;
font-size: 90px;
margin-top: 0;
color: white;
}
.hero em {
color: #91D564;
font-style: normal;
}
html {
background: #f0f0f0;
}
.hero {
text-align: center;
background: #333;
background-image: url('congruent_outline.png');
margin: 0;
width: 100%;
padding: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #ddd;
}
.intro {
text-align: center;
}
.intro .c2 {
height: 1px;
}
.intro .c4 {
box-sizing: border-box;
}
.intro .c4:nth-child(2) {
padding-right: 15px;
}
.intro .c4:nth-child(3) {
padding-left: 15px;
}
@media (max-width: 870px) {
.intro .c2 {
width: 16.66%;
}
.intro .c4 {
width: 33.33%;
}
}
@media (max-width: 660px) {
.intro .c2 {
display: none;
}
.intro .c4 {
width: 50%;
padding: 10px;
}
}
.intro .c4 p {
line-height: 1.4;
}
.btn.em {
background: #91D564;
}
.btn.em:hover {
background: #81c554;
}
.btn.em:active, .btn.em:focus {
background: #71c544;
}
/* Otherwise it spills over on iOS */
.download-btn {
font-size: 1.3em;
padding: 8px 19px 9px;
line-height: 2em;
}
.btn {
margin: 7px 9px 7px 0;
}
.hireme {
width: 50%;
margin: auto;
}
@media (max-width: 700px) {
.hireme {
width: 80%;
}
}
.hireme h1 {
margin: 30px 0 0 0;
}
</style>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="index.html">Min</a>
<a href="docs.html">Docs</a>
<!--
<a href="bootstrapconverter.html">Bootstrap Converter</a>
<a href="examples.html">Examples</a>
-->
<a href="download.html">Download</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>
<button class="btn btn-sm btn-close">×</button>
<div class="hero">
<h1 class="title">Min</h1>
<h3>The <em>995 byte</em> CSS framework that supports <em>IE5.5+</em></h3>
</div>
<!--[if IE 5]> <br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<h3>Exceptional browser support</h3>
<p>Min supports IE5.5+, FF3+, Opera 9+, and Safari 4+, the best browser support of any CSS framework by far. Unfortunately, IE5.5 does not support border-radius and as such does not have rounded button corners. That said, IE5.5 users will be so surprised to see a site load correctly they will overlook this.</p>
</div>
<div class="col c4">
<h3>Ridiculously small</h3>
<p>Min is only 995 bytes, so it will never slow down your website unlike bulky frameworks like Bootstrap. Min also does not require Javascript. Pages built with Min can load faster than a blink of an eye. (Average loading times for three Min pages tested were 334ms; a human eye blink is 400ms.)</p>
</div>
<div class="col c2">&nbsp;</div>
</div>
<!--[if lt IE 7]> <br><br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<h3>Unprescriptive</h3>
<p>Min is extremely lightweight and doesn't prescribe a certain design for you, like Bootstrap. It's easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.</p>
</div>
<div class="col c4">
<h3>Semantic markup</h3>
<p>Min uses the new HTML5 semantic elements liberally, has clear and short class names, and uses &lt;div&gt;s sparingly. Patients that switched from Bootstrap to Min reported up to a ninefold decrease in markup and drastic improvements in most cases of divitis. Ask your CSS-atrician if Min is right for you.</p>
</div>
<div class="col c2">&nbsp;</div>
</div>
<!--[if lt IE 7]> <br><br><br><![endif]-->
<div class="row intro">
<div class="col c2">&nbsp;</div>
<div class="col c4">
<a href="docs.html" class="btn em smooth">Docs</a>
</div>
<div class="col c4">
<a href="download.html" class="btn smooth download-btn">Download</a>
</div>
<div class="col c2">&nbsp;</div>
</div>
<div class="container intro hireme">
<h1>Hire Owen</h1>
<p>As the creator of Min, the smallest and fastest CSS framework in the world, I know CSS. My software is used by over 100,000 people in 185+ countries, and I have countless years of experience with front-end work. Nobody knows Min better than I do, and for this month only I am offering a <b>50% discount to anyone using Min in their project.</b> Use the link below to get a quote at my website.</p>
<a href="http://owenversteeg.com" class="btn smooth download-btn btn-a">Hire Me</a>
<br><br>
</div>
<div class="container">
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</div>
<!-- Quantcast Tag -->
<noscript>
<div style="display:none;">
<img src="//pixel.quantserve.com/pixel/p-4UQY7SYFeUHE_.gif" border="0" height="1" width="1" alt="Quantcast"/>
</div>
</noscript>
<!-- End Quantcast tag -->
</body>
</html>