templates/sass.rb in prologue-0.4.0 vs templates/sass.rb in prologue-0.5.0
- old
+ new
@@ -1,152 +1,301 @@
-run 'mkdir public/stylesheets/sass'
+empty_directory "public/stylesheets/sass"
+empty_directory "public/stylesheets/sass/partials"
create_file 'public/stylesheets/sass/main.scss' do
<<-FILE
-@import "reset";
-@import "common";
-@mixin layout_base {
- @include reset;
- @include container;
- @include user_nav;
- @include main_nav;
- //uncomment for a handy layout guide
- @include layout_guide;
+@import "partials/main_variables";
+@import "partials/fonts";
+@import "partials/defaults";
+@import "partials/media";
+
+@mixin main {
+ @include fonts;
+ @include defaults;
+ @include media;
}
+@include main;
+FILE
+end
-@mixin container($container_size: 950px) {
- #container {
- width: $container_size;
- clear:both;
- padding: 0 20px;
- min-height: 100%;
- height: auto !important;
- height: 100%;
- margin: 0 auto -80px;
+create_file 'public/stylesheets/sass/partials/_main_variables.scss' do
+<<-FILE
+$base-font-family: unquote('sans-serif'); // default font-family
+
+$base-font-size: 13px; // default font-size for YUI fonts
+
+$base-line-height: 1.231; // default line-height for YUI fonts
+
+$font-color: #444;
+
+$link-color: #607890;
+
+$link-hover-color: #036;
+
+$link-active-color: #607890;
+
+$link-visited-color: #607890;
+
+$selected-font-color: #fff; // color for selected text
+
+$selected-background-color: #ff5E99; // bg-color for selected text
+
+$list-left-margin: 1.8em; // left margin for ul an ol
+FILE
+end
+
+create_file 'public/stylesheets/sass/partials/_fonts.scss' do
+<<-FILE
+$base-font-family: unquote("sans-serif") !default;
+$base-font-size: 13px !default;
+$base-line-height: 1.231 !default;
+
+//
+// fonts.css from the YUI Library: developer.yahoo.com/yui/
+//
+// There are three custom edits:
+// * remove arial, helvetica from explicit font stack
+// * we normalize monospace styles ourselves
+// * table font-size is reset in the HTML5 reset above so there is no need to repeat
+//
+// Whatever parts of this port of YUI to Sass that are copyrightable, are Copyright (c) 2008, Christopher Eppstein. All Rights Reserved.
+//
+
+@mixin fonts($family: $base-font-family, $size: $base-font-size, $line-height: $base-line-height) {
+ body {
+ font-size: $size;
+ font-family: $family;
+ line-height: $line-height; // hack retained to preserve specificity
+ *font-size: small;
}
- #main_header {
- width: $container_size;
- height: 60px;
- @include clear_left;
- h1 {
- float: left;
- padding: 20px 0 0 0;
- font-size: 24px;
- font-weight: bold;
- }
+
+ select, input, textarea, button { font: 99% $family; }
+
+ // normalize monospace sizing
+ // meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
+ // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
+ pre, code, kbd, samp { font-family: monospace, sans-serif; }
+}
+
+// maxvoltar.com/archive/-webkit-font-smoothing
+@mixin font-smoothing {
+ -webkit-font-smoothing: antialiased;
+}
+
+// Sets the font size specified in pixels using percents so that the base
+// font size changes and 1em has the correct value. When nesting font size
+// declarations, within the DOM tree, the base_font_size must be the parent's
+// effective font-size in pixels.
+// Usage Examples:
+// .big
+// +font-size(16px)
+// .bigger
+// +font-size(18px)
+// .big .bigger
+// +font-size(18px, 16px)
+//
+// For more information see the table found at http://developer.yahoo.com/yui/3/cssfonts/#fontsize
+@mixin font-size($size, $base-font-size: $base-font-size) {
+ font-size: ceil(percentage($size / $base-font-size));
+}
+FILE
+end
+
+create_file 'public/stylesheets/sass/partials/_media.scss' do
+<<-FILE
+@mixin media {
+ @media print {
+ @include media-print;
}
- #content {
- width: $container_size;
- @include clear_left;
- padding: 10px 0 20px 0;
+
+ @media all and (orientation:portrait) {
+ @include media-orientation-portrait;
}
- #main_footer, #pusher {
- height: 80px;
- clear:both;
+
+ @media all and (orientation:landscape) {
+ @include media-orientation-landscape;
}
-}
-@mixin user_nav {
- #user_nav {
- float: right;
- padding: 20px 0 0 0;
+ @media screen and (max-device-width: 480px) {
+ @include media-mobile;
}
}
-@mixin main_nav {
- #main_nav {
- width: 950px;
- @include clear_left;
- padding: 10px 0;
- ul {
- @include clear_left;
- li {
- float: left;
- padding: 0 15px 0 0;
- }
- }
- }
+//
+// print styles
+// inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
+
+@mixin media-print {
+ * { background: transparent !important; color: black !important; text-shadow: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
+ a, a:visited { color: #444 !important; text-decoration: underline; }
+ a[href]:after { content: " (" attr(href) ")"; }
+ abbr[title]:after { content: " (" attr(title) ")"; }
+ .ir a:after { content: ""; } /* Don't show links for images */
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+ tr, img { page-break-inside: avoid; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
}
-@mixin layout_guide {
- #container { background-color: #e8e6e6; }
- #main_header { background-color: #f7dddd; }
- #main_nav { background-color: #f4ddf7; }
- #content { background-color: #f2f7dd; }
- #main_footer .inner { background-color: #ddf7e7; }
+
+//
+// Media queries for responsive design
+// These follow after primary styles so they will successfully override.
+//
+
+@mixin media-orientation-portrait {
+ // Style adjustments for portrait mode goes here
}
-@include layout_base;
+@mixin media-orientation-landscape {
+ // Style adjustments for landscape mode goes here
+}
+
+// Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)
+// Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
+@mixin media-mobile($optimize: true) {
+ // j.mp/textsizeadjust
+ @if not $optimize {
+ // don't allow iOS and WinMobile to mobile-optimize text
+ html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
+ }
+}
FILE
end
-create_file 'public/stylesheets/sass/reset.scss' do
+create_file 'public/stylesheets/sass/partials/_defaults.scss' do
<<-FILE
-@mixin reset {
- /*
- html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
- v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
- html5doctor.com/html-5-reset-stylesheet/
- */
+$font-color: #444 !default; //looks better than black: twitter.com/H_FJ/statuses/11800719859
+$link-color: #607890 !default;
+$link-hover-color: #036 !default;
+$link-active-color: #607890 !default;
+$link-visited-color: #607890 !default;
+$selected-font-color: #fff !default;
+$selected-background-color: #ff5e99 !default;
+$list-left-margin: 1.8em !default;
+//
+// Based on Paul Irish's boilerplate sass'd up by sporked.
+//
+// Minimal base styles
+//
- html, body, div, span, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- abbr, address, cite, code,
- del, dfn, em, img, ins, kbd, q, samp,
- small, strong, sub, sup, var,
- b, i,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section, summary,
- time, mark, audio, video {
- margin:0;
- padding:0;
- border:0;
- outline:0;
- font-size:100%;
- vertical-align:baseline;
- background:transparent;
- }
+@mixin defaults {
+ body, select, input, textarea { color: $font-color; }
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display:block;
- }
+ html { @include force-scrollbar; }
- nav ul { list-style:none; }
+ a, a:active, a:visited { color: $link-color; }
+ a:hover { color: $link-hover-color; }
- blockquote, q { quotes:none; }
+ ul, ol { margin-left: $list-left-margin; }
+ ol { list-style-type: decimal; }
- blockquote:before, blockquote:after,
- q:before, q:after { content:''; content:none; }
+ td, td img { vertical-align: top; }
- a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
+ sub { @include sub; }
- ins { background-color:#ff9; color:#000; text-decoration:none; }
+ sup { @include sup; }
- mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
+ textarea { overflow: auto; } // thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
- del { text-decoration: line-through; }
+ @include accessible-focus;
- abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
+ @include quoted-pre;
- /* tables still need cellspacing="0" in the markup */
- table { border-collapse:collapse; border-spacing:0; }
+ @include align-input-labels;
- hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+ @include hand-cursor-inputs;
- input, select { vertical-align:middle; }
+ @include webkit-reset-form-elements;
+
+ @include selected-text;
+
+ @include webkit-tap-highlight;
+
+ @include ie-hacks;
+
+ @include no-nav-margins;
}
-FILE
-end
-create_file 'public/stylesheets/sass/common.scss' do
-<<-FILE
-@mixin clear_left {
- float: left; clear: both;
+@mixin sub{
+ vertical-align: sub; font-size: smaller;
}
+
+@mixin sup{
+ vertical-align: super; font-size: smaller;
+}
+
+// Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test
+@mixin accessible-focus {
+ a:hover, a:active { outline: none; }
+}
+
+// www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/
+@mixin quoted-pre {
+ pre {
+ padding: 15px;
+ white-space: pre; // CSS2
+ white-space: pre-wrap; // CSS 2.1
+ white-space: pre-line; // CSS 3 (and 2.1 as well, actually)
+ word-wrap: break-word; // IE
+ }
+}
+
+// align checkboxes, radios, text inputs with their label
+// by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css
+@mixin align-input-labels {
+ input[type="radio"] { vertical-align: text-bottom; }
+ input[type="checkbox"] { vertical-align: bottom; }
+ .ie7 input[type="checkbox"] { vertical-align: baseline; }
+ .ie6 input { vertical-align: text-bottom; }
+}
+
+// hand cursor on clickable input elements
+@mixin hand-cursor-inputs {
+ label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+}
+
+// webkit browsers add a 2px margin outside the chrome of form elements
+@mixin webkit-reset-form-elements {
+ button, input, select, textarea { margin: 0; }
+}
+
+// These selection declarations have to be separate.
+// No text-shadow: twitter.com/miketaylr/status/12228805301
+// Also: hot pink.
+@mixin selected-text {
+ ::-moz-selection{ background:$selected-background-color; color: $selected-font-color; text-shadow: none; }
+ ::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
+}
+
+// j.mp/webkit-tap-highlight-color
+@mixin webkit-tap-highlight {
+ a:link { -webkit-tap-highlight-color: $selected-background-color; }
+}
+
+// always force a scrollbar in non-IE
+@mixin force-scrollbar {
+ overflow-y: scroll;
+}
+
+@mixin ie-hacks {
+ // make buttons play nice in IE:
+ // www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
+ button { width: auto; overflow: visible; }
+
+ // bicubic resizing for non-native sized IMG:
+ // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ .ie7 img { -ms-interpolation-mode: bicubic; }
+
+ .ie6 legend, .ie7 legend { margin-left: -7px; } // thnx ivannikolic!
+}
+
+@mixin no-nav-margins {
+ // Remove margins for navigation lists
+ nav ul, nav li { margin: 0; }
+}
FILE
end
-run 'sass public/stylesheets/sass/main.scss public/stylesheets/main.css'
\ No newline at end of file
+run 'sass public/stylesheets/sass/main.scss public/stylesheets/main.css'