First commit
This commit is contained in:
Yann Esposito (Yogsototh)
commit
e84e639183
GPG key ID:
7B19A4C650D59646
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/sass/.DS_Store
|
||||
/.sass-cache
|
||||
/sass/.sass-cache/
|
||||
_build/
|
||||
36
README.md
Normal file
36
README.md
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
blunt
|
||||
=====
|
||||
|
||||
a tiny framework that makes websites blunt
|
||||
|
||||
Written in LESS and Sass, compiled to CSS.
|
||||
|
||||
### License
|
||||
|
||||
MIT licensed.
|
||||
|
||||
### Building the latest Min
|
||||
|
||||
WARNING!
|
||||
This will build the latest, pre-release version of Min.
|
||||
It may be broken.
|
||||
If you want to use an already-built Min, it's available in the file entireframework.min.css as well as
|
||||
through the [downloads page](http://mincss.com/download.html).
|
||||
|
||||
You must have lessc (to compile the LESS, obviously) and Java (to run YUI compressor) installed.
|
||||
|
||||
bash build.sh
|
||||
|
||||
### World's smallest? Really?
|
||||
|
||||
TL;DR Min really is the world's smallest CSS framework, however you slice it.
|
||||
|
||||
We personally feel that the criteria for "world's smallest CSS framework"
|
||||
are buttons, inputs, navbars, tables, icons, grids, headings
|
||||
and standardization of these elements across the "Big 5" browsers
|
||||
(Chrome, Firefox, Opera, Safari, and Internet Explorer).
|
||||
|
||||
Of course, your criteria for what a CSS framework is are likely to be different,
|
||||
and thus you are encouraged to (on the Downloads page) download whatever parts you feel to be relevant.
|
||||
No matter what you select (and what you compare Min to) Min will be smaller.
|
||||
Thus, Min really is the world's smallest CSS framework, no matter your criteria for what a CSS framework is.
|
||||
1
blunt.min.css
vendored
Normal file
1
blunt.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/* Copyright 2022 Yann Esposito; MIT licensed */html{font-size:12px}body,textarea,input,select{background:0;border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}*{box-sizing:border-box}.btn,h1,h2,h3,h4,h5,h6{font-size:1rem}h1{border-bottom:double 5px}h2{border-bottom:solid 2px}h3{border-bottom:dashed 1px}h4{border-bottom:dotted 1px}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:10px}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}.block{padding:6px;margin:6px}.card{padding:5px;margin:5px;border:solid 2px}.hero{background:#ddd;padding:20px;border-radius:10px;margin-top:1em}@media(min-width:1310px){.container{margin:auto;width:1270px}}pre{background:#eee;padding:10px}code{background:rgba(0,0,0,.1);border:solid 1px rgba(0,0,0,.1);padding:1px}.btn{background:#999;border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px;box-shadow:4px 4px rgba(0,0,0,.75)}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777;box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#494}.btn-b:hover{background:#383}.btn-b:active,.btn-b:focus{background:#272}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{padding:10px 14px 11px}.row{display:flex;justify-content:space-evenly}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem}h1{border:double 5px #000;padding:1rem}h2{border-bottom:double 5px #000}h3{border-bottom:solid 2px #000}h4{border-bottom:solid 2px #ccc}h5{border-bottom:solid 1px #ccc}h6{border-bottom:dashed 1px #ccc}.big{font-size:2em}.huge{font-size:3em}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid #888}.addon{padding:8px 12px;border-width:2px;border-color:#888;border-style:solid none solid solid}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:50px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{background:#def;border-left:5px solid #59d;padding:1.5em}.info{background:#def;border-color:#59d}.ok{background:#c8fac8;border-color:#73cf73}.warn{background:#ffd9b4;border-color:#fa6}.err{background:#fed3d3;border-color:#e75d5d}.black,.black *{background:#000;border-color:#444;color:#fff}.fatal,.fatal *{background:#bf2aee;border-color:#9311bb;color:#fff}
|
||||
28
build.sh
Executable file
28
build.sh
Executable file
|
|
@ -0,0 +1,28 @@
|
|||
#!/bin/bash
|
||||
|
||||
DIST="_build"
|
||||
TMPCSS="$DIST/tmp.css"
|
||||
DISTCSS="blunt.min.css"
|
||||
|
||||
mkdir $DIST -p
|
||||
[ -f $TMPCSS ] && rm -f $TMPCSS
|
||||
|
||||
subtypes=(general buttons grid headings icons forms navbar tables messages)
|
||||
YEAR="$(date +"%Y")"
|
||||
echo -n "/* Copyright $YEAR Yann Esposito; MIT licensed */" >> $TMPCSS
|
||||
|
||||
for item in "${subtypes[@]}"; do
|
||||
echo "building: $item"
|
||||
lessc "less/$item.less" > "$DIST/$item.css"
|
||||
minify "$DIST/$item.css" -o "$DIST/$item.min.css"
|
||||
cat "$DIST/$item.min.css" >> $TMPCSS
|
||||
done
|
||||
|
||||
[ -f $DISTCSS.bak ] && rm -f $DISTCSS.bak
|
||||
[ -f $DISTCSS ] && mv $DISTCSS $DISTCSS.bak
|
||||
mv $TMPCSS $DISTCSS
|
||||
# cleanup
|
||||
rm -f $DISTCSS.bak
|
||||
rm -f $TMPCSS
|
||||
echo "Built: $DISTCSS"
|
||||
|
||||
41
flake.lock
Normal file
41
flake.lock
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"nodes": {
|
||||
"flake-utils": {
|
||||
"locked": {
|
||||
"lastModified": 1659877975,
|
||||
"narHash": "sha256-zllb8aq3YO3h8B/U0/J1WBgAL8EX5yWf5pMj3G0NAmc=",
|
||||
"owner": "numtide",
|
||||
"repo": "flake-utils",
|
||||
"rev": "c0e246b9b83f637f4681389ecabcb2681b4f3af0",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
"owner": "numtide",
|
||||
"repo": "flake-utils",
|
||||
"type": "github"
|
||||
}
|
||||
},
|
||||
"nixpkgs": {
|
||||
"locked": {
|
||||
"lastModified": 1664058032,
|
||||
"narHash": "sha256-djifox1rDQ2x+ujJCHiXyPAl2bXk+GlYorA0Clfhfko=",
|
||||
"owner": "NixOS",
|
||||
"repo": "nixpkgs",
|
||||
"rev": "f2ea9a9fcd41b65651fd89c1b9198798f4362f66",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
"id": "nixpkgs",
|
||||
"type": "indirect"
|
||||
}
|
||||
},
|
||||
"root": {
|
||||
"inputs": {
|
||||
"flake-utils": "flake-utils",
|
||||
"nixpkgs": "nixpkgs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"root": "root",
|
||||
"version": 7
|
||||
}
|
||||
19
flake.nix
Normal file
19
flake.nix
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
description = "BluntCSS";
|
||||
|
||||
inputs.flake-utils.url = "github:numtide/flake-utils";
|
||||
|
||||
outputs = { self, nixpkgs, flake-utils }:
|
||||
flake-utils.lib.eachDefaultSystem (system:
|
||||
let pkgs = nixpkgs.legacyPackages.${system}; in
|
||||
rec {
|
||||
devShell = pkgs.mkShell {
|
||||
buildInputs = with pkgs; [ lessc minify ];
|
||||
|
||||
shellHook = ''
|
||||
echo "shell with lessc and minify"
|
||||
'';
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
255
h/docs.html
Normal file
255
h/docs.html
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
<!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, maximum-scale=1.0, user-scalable=no">
|
||||
<title>YOLO - docs</title>
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
.dark { background: #ddd; }
|
||||
.light { background: #eee; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="index.html">BLUNT</a>
|
||||
<a class="current" href="#">Docs</a>
|
||||
<!--
|
||||
<a href="bootstrapconverter.html">Bootstrap Converter</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
-->
|
||||
<a href="download.html">Download</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
<a href="https://github.com/owenversteeg/min">Github</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1>Basics & Browser Support</h1>
|
||||
<p>
|
||||
BLUNT's minimalism has several advantages.
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<h1>Buttons</h1>
|
||||
<a class="btn btn-a">btn-a</a>
|
||||
<a class="btn-b btn">btn-b</a>
|
||||
<a class="btn-c btn">btn-c</a>
|
||||
<a class="btn">classless</a>
|
||||
|
||||
<br><br><pre><a class="btn btn-b smooth">btn-b</a></pre>
|
||||
<br>
|
||||
<a class="btn btn-a btn-sm">btn-sm btn-a</a>
|
||||
<a class="btn btn-b btn-sm">btn-sm btn-b</a>
|
||||
<a class="btn btn-c btn-sm">btn-sm btn-c</a>
|
||||
<a class="btn btn-sm">btn-sm classless</a>
|
||||
|
||||
<br><br><pre><a class="btn btn-b btn-sm smooth">btn-sm</a></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Forms</h1>
|
||||
<div class="block">
|
||||
<input type="text" placeholder="input type="text"">
|
||||
</div>
|
||||
<div class="block">
|
||||
<textarea rows="3" placeholder="textarea"></textarea>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="addon">$</span><input type="text" class="smooth" placeholder="span class="addon"">
|
||||
</div>
|
||||
<pre><input type="text" class="smooth">
|
||||
<br><textarea rows="3" class="smooth">
|
||||
<br><span class="addon">$</span><input type="text" class="smooth"></pre>
|
||||
<div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code></span></code> and <code><input></code> tags. Example: <pre>... </span> <input ...</pre><span class="addon">$</span> <input type="text" class="smooth"> <pre>... </span><input ...</pre><span class="addon">$</span><input type="text" class="smooth"></div>
|
||||
</div>
|
||||
|
||||
<div class="navbar">
|
||||
<h1>Navbars</h1>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">BLUNT</a>
|
||||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
<a href="#">Four</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn btn-sm">×</button>
|
||||
<br>
|
||||
<pre><nav class="nav" tabindex="-1" onclick="this.focus()"><br> <div class="container"><br> <a class="pagename current" href="#">BLUNT</a><br> <a href="#">One</a><br> <a href="#">Two</a> <br> <a href="#">Three</a><br> </div><br></nav><br><button class="btn-close btn btn-sm">×</button></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Tables</h1>
|
||||
<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
|
||||
<br><br>
|
||||
<pre><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h1>Icons</h1>
|
||||
<div class="icons">
|
||||
<div class="row">
|
||||
<div class="col c6 card">
|
||||
<div class="block"><b>Android Safe</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i>
|
||||
<div class="block msg" style="line-height: 1.5rem">
|
||||
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6 card">
|
||||
<div class="block"><b>Total Set</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i>
|
||||
<div class="block msg warn">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre><i class="ico">Copy and paste icons from above here!</i></pre>
|
||||
<h1>Grids</h1>
|
||||
<div class="row">
|
||||
<div class="col dark c12">12</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c11">11</div>
|
||||
<div class="col light c1">1</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c10">10</div>
|
||||
<div class="col light c2">2</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c9">9</div>
|
||||
<div class="col light c3">3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c8">8</div>
|
||||
<div class="col light c4">4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c7">7</div>
|
||||
<div class="col light c5">5</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c6">6</div>
|
||||
<div class="col light c6">6</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c5">5</div>
|
||||
<div class="col light c7">7</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c4">4</div>
|
||||
<div class="col light c8">8</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c3">3</div>
|
||||
<div class="col light c9">9</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c2">2</div>
|
||||
<div class="col light c10">10</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c1">1</div>
|
||||
<div class="col light c11">11</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col light c12">12</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<!--[if lte IE 6]><br><br><br><![endif]-->
|
||||
|
||||
<pre><div class="row"><br> <div class="col c12">12</div><br></div>
|
||||
<br><div class="row"><br> <div class="col c4">4</div><br> <div class="col c8">8</div><br></div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h1>Headings</h1>
|
||||
<div class="headings">
|
||||
<h1 class="exampleh1">h1</h1>
|
||||
<h2>h2</h2>
|
||||
<h3>h3</h3>
|
||||
<h4>h4</h4>
|
||||
<h5>h5</h5>
|
||||
<h6>h6</h6>
|
||||
<br>
|
||||
<pre><h1>Level One Heading</h1></pre>
|
||||
</div>
|
||||
|
||||
<h1>Messages</h1>
|
||||
<div class="messages">
|
||||
<div class="msg">
|
||||
<strong>Normal Message</strong>
|
||||
This is a normal message with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg black">
|
||||
<strong>Black</strong>
|
||||
This is done by adding <code>black</code> to the class.
|
||||
</div>
|
||||
<div class="msg info">
|
||||
<strong><i class="ico">☞</i> Info</strong>
|
||||
This is done by adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg ok">
|
||||
<strong><i class="ico">☑</i> OK</strong>
|
||||
This is done by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg warn">
|
||||
<strong><i class="ico">☣</i> Warning</strong>
|
||||
This is done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg err">
|
||||
<strong><i class="ico">☒</i> Error</strong>
|
||||
This is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☣</i> Fatal</strong>
|
||||
This is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
<pre><div class="msg">
|
||||
<strong>Alert headline!</strong>
|
||||
Message text
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="krakenholder">
|
||||
<img src="kraken.png" class="kraken" alt="a scary sea monster">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
145
h/download.html
Normal file
145
h/download.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("button");
|
||||
</script>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>min - download</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;
|
||||
}
|
||||
</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 class="current" href="#">Download</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
<a href="https://github.com/owenversteeg/min">Github</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<h2 class="fourways">There are four ways to use Min:</h2>
|
||||
<h1>CDN <small>(Recommended)</small></h1>
|
||||
<p>
|
||||
Since Min is only 995 bytes and all of the core components are very commonly used, for most developers it makes sense to use <a href="http://www.jsdelivr.com/#!min">the CDN version from jsdelivr</a>. This provides several benefits: the user may have cached the framework, and if they have not, it will be served from a blazingly-fast server in their location instead.
|
||||
</p>
|
||||
<h1>Download</h1>
|
||||
<p>
|
||||
Some developers prefer to serve Min from their own servers. Make sure that your server automatically gzips Min (and other CSS files) to ensure that your users get the fastest page times possible.
|
||||
</p>
|
||||
<a class="btn btn-sm btn-a" href="entireframework.min.css" download>Download Min</a>
|
||||
<h1>Customized download</h1>
|
||||
<p>
|
||||
For some developers, every byte counts, so it makes sense to pick and choose each component of Min. You can do so below.
|
||||
<div id="checkboxes">
|
||||
<label><input name="general" type="checkbox" checked disabled/>General (required)</label>
|
||||
<label><input name="headings" type="checkbox" checked/>Headings</label>
|
||||
<label><input name="buttons" type="checkbox" checked/>Buttons</label>
|
||||
<label><input name="forms" type="checkbox" checked/>Forms</label>
|
||||
<label><input name="navbar" type="checkbox"/>Navbar</label>
|
||||
<label><input name="tables" type="checkbox"/>Tables</label>
|
||||
<label><input name="icons" type="checkbox"/>Icons</label>
|
||||
<label><input name="grid" type="checkbox"/>Grid</label>
|
||||
<label><input name="messages" type="checkbox"/>Messages</label>
|
||||
</div>
|
||||
<a href="javascript:prettyOutput()"><button class="btn smooth btn-a">Get CSS</button></a>
|
||||
<br>
|
||||
<textarea id="result" rows="5" class="smooth" onclick="this.select();" readonly></textarea>
|
||||
<h4 id="details"></h4>
|
||||
</p>
|
||||
<h1>Bower</h1>
|
||||
<p>
|
||||
If you prefer to use Bower, just run <code>bower install min</code>. This will give you Min as well as the LESS files it's built from.
|
||||
</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>
|
||||
26
h/example.html
Normal file
26
h/example.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!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="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
83
h/example2.html
Normal file
83
h/example2.html
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css">
|
||||
<style>body { font-family: monospace; }</style>
|
||||
<title>Your Page Title</title>
|
||||
</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="#">Go places!</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col block">
|
||||
<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="#" class="btn btn-sm btn-a">
|
||||
Do stuff!
|
||||
</a>
|
||||
</div>
|
||||
<div class="col block">
|
||||
<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="#" class="btn btn-sm btn-b">
|
||||
Do stuff!
|
||||
</a>
|
||||
</div>
|
||||
<div class="col block">
|
||||
<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="#" class="btn btn-sm btn-c">
|
||||
Do stuff!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col c4 card">
|
||||
<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="#" class="btn btn-sm">
|
||||
Do stuff!
|
||||
</a>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<h3>Yay headings!</h3>
|
||||
<div class="block">
|
||||
Something.
|
||||
</div>
|
||||
<br>
|
||||
<a href="#" class="btn btn-sm btn-b">
|
||||
Do stuff!
|
||||
</a>
|
||||
</div>
|
||||
<div class="col c4 card">
|
||||
<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="#" class="btn btn-sm btn-c">
|
||||
Do stuff!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
h/example3.html
Normal file
43
h/example3.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!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="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0.2em 0;
|
||||
border-bottom: 5px solid;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
</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">
|
||||
<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! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min!</p>
|
||||
<h1>Doing things!</h1>
|
||||
<p>Enter how many dollars you want! <span class="addon">$</span><input type="text" class="smooth"> You can view the source of this page and copy it to get a quick start on a project with Min!</p>
|
||||
<h1>Do we like numbers?</h1>
|
||||
<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
|
||||
<h1>Conclusions ☺ ☻</h1>
|
||||
<i class="ico">We like chess. ♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟</i>
|
||||
<br><i class="ico">We like phones! ☎</i>
|
||||
<br><i class="ico">We like arrows! ⇦ ⇧ ⇨ ⇩</i>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
132
h/examples.html
Normal file
132
h/examples.html
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!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.html">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>
|
||||
<br><br>
|
||||
<a href="example2.html"><img class="exampleimg" src="example-2.jpg">Standard Page w/Hero</a>
|
||||
<br><br>
|
||||
<a href="example3.html"><img class="exampleimg" src="example-3.jpg">Page w/More Elements</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>
|
||||
38
h/index.html
Normal file
38
h/index.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
<title>Blunt</title>
|
||||
<style>
|
||||
.hero { text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block">
|
||||
<div class="hero">
|
||||
<h1 class="title">BLUNT</h1>
|
||||
<h4 class="mobileonly">The world's <em>fastest</em> CSS framework</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="row">
|
||||
<div class="col card c3">
|
||||
<h3>Documentation</h3>
|
||||
<div class="block">
|
||||
<p>Don't worry it will be quick and straightforward.<p>
|
||||
</div>
|
||||
<a href="docs.html" class="btn btn-a">Docs</a>
|
||||
</div>
|
||||
<div class="col card c3">
|
||||
<h3>Examples</h3>
|
||||
<div class="block">
|
||||
<p>To give you an idea.<p>
|
||||
</div>
|
||||
<a href="examples.html" class="btn smooth">Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
284
h/oldindex.html
Normal file
284
h/oldindex.html
Normal 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"> </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"> </div>
|
||||
</div>
|
||||
<!--[if lt IE 7]> <br><br><br><![endif]-->
|
||||
<div class="row intro">
|
||||
<div class="col c2"> </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 <div>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"> </div>
|
||||
</div>
|
||||
<!--[if lt IE 7]> <br><br><br><![endif]-->
|
||||
<div class="row intro">
|
||||
<div class="col c2"> </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"> </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>
|
||||
58
less/buttons.less
Normal file
58
less/buttons.less
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.btn {
|
||||
background: #999;
|
||||
border: solid 2px #000;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
|
||||
margin: 2px 0;
|
||||
padding: 12px 30px 14px;
|
||||
box-shadow: 4px 4px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.btn:active,.btn:focus {
|
||||
background: #777;
|
||||
box-shadow: 1px 1px #000;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.btn-a {
|
||||
background: #0ae;
|
||||
&:hover {
|
||||
background: #09d; /* darken(@btn-a-bg, 5%) */
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background: #08b; /* darken(@btn-a-bg, 10%) */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-b {
|
||||
background: #494;
|
||||
&:hover {
|
||||
background: #383; /* darken(@btn-a-bg, 5%) */
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: #272; /* darken(@btn-b-bg, 10%) */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-c {
|
||||
background: #d33;
|
||||
&:hover {
|
||||
background: #c22; /* darken(@btn-c-bg, 5%) */
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: #b22; /* darken(@btn-c-bg, 10%) */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 10px 14px 11px;
|
||||
}
|
||||
31
less/forms.less
Normal file
31
less/forms.less
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
label > * {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
textarea, input, select {
|
||||
border: 2px solid #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
textarea:focus, input:focus, select:focus {
|
||||
border-color: #5ab;
|
||||
}
|
||||
|
||||
textarea, input[type=text] {
|
||||
-webkit-appearance: none; /* make iOS inputs pretty */
|
||||
width: 13em;
|
||||
outline: 0;
|
||||
border: 2px solid #888;
|
||||
}
|
||||
|
||||
.addon {
|
||||
padding: 8px 12px;
|
||||
border-width: 2px;
|
||||
border-color: #888;
|
||||
border-style: solid none solid solid;
|
||||
}
|
||||
70
less/general.less
Normal file
70
less/general.less
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
html { font-size: 12px; }
|
||||
body, textarea, input, select {
|
||||
background: 0;
|
||||
border-radius: 0;
|
||||
font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.btn, h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 { border-bottom: double 5px; }
|
||||
h2 { border-bottom: solid 2px; }
|
||||
h3 { border-bottom: dashed 1px; }
|
||||
h4 { border-bottom: dotted 1px; }
|
||||
|
||||
.addon, .btn-sm, .nav, textarea, input, select {
|
||||
outline: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.smooth {
|
||||
}
|
||||
|
||||
.btn, .nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 6px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
/* is like a block with a border */
|
||||
.card {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
border: solid 2px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #ddd;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@media(min-width:1310px) {
|
||||
.container {
|
||||
margin: auto;
|
||||
width: 1270px;
|
||||
}
|
||||
}
|
||||
|
||||
pre { background: #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
code { background: rgba(0,0,0,0.1);
|
||||
border: solid 1px rgba(0,0,0,0.1);
|
||||
padding: 1px;
|
||||
}
|
||||
65
less/grid.less
Normal file
65
less/grid.less
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/* Grid system responsive code is in general.less */
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.table, .c12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
width: 91.66%;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
width: 83.33%;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
width: 58.33%;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
width: 41.66%
|
||||
}
|
||||
|
||||
.c4 {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
width: 16.66%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
width: 8.33%;
|
||||
}
|
||||
|
||||
/* For smaller screens, change all columns to 100% width */
|
||||
@media (max-width:870px) {
|
||||
.row .col {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
12
less/headings.less
Normal file
12
less/headings.less
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/* Make the default heading style larger */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { display: table; padding: 0.25rem; }
|
||||
h1 { border: double 5px #000; padding: 1rem;}
|
||||
h2 { border-bottom: double 5px #000; }
|
||||
h3 { border-bottom: solid 2px #000; }
|
||||
h4 { border-bottom: solid 2px #ccc; }
|
||||
h5 { border-bottom: solid 1px #ccc; }
|
||||
h6 { border-bottom: dashed 1px #ccc; }
|
||||
|
||||
.big { font-size: 2em; }
|
||||
.huge { font-size: 3em; }
|
||||
5
less/icons.less
Normal file
5
less/icons.less
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.ico {
|
||||
font: 20px Arial Unicode MS, Lucida Sans Unicode;
|
||||
line-height: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
1
less/iehacks.less
Normal file
1
less/iehacks.less
Normal file
|
|
@ -0,0 +1 @@
|
|||
/* There aren't any IE hacks needed as of now */
|
||||
32
less/messages.less
Normal file
32
less/messages.less
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.msg {
|
||||
background: #def;
|
||||
border-left: 5px solid #59d;
|
||||
padding: 1.5em;
|
||||
}
|
||||
.info {
|
||||
background: #def;
|
||||
border-color: #59d;
|
||||
}
|
||||
.ok {
|
||||
background: #c8fac8;
|
||||
border-color: #73cf73;
|
||||
}
|
||||
.warn {
|
||||
background: #ffd9b4;
|
||||
border-color: #fa6;
|
||||
}
|
||||
.err {
|
||||
background: #fed3d3;
|
||||
border-color: #e75d5d;
|
||||
}
|
||||
.black, .black * {
|
||||
background: #000;
|
||||
border-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fatal, .fatal * {
|
||||
background: #bf2aee;
|
||||
border-color: #9311bb;
|
||||
color: #fff;
|
||||
}
|
||||
71
less/navbar.less
Normal file
71
less/navbar.less
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
.nav, .nav .current, .nav a:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 50px;
|
||||
padding: 11px 0 15px;
|
||||
/* TODO: migrate to ems (currently we don't use them because of iOS compatibility problems (has to do with unicode icon for close)) */
|
||||
/* Uncomment for animations
|
||||
max-height: 1.5em;
|
||||
*/
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: #aaa;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.nav .pagename {
|
||||
font-size: 22px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.btn.btn-close {
|
||||
background: #000;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin: -54px 7px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width:500px) {
|
||||
.btn.btn-close {
|
||||
display: block;
|
||||
}
|
||||
.nav {
|
||||
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagename {
|
||||
margin-top: -11px;
|
||||
}
|
||||
.nav:active,.nav:focus {
|
||||
height: auto;
|
||||
/* Necesary for animations
|
||||
max-height: 500px;
|
||||
height: 100%;
|
||||
*/
|
||||
}
|
||||
.nav div:before {
|
||||
background: #000;
|
||||
border-bottom: 10px double;
|
||||
border-top: 3px solid;
|
||||
content: '';
|
||||
float: right;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
right: 3px;
|
||||
top: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
9
less/tables.less
Normal file
9
less/tables.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.table th, .table td {
|
||||
padding: .5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table tbody>:nth-child(2n-1) {
|
||||
/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
|
||||
background: #ddd; /* Shade every other table row */
|
||||
}
|
||||
BIN
yuicompressor-2.4.8.jar
Normal file
BIN
yuicompressor-2.4.8.jar
Normal file
Binary file not shown.
Loading…
Reference in a new issue