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

more example stuff

Browse source
This commit is contained in:
Owen Versteeg 2016-06-23 10:38:55 -04:00
parent df0dfff682
commit 437b780924
6 changed files with 199 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs.html
View file

@ -90,6 +90,7 @@
<a href="examples.html">Examples</a>
-->
<a href="download.html">Download</a>
<a href="#">Examples</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>

1
download.html
View file

@ -84,6 +84,7 @@
<a href="examples.html">Examples</a>
-->
<a class="current" href="#">Download</a>
<a href="#">Examples</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>

BIN
example-1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

62
example2.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page Title</title>
<link href="http://mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
<style>
.hero {
background: #eee;
padding: 20px;
border-radius: 10px;
margin-top: 1em;
}
.hero h1 {
margin-top: 0;
margin-bottom: 0.3em;
}
.c4 {
padding: 10px;
box-sizing: border-box;
}
.c4 h3 {
margin-top: 0;
}
.c4 a {
margin-top: 10px;
display: inline-block;
}
</style>
</head>
<body>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="#">Your Site Name</a>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</nav>
<button class="btn-close btn btn-sm">×</button>
<div class="container">
<div class="hero">
<h1>Example</h1>
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
<a class="btn btn-b" href="http://owenversteeg.com">Go places!</a>
</div>
<div class="row">
<div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-a">Do stuff!</a></div>
<div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-b">Do stuff!</a></div> <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-c">Do stuff!</a></div>
</div>
</div>
</body>
</html>

128
examples.html Normal file
View file

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>min - examples</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;
}
/* Fun h1s */
h1:not(.exampleh1) {
margin: 0.2em 0;
border-bottom: 5px solid;
margin-bottom: 15px;
padding-bottom: 5px;
}
.fourways {
color: #666;
margin-bottom: 0;
}
small {
color: #6b6;
font-size: 0.6em;
}
/* New css */
img {
border: 1px solid;
border-radius: 6px;
align-self: center;
vertical-align: middle;
margin-right: 10px;
}
a {
color: #5583bb;
}
</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]-->
</head>
<body>
<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</a>
<a class="current" href="#">Examples</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>
<button class="btn btn-sm btn-close">×</button>
<div class="container">
<h1>Examples</h1>
<p>
All of these examples are completely free to use, copy, and distribute however you like; they are all MIT licensed.
<br><br>
<a href="example.html"><img class="exampleimg" src="example-1.jpg">Basic Page w/Nav</a>
</p>
</div>
<script src="compiledcss.js" type="text/javascript"></script>
<script src="download.js" type="text/javascript"></script>
<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>
<script src="defer.js"></script>
</body>
</html>

10
index.html
View file

@ -242,9 +242,13 @@
}
@media (max-width: 870px) {
.timeholder {
box-shadow: 0 0 0 0;
}
.timeholder {
box-shadow: 0 0 0 0;
}
.btn {
padding: 20px 45px 24px;
}
.hero {
padding: 14px;