Last active
June 23, 2016 04:17
-
-
Save lackneets/8fce112d7a85d8e7b3f6 to your computer and use it in GitHub Desktop.
Guideline for HTML5
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
| /* Common Behaviors */ | |
| .noselect { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .noaction:extend(.noselect){ | |
| pointer-events: none; | |
| } | |
| .action:extend(.noselect){ | |
| cursor: pointer; | |
| } | |
| .undecorated{ | |
| text-decoration: none; | |
| } | |
| .hide{ display: none !important; } | |
| .show{ display: inherit !important; } | |
| /* IE Fix */ | |
| a img{ border: none } | |
| /* Simple Grid System inspired by PureCSS */ | |
| .grids(@grid, @padding: 0.25em){ | |
| letter-spacing: -.31em; | |
| margin-left: @padding*-1; | |
| margin-right: @padding*-1; | |
| > * { | |
| display: inline-block; | |
| vertical-align: top; | |
| letter-spacing: 0.01em; | |
| width: 100%/@grid; | |
| box-sizing: border-box; | |
| padding-left: @padding; | |
| padding-right: @padding; | |
| // padding-bottom: 2%; | |
| } | |
| } | |
| /* Responsive Unities */ | |
| @breakMobile: 768px; | |
| .small-than(@breakPoint, @rules){ | |
| @media screen and (max-width: (@breakPoint - 1px) ){ | |
| @rules(); | |
| } | |
| } | |
| .wider-than(@breakPoint, @rules){ | |
| @media screen and (min-width: @breakPoint){ | |
| @rules(); | |
| } | |
| } | |
| .mobile-only(@rules){ | |
| @media screen and (max-width: (@breakMobile - 1px) ){ | |
| @rules(); | |
| } | |
| } | |
| .desktop-only(@rules){ | |
| @media screen and (min-width: @breakMobile){ | |
| @rules(); | |
| } | |
| } | |
| .desktop-only({ | |
| .mobile-only { | |
| display: none; | |
| } | |
| .desktop-visible-block{ | |
| display: block !important; | |
| } | |
| }); | |
| .mobile-only({ | |
| .desktop-only { | |
| display: none; | |
| } | |
| .mobile-visible-block{ | |
| display: block !important; | |
| } | |
| }); | |
| /* Rest Helpers */ | |
| .lines(@lines){ | |
| display: -webkit-box; | |
| -webkit-line-clamp: @lines; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .block(@width, @height){ | |
| width: @width; | |
| height: @height; | |
| } | |
| .anchorColor(@color, @hoverColor: null){ | |
| &, a{ | |
| color: @color; | |
| &:hover when (iscolor(@hoverColor)){ | |
| color: @hoverColor; | |
| } | |
| } | |
| } | |
| /* Lazy Classes */ | |
| .reset{ | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| list-style: none; | |
| } | |
| .clearfix(){ | |
| &:after{ | |
| content: " "; | |
| display: block; | |
| clear: both; | |
| } | |
| } | |
| .translateMiddle{ | |
| position: relative; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| /* Sprite Unities */ | |
| .hideText:extend(.noselect){ | |
| color: transparent; | |
| line-height: 0; | |
| font-size: 0; | |
| text-indent: -999%; | |
| vertical-align: bottom; | |
| } | |
| .imageButton:extend(.hideText){ | |
| border: none; | |
| cursor: pointer; | |
| } |
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
| /* Responsive Unities SCSS Version */ | |
| @mixin small-than($breakPoint){ | |
| @media only screen and (max-width: ($breakMoible - 1px)) { @content; } | |
| } | |
| @mixin wider-than($breakPoint){ | |
| @media only screen and (min-width: ($breakMoible)) { @content; } | |
| } | |
| @mixin mobile-only{ | |
| @include small-than($breakMoible){ @content; } | |
| } | |
| @mixin desktop-only{ | |
| @include wider-than($breakMoible){ @content; } | |
| } | |
| @include desktop-only{ | |
| .mobile-only { | |
| display: none; | |
| } | |
| .desktop-visible-block{ | |
| display: block !important; | |
| } | |
| } | |
| @include mobile-only{ | |
| .desktop-only { | |
| display: none; | |
| } | |
| .mobile-visible-block{ | |
| display: block !important; | |
| } | |
| } |
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> | |
| <!--[if IE 11]><html class="ie11"><![endif]--> | |
| <!--[if IE 10]><html class="ie10"><![endif]--> | |
| <!--[if IE 9]><html class="ie9"><![endif]--> | |
| <!--[if lte IE 8]><html class="ie8"><![endif]--> | |
| <!--[if !IE]>--><html><!--<![endif]--> | |
| <head> | |
| <title>HTML5</title> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> | |
| <meta name="og:title" content=""> | |
| <meta name="og:image" content=""> | |
| <!-- Stylesheets here --> | |
| <!--[if lt IE 9]> | |
| <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| <!--[if !IE]><!--> | |
| <!-- Place livereload script here if need --> | |
| <!--<![endif]--> | |
| <!-- Javascripts here --> | |
| </head> | |
| <body> | |
| <div class="loading-mask"> | |
| <!-- Place spinkit here http://tobiasahlin.com/spinkit/ --> | |
| </div> | |
| <nav> | |
| <!-- topbar, sidemenu --> | |
| </nav> | |
| <div class="main-header"> | |
| <!-- Hero Header, height: 100vh is great --> | |
| </div> | |
| <div class="main-container"> | |
| </div> | |
| <footer></footer> | |
| </body> | |
| </html> |
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
| body, html{ | |
| padding: 0; margin: 0; | |
| } | |
| .noselect { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| pointer-events: none; | |
| } | |
| @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 450px) { | |
| /* is mobile phone */ | |
| } | |
| /* Show nothing on IE8 or older */ | |
| html.ie8{ | |
| body * { display: none !important } | |
| body:before{ | |
| content: "OOPS!!"; | |
| font-size: 80px; | |
| line-height: 120px; | |
| display: block; | |
| padding: 10px 20px; | |
| } | |
| body:after{ | |
| content: "Update your browser!"; | |
| font-size: 60px; | |
| line-height: 120px; | |
| padding: 10px 20px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment