Last active
August 29, 2015 13:56
-
-
Save godDLL/8865260 to your computer and use it in GitHub Desktop.
HTML5 kickstart with AMD Javascript and Responsive CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype HTML> | |
| <meta charset=utf-8> | |
| <meta name=viewport content="width=device-width,initial-scale=1"> | |
| <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> | |
| <title></title> | |
| <!--[if IE]><script>(function(){var e="abbr,article,aside,audio,canvas,datalist,details,dialog,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()</script><![endif]--> | |
| <script> | |
| function init(){ | |
| curl(['minified'], function(MINI){ | |
| var $ = MINI.$, EE = MINI.EE | |
| $.ready(function (){ 'use strict' | |
| $('body').set('-nojs') | |
| }) | |
| }) | |
| } | |
| </script> | |
| <script onload="init()" src='//cdn.jsdelivr.net/g/curl.js@0.8.9,minified.js@beta5' async></script> | |
| <link rel=stylesheet href='/responsive.css'> | |
| <body class=nojs><div id='container'> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* base_modern_css v0.1.1 2015 Pan-Gap <yuli@pan-gap.com> | |
| https://bitbucket.org/snippets/pan-gap/gMprn | |
| adapted from various reputable sources */ | |
| /* reset */ | |
| article,aside,figure,footer,header,hgroup,nav,section {display:block} | |
| html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre, | |
| a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp, | |
| small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li, | |
| fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { | |
| margin:0;padding:0;border:0;outline:0; | |
| font-size:100%;vertical-align:baseline;background:transparent} | |
| ul, ol {list-style:none} blockquote, q {quotes:none} | |
| blockquote:before, blockquote:after, q:before, q:after {content:'';content:none} | |
| /* DO NOT FORGET <table cellpadding=0 cellspacing=0> */ | |
| table {border-collapse:collapse;border-spacing:0} html {overflow-y:scroll} | |
| * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} | |
| img {max-width:100%;height:auto;vertical-align:middle;display:inline-block} | |
| body, html {height:100%} body {min-height:100%} @-ms-viewport {width:device-width} | |
| /* SET FONTS HERE */ | |
| body {font:16px/1.25 'Lucida Grande', 'Droid Sans', Verdana, sans-serif; *font-size:small;} | |
| select, input, textarea, button, label { | |
| font:99% 'Lucida Grande', 'Droid Sans', Verdana, sans-serif; | |
| line-height:1.25; | |
| } | |
| article h1, article h2, article h3, article h4, article h5 { | |
| font-family:'Times', serif; font-weight:normal;} | |
| code, pre, article textarea { | |
| font:15px/1.334 'Consolas', 'Menlo', | |
| 'Deja Vu Sans Mono', 'Courier New', monospace!important; | |
| } | |
| article h1 {font-size:34px; line-height:30px;} | |
| article h2 {font-size:24px; line-height:25px;} | |
| article h3 {font-size:19px; line-height:25px;} | |
| article h4 {font-size:15px; line-height:20px;} | |
| article h5 {font-size:10px; line-height:10px; text-transform:uppercase;} | |
| button, input[type=submit] {margin:2px 0;} | |
| pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word;} | |
| select, input, textarea, button, label { | |
| margin:0; | |
| width:auto; | |
| overflow:visible; | |
| } | |
| /* typography, where needed */ | |
| article p, article ul, article ol {padding:0; margin:15px 0;} | |
| article ul {list-style:square;} | |
| article ol {list-style:decimal;} | |
| article blockquote, article pre {padding:5px 15px; margin:10px -15px;} | |
| article textarea { | |
| font-family:inherit !important; | |
| width:80%; | |
| height:auto; | |
| overflow:auto; | |
| padding:5px; | |
| margin:5px 0; | |
| } | |
| article h1~pre, article h2~pre, article h3~pre, article h4~pre, | |
| article h1~blockquote, article h2~blockquote, | |
| article h3~blockquote, article h4~blockquote, hgroup { | |
| margin-top:15px; | |
| margin-bottom:15px; | |
| } | |
| article p~h1, article p~h2, article p~h3, article p~h4, article p~hgroup { | |
| margin-top:25px; | |
| } | |
| article pre {background-color:#efefef;} | |
| article blockquote, article cite {background-color:#efefef; font-style:oblique;} | |
| /* contrast */ | |
| body {color:#555; background:#fbfbfb;} | |
| a {color:#152237; text-decoration:none;} | |
| a:hover, a:focus {text-decoration:underline;} | |
| a:visited, a:active {color:#3b1c33;} | |
| h1, h2, h3, h4, h5 {color:#444;} | |
| hr {margin:8px 0; padding:0 1px; border:1px #999 solid;} | |
| /* responsive */ | |
| .widget a:hover {text-decoration:none;} | |
| .widget {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none} | |
| .text-hide { | |
| font: 0/0 a; | |
| color: transparent; | |
| text-shadow: none; | |
| background-color: transparent; | |
| border: 0; | |
| } | |
| .hidden {display:none; visibility: hidden;} | |
| .visible-desktop {display:none !important;} | |
| .visible-tablet {display:none !important;} | |
| .visible-mobile {display:inherit !important;} | |
| .hidden-mobile {display:none !important;} | |
| .clearfix:before, .clearfix:after, section .row:before, section .row:after, | |
| #container section:before, #container section:after { | |
| display:table; content:''; line-height:0; | |
| } | |
| .clearfix:after, section .row:after, #container section:after {clear:both} | |
| section .col, section .col-full, section .col-half, section .mcol-half, | |
| section .wcol-half, section .col-third, section .mcol-third, section .wcol-third { | |
| position:relative; float:left; min-height:1px; | |
| } | |
| section.pad {padding:5px 0;} | |
| .row.pad {padding:0 5px;} | |
| .col.pad {padding:5px;} | |
| article p {margin:5px 0;} | |
| section .pad {padding:5px;} | |
| section .text-left {text-align:left;} | |
| section .text-right {text-align:right;} | |
| section .text-center {text-align:center;} | |
| section .solo {overflow:auto; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0;} | |
| .col, .col-full {width:100%;} | |
| /* mobile */ | |
| #container { | |
| height:100%; | |
| margin:0 auto; | |
| min-width:320px; | |
| } | |
| /* phone */ | |
| @media (max-device-width:480px) { | |
| section textarea {font-family:inherit !important;} | |
| } | |
| /* tablet */ | |
| @media screen and (min-width:480px) and (max-width:767px) { | |
| .mcol-half {width:50%;} | |
| .mcol-third {width:33.33333%;} | |
| .mcol-2thirds {width:66.66666%;} | |
| .mpush-third {left:33.33333%;} | |
| .mpull-third {right:33.33333%;} | |
| section .mpad {padding:5px;} | |
| } | |
| @media screen and (min-width:768px) { | |
| .col-half {width:50%;} | |
| .col-third {width:33.33333%;} | |
| .col-2thirds {width:66.66666%;} | |
| .push-third {left:33.33333%;} | |
| .pull-third {right:33.33333%;} | |
| } | |
| @media screen and (min-width:768px) and (max-width:1151px) { | |
| section.pad {padding:10px 0;} | |
| article p {margin:10px 0;} | |
| .row.pad {padding:0 10px;} | |
| .col.pad {padding:10px;} | |
| section .pad {padding:10px;} | |
| .hidden-mobile {display:inherit !important;} | |
| .visible-mobile {display:none !important;} | |
| .visible-tablet {display:inherit !important;} | |
| .hidden-tablet {display:none !important;} | |
| } | |
| /* desktop */ | |
| @media screen and (min-width:1152px) { | |
| #container {max-width:1152px;} | |
| section.pad {padding:15px 0;} | |
| article p {margin:15px 0;} | |
| .row.pad {padding:0 15px;} | |
| .col.pad {padding:15px;} | |
| section .pad {padding:15px;} | |
| .hidden-mobile {display:inherit !important;} | |
| .visible-mobile {display:none !important;} | |
| .visible-desktop {display:inherit !important;} | |
| .hidden-desktop {display:none !important;} | |
| .wcol-half {width:50%;} | |
| .mcol-third {width:33.33333%;} | |
| .mcol-2thirds {width:66.66666%;} | |
| .wpush-third {left:33.33333%;} | |
| .wpull-third {right:33.33333%;} | |
| section .wpad {padding:15px;} | |
| } | |
| /* print */ | |
| .visible-print {display:none !important;} | |
| @media print { | |
| .visible-print {display:inherit !important;} | |
| .hidden-print {display:none !important;} | |
| * {text-shadow:none !important; filter:none !important; -ms-filter: none !important;} | |
| body {background:#fff;} | |
| a, a:visited {color:#000 !important; text-decoration:underline;} | |
| a[href^='http']:after, a[href^='ftp']:after {content:" (" attr(href) ")";} | |
| abbr[title]:after {content:" (" attr(title) ")";} | |
| thead {display:table-header-group;} | |
| pre, blockquote, tr, img {page-break-inside:avoid;} | |
| @page {margin:0.5cm;} | |
| p, h2, h3, h4, h5 {orphans:3; widows:3;} | |
| h2, h3, h4, h5 {page-break-after:avoid;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment