Skip to content

Instantly share code, notes, and snippets.

@rs459
Last active December 10, 2015 07:58
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rs459/4404773 to your computer and use it in GitHub Desktop.
<!DOCTYPE html><!--[if IE 8]>
<html lang="en" class="no-js lt-ie9"></html><![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="description">
<meta name="author" content="author">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="output.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="main-wrapper">
<header class="main-header">header</header>
<div class="container">
<section class="main-section">section
<div class="container"><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span><span class="one">1</span></div>
<div class="container"><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span><span class="two">2</span></div>
</section>
<aside class="main-aside">aside</aside>
</div>
<footer class="main-footer">footer</footer>
</div>
</body>
@import "../vars.inc";
@import "../vendor/normalize.inc";
@import "../loogr/loogr.inc";
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/*
* loogr without media queries
* each object will be here
*/
@include loogr(all);
// Uncomment, set max-width if you want a max width,
// use .main-wrapper on the root element of your content
$max-width : 1280px;
$max-width : 0 !default;
.main-wrapper {
@if $max-width > 0 {
max-width : $max-width;
}
margin : 0 auto;
}
.container,%container {
@extend %cf--all;
}
.main-header,.main-section,.main-aside,.main-footer {
padding : 5em 0;
@extend %text-align-center--all;
}
.main-header {
background: #6d9db7;
}
.main-section {
background: #ddc;
@extend %w11of16--all;
@extend %mg-right1of16--all;
@extend %float-left--all;
@extend %w16of16--under480;
@extend %no-mg-right--under480;
}
.one, .two {
padding : 2em 0;
border : 1px solid #ccc;
}
.one {
@extend %display-inline-block--all;
@extend %w1of6--all;
@extend %w2of4--under480;
@extend %w2of6--min480-max768;
@extend %w3of12--min768-max1024;
@extend %w1of6--over1024;
}
.two {
@extend %display-inline-block--all;
@extend %w1of12--all;
@extend %w16of16--under480;
@extend %w1of4--min480-max768;
@extend %w4of12--min768-max1024;
@extend %w1of12--over1024;
}
.main-aside {
background: #de1;
@extend %w4of16--all;
@extend %float-left--all;
@extend %w16of16--under480;
}
.main-footer {
background: #aaa;
}
/*
* Loogr mediaqueries object.
*/
@media screen and (max-width: 480px) {
$namespace : "under480";
@include loogr($namespace);
}
@media screen and (min-width: 481px) and (max-width: 768px) {
$namespace : "min480-max768";
@include loogr($namespace);
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
$namespace : "min768-max1024";
@include loogr($namespace);
}
@media screen and (min-width: 1025px) {
$namespace : "over1024";
@include loogr($namespace);
}
/*
* Media print (h5bp)
*/
@import "../vendor/h5bp-print.inc";
/* normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
}
/*
* Removes default margin.
*/
body {
margin: 0;
padding: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/*
* Removes border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/*
* 1. Corrects font family not being inherited in all browsers.
* 2. Corrects font size not being inherited in all browsers.
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */
}
/*
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to `content-box` in IE 8/9.
* 2. Removes excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE 8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/* normalize end */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
* loogr without media queries
* each object will be here
*/
.main-aside {
width: 25%;
}
.main-section {
width: 68.75%;
}
.main-section {
margin-right: 6.25%;
}
.two {
width: 8.33333%;
}
.one {
width: 16.66667%;
}
.one, .two {
display: inline-block;
}
.main-section, .main-aside {
float: left;
}
.main-header, .main-section, .main-aside, .main-footer {
text-align: center;
}
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.lt-ie8 .container {
zoom: 1;
}
.main-wrapper {
max-width: 1280px;
margin: 0 auto;
}
.main-header, .main-section, .main-aside, .main-footer {
padding: 5em 0;
}
.main-header {
background: #6d9db7;
}
.main-section {
background: #ddc;
}
.one, .two {
padding: 2em 0;
border: 1px solid #cccccc;
}
.main-aside {
background: #de1;
}
.main-footer {
background: #aaa;
}
/*
* Loogr mediaqueries object.
*/
@media screen and (max-width: 480px) {
.main-section, .two, .main-aside {
width: 100%;
}
.one {
width: 50%;
}
.main-section {
margin-right: 0;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.one {
width: 33.33333%;
}
.two {
width: 25%;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.one {
width: 25%;
}
.two {
width: 33.33333%;
}
}
@media screen and (min-width: 1025px) {
.two {
width: 8.33333%;
}
.one {
width: 16.66667%;
}
}
/*
* Media print (h5bp)
*/
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
pre, blockquote {
border: 1px solid #999999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment