Skip to content

Instantly share code, notes, and snippets.

@kuzin

kuzin/markup-standards.html

Created July 24, 2012 20:39
Show Gist options
  • Save kuzin/3172517 to your computer and use it in GitHub Desktop.
Save kuzin/3172517 to your computer and use it in GitHub Desktop.
Download ZIP
ShowClix Standards
Raw
markup-standards.html
<!DOCTYPE html>
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<!-- // Content Type - Header Info -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- // SEO Meta -->
<title>
// Title
</title>
<meta name="lang" content="en" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- // Stylesheets -->
<link rel="stylesheet" href="relative/paths.css" type="text/css" media="all" />
<!-- // @media types && device specifics -->
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
</head>
<body>
<!-- Markup should be as clear as a word doc -->
<!-- Think about semantics, everything has a purpose -->
<nav>
<ul>
<li><a href="/" class="active">home</a></li>
<li><a href="#">services</a></li>
</ul>
</nav>
<header>
<h1>Headline</h1>
<h2>Subhead</h2>
</header>
<article>
<section>
<h1>Headline</h1>
<h2>Subhead</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
</article>
<footer></footer>
<!-- // Javascripts ( Load Asynchronously If Possible) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body></html>
Raw
sass-standards.scss
/*
* Description of File
* @important settings
* @from previous files
*
* Author: Kuz;
*
* Documentation @ http://compass-style.org/
*/
// Stylistic Rules
// ----------------------
// Tabs :: 4 Spaces;
// SCSS not Sass (Bracked Format non-Whitespace)
// Order selectors by inherent importance
//// Box Model -> Positioning -> Typography -> Style -> Mixins -> Etc.
// Stay DRY - What @mixins and @extend are for.
// Keep things short, unless there's a reason for it.
//// Eg. Good: background : transparent url('#') top center no-repeat;
//// Eg. Bad: background-position: top left; background-image: url('#'); ...
// Compass Imports
@import 'compass/reset'; // Global style reset
@import 'compass/css3'; // Degradated in Compass 0.2.12
@import 'compass/utilities'; // Adds support for some helper utilities
// Font Declares
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,700,800);
// Mixin Import or Declares
/* Eg. Responsive Mixin */
// $tablet : "only screen and (max-width: 770px)";
// $desktop : "only screen and (max-width: 850px)";
// $phone : "only screen and (max-width: 480px)";
@mixin respond-to($media) {
@if $media == tablet {
@media only screen and (max-width: 770px) { @content }
} @else if $media == desktop {
@media only screen and (max-width: 850px) { @content }
} @else if $media == phone {
@media only screen and (max-width: 480px) { @content }
}
}
// Global Settings & Overrides
// Partial Imports (Allows for Modulability and Keeps things nice and DRY)
@import 'partials/header';
@import 'partials/footer';
// Specific Partner Overrides (& Settings using !default)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment