├── js ├── common.js ├── html5shiv.js ├── jquery.scrollTo.js └── cycle.js ├── img ├── bg.jpg ├── bg1.png ├── map.jpg ├── facebook.jpg ├── icons │ ├── in.png │ ├── bullet.png │ ├── date.png │ ├── logo.png │ ├── phone.png │ ├── vote.png │ ├── addpost.png │ ├── codedby.png │ ├── comments.png │ ├── location.png │ ├── coderiver.png │ ├── social__fb.png │ ├── social__in.png │ ├── social__ok.png │ ├── social__vk.png │ ├── location_blue.png │ ├── location_red.png │ ├── location_green.png │ ├── vote__comments.png │ └── topline__location.png └── icons-s8c356d3a85.png ├── sass ├── screen.sass ├── _layouts.sass ├── lib │ ├── _base.scss │ ├── ceaser-easing │ │ ├── _ceaser.sass │ │ ├── _easing-vars.sass │ │ ├── _ease-types.sass │ │ └── _easing-functions.sass │ ├── _sprites.scss │ ├── _demo.scss │ ├── _keyframes.sass │ ├── _animations.scss │ ├── _mixins.sass │ └── _media.scss ├── _styledocco.sass ├── _reset.sass ├── _common.sass ├── _main.sass └── _content.sass ├── README.md ├── config.rb ├── css └── screen.css └── index.html /js/common.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | }); -------------------------------------------------------------------------------- /img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/bg.jpg -------------------------------------------------------------------------------- /img/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/bg1.png -------------------------------------------------------------------------------- /img/map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/map.jpg -------------------------------------------------------------------------------- /img/facebook.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/facebook.jpg -------------------------------------------------------------------------------- /img/icons/in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/in.png -------------------------------------------------------------------------------- /img/icons/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/bullet.png -------------------------------------------------------------------------------- /img/icons/date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/date.png -------------------------------------------------------------------------------- /img/icons/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/logo.png -------------------------------------------------------------------------------- /img/icons/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/phone.png -------------------------------------------------------------------------------- /img/icons/vote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/vote.png -------------------------------------------------------------------------------- /img/icons/addpost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/addpost.png -------------------------------------------------------------------------------- /img/icons/codedby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/codedby.png -------------------------------------------------------------------------------- /img/icons/comments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/comments.png -------------------------------------------------------------------------------- /img/icons/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location.png -------------------------------------------------------------------------------- /img/icons-s8c356d3a85.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons-s8c356d3a85.png -------------------------------------------------------------------------------- /img/icons/coderiver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/coderiver.png -------------------------------------------------------------------------------- /img/icons/social__fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__fb.png -------------------------------------------------------------------------------- /img/icons/social__in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__in.png -------------------------------------------------------------------------------- /img/icons/social__ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__ok.png -------------------------------------------------------------------------------- /img/icons/social__vk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__vk.png -------------------------------------------------------------------------------- /img/icons/location_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location_blue.png -------------------------------------------------------------------------------- /img/icons/location_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location_red.png -------------------------------------------------------------------------------- /img/icons/location_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location_green.png -------------------------------------------------------------------------------- /img/icons/vote__comments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/vote__comments.png -------------------------------------------------------------------------------- /img/icons/topline__location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/topline__location.png -------------------------------------------------------------------------------- /sass/screen.sass: -------------------------------------------------------------------------------- 1 | @import lib/base 2 | @import reset 3 | @import common 4 | 5 | @import layouts 6 | @import main 7 | @import content 8 | -------------------------------------------------------------------------------- /sass/_layouts.sass: -------------------------------------------------------------------------------- 1 | // default layout 2 | .l 3 | +clr 4 | @extend %in 5 | .l-col1 6 | float: left 7 | width: 620px 8 | .l-col11 9 | float: left 10 | width: 300px 11 | .l-col12 12 | float: right 13 | width: 300px 14 | .l-col2 15 | float: right 16 | width: 300px 17 | 18 | -------------------------------------------------------------------------------- /sass/lib/_base.scss: -------------------------------------------------------------------------------- 1 | // this one just agregates all the libs 2 | @import "compass/css3"; 3 | @import "mixins"; 4 | @import "animations"; 5 | @import "keyframes"; 6 | @import "media"; 7 | @import "ceaser-easing/ceaser"; 8 | @import "sprites"; 9 | 10 | // gradients for ie, turn it off to disable svg base64 11 | //$experimental-support-for-svg: true; 12 | -------------------------------------------------------------------------------- /sass/lib/ceaser-easing/_ceaser.sass: -------------------------------------------------------------------------------- 1 | @import "compass/css3/transition" 2 | @import "ease-types" 3 | @import "easing-vars" 4 | 5 | $ceaser-legacy: false !default 6 | 7 | @function ceaser($type: $ease) 8 | @if $ceaser-legacy 9 | $easingValue: returnEaseType($type) 10 | @return cubic-bezier(unquote($easingValue)) 11 | @else 12 | @return cubic-bezier(unquote($type)) 13 | 14 | @mixin ceaser-transition($type: $ease, $properties: all, $duration: 500ms, $delay: 0ms) 15 | @if $ceaser-legacy 16 | $easingValue : returnEaseType($type) 17 | @include transition($properties $duration cubic-bezier(unquote($easingValue)) $delay) 18 | @else 19 | @include transition($properties $duration cubic-bezier(unquote($type)) $delay) 20 | 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Sass Boilerplate for generic CSS/HTML 2 | ============= 3 | Done by akella with kind help of Coderiver guys. 4 | 5 | I'm using this as a starting template for almost any project now. 6 | It includes sprites, assorted mixins (aka code snippets), file structure, jquery+cycle+scrollto (most usable these days). 7 | And, that's it. 8 | 9 | You need to have Compass installed for it to work properly. 10 | 11 | Structure 12 | ============= 13 | `/sass/lib/base` - all the mixins and libs needed for us. 14 | 15 | `/sass/screen.sass` - agregates all .sass files. 16 | 17 | `/sass/main.sass` - styles for the mainpage. 18 | 19 | Naming blocks 20 | ============= 21 | I use BEM naming, meaning `.block` for independent block. `.block__element` for elements inside that block. And `.block_modification` for modification of the block. 22 | 23 | `layouts.sass` consists of all the columns-header-footer stuff, all with `.l-*` prefixes. So you know its layout. 24 | 25 | States of the blocks use prefix `.is-*`. For example `.is-running`, `.is-hidden`, `.is-open`. 26 | 27 | Hooks for js should use prefix `.js-*`. 28 | -------------------------------------------------------------------------------- /sass/lib/_sprites.scss: -------------------------------------------------------------------------------- 1 | // sprites with padding 2 | $icons: sprite-map("icons/*.png", $spacing: 10px); 3 | 4 | // sized sprites 5 | @mixin image-size($path){ 6 | width: image-width($path); 7 | height: image-height($path); 8 | } 9 | @mixin sized-sprite($map, $sprite){ 10 | background: sprite($map, $sprite) no-repeat; 11 | @include image-size(sprite-file($map, $sprite)); 12 | } 13 | //shortcut 14 | @mixin s($sprite, $map: $icons){ 15 | background: sprite($map, $sprite) no-repeat; 16 | //background-image: inline-image('icons/'+$sprite+'.png','image/png'); to switches sprites to base64, elegant 17 | @include image-size(sprite-file($map, $sprite)); 18 | } 19 | //only image, when dimensions are useless 20 | @mixin si($sprite, $map: $icons){ 21 | background: sprite($map, $sprite) no-repeat; 22 | } 23 | // insert svg 24 | @mixin svg($name, $width, $height){ 25 | background: url('../img/svg/#{$name}.svg') no-repeat 0 0; 26 | @include background-size(#{$width}px #{$height}px); 27 | // background-image: inline-image('svg/#{$name}.svg','image/svg'); 28 | width: #{$width}px; 29 | height: #{$height}px; 30 | display: inline-block; 31 | } -------------------------------------------------------------------------------- /sass/_styledocco.sass: -------------------------------------------------------------------------------- 1 | // Styledocco example of commenting blocks, should be removed or renamed 2 | 3 | // Button (documenting example) 4 | // ==== 5 | // small button 6 | 7 | // 8 | .button 9 | padding: 9px 14px 10 | font-size: 12px 11 | line-height: normal 12 | border-radius: 5px 13 | display: inline-block 14 | 15 | // big button example 16 | 17 | // 18 | .button_large 19 | font-size: 30px 20 | 21 | // Green button example 22 | // ==== 23 | //small greenbutton example 24 | 25 | //
button 26 | .greenbutton 27 | padding: 9px 14px 28 | font-size: 12px 29 | line-height: normal 30 | border-radius: 5px 31 | background: green 32 | color: #fff 33 | text-shadow: 0 -1px 0 #000 34 | display: inline-block 35 | i 36 | width: 10px 37 | height: 10px 38 | background: pink 39 | display: inline-block 40 | margin-right: 10px 41 | 42 | // big button example 43 | 44 | // 45 | .greenbutton_large 46 | font-size: 30px 47 | -------------------------------------------------------------------------------- /sass/_reset.sass: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, 2 | h6, p, blockquote, pre,a, abbr, acronym, address, big, 3 | cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, 4 | strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, 5 | dd, ol, ul, li,fieldset, form, label, legend,table, caption, 6 | tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, 7 | embed, figure, figcaption, footer, header, hgroup, menu, nav, 8 | output, ruby, section, summary,time, mark, audio, video 9 | margin: 0 10 | padding: 0 11 | border: 0 12 | vertical-align: baseline 13 | body, html 14 | height: 100% 15 | img,fieldset, a img 16 | border: none 17 | input[type="submit"], 18 | button 19 | cursor: pointer 20 | &::-moz-focus-inner 21 | padding: 0 22 | border: 0 23 | textarea 24 | overflow: auto 25 | input, button 26 | margin: 0 27 | padding: 0 28 | border: 0 29 | input, textarea, select,button, 30 | h1,h2,h3,h4,h5,h6,a,span,a:focus 31 | outline: none 32 | ul,ol 33 | list-style-type: none 34 | +iphone 35 | * 36 | -webkit-text-size-adjust: none 37 | table 38 | border-spacing: 0 39 | border-collapse: collapse 40 | width: 100% 41 | -------------------------------------------------------------------------------- /sass/lib/_demo.scss: -------------------------------------------------------------------------------- 1 | @import "compass/css3", "_animations"; 2 | 3 | $experimental-support-for-khtml: false; 4 | 5 | @include keyframes(anim-1) { 6 | from { 7 | margin-left: 100px; 8 | } 9 | 10 | 50% { 11 | margin-left: 200px; 12 | } 13 | 14 | to { 15 | margin-left: 100px; 16 | } 17 | } 18 | 19 | 20 | @include keyframes(anim-2) { 21 | from { 22 | @include rotateZ(-30deg); 23 | } 24 | 25 | 50% { 26 | @include rotateZ(30deg); 27 | } 28 | 29 | to { 30 | @include rotateZ(-30deg); 31 | } 32 | } 33 | 34 | div { 35 | margin-top: 80px; 36 | margin-left: 150px; 37 | padding: 10px; 38 | width: 200px; 39 | font-size: 24px; 40 | text-align: center; 41 | background: #DDD; 42 | } 43 | 44 | // Single shortcut way 45 | #demo-1 { 46 | @include animation(anim-1 2s linear infinite); 47 | } 48 | 49 | #demo-2 { 50 | @include animation(anim-2 2s linear infinite); 51 | } 52 | 53 | // Multiple shortcut way 54 | #demo-3 { 55 | @include animation(anim-1 1s ease infinite, anim-2 2s linear infinite); 56 | } 57 | 58 | #demo-4 { 59 | @include animation-simple( 60 | $name: anim-2, 61 | $duration: 10s, 62 | $iteration-count: infinite 63 | ); 64 | } 65 | 66 | -------------------------------------------------------------------------------- /sass/_common.sass: -------------------------------------------------------------------------------- 1 | // # SHORT HOWTO 2 | // ## Sprites 3 | // .whatever 4 | // +sized-sprite($icons, coderiver) //or 5 | // +s(codedby) //gets default value for spritemap as $icons 6 | // ### animation example 7 | // +include keyframes(rotate) 8 | // from 9 | // +rotate(0) 10 | // to 11 | // +rotate(360) 12 | // ## animation usage 13 | // body:hover 14 | // +animation(rotate 200s linear infinite) 15 | // ## animations easing, see easings.net for full list and examples, tnx @ai 16 | // transition: all 1.2s ceaser($ease-in) 17 | // ## gradient example 18 | // +background-image(linear-gradient(#232323, #5c5c5c)); 19 | // +g(#232323, #5c5c5c); 20 | // horizontal 21 | // +gh(#232323, #5c5c5c); 22 | // ## making bw-images 23 | // img 24 | // @extend %gray 25 | // ## predefined media-queries: https://github.com/paranoida/sass-mediaqueries 26 | // +min-screen(320) 27 | // display: none 28 | // +max-screen(1000), +iphone5, +iphone4, +ipad-retina, +ipad, +hdpi - also available 29 | // 30 | // ## use cycles 31 | // @for $i from 1 through 3 32 | // .item-#{$i} 33 | // width: 2em * $i; 34 | // @each $s in a,b,c 35 | // #{$s} 36 | // display: none 37 | // ## fonts 38 | // Save fonts to /css/fonts, after that write (eot, woff, ttf): 39 | // +font(book, cytiapro-black-webfont) 40 | // =book 41 | // font-family: "book",arial,sans-serif 42 | 43 | body 44 | font: 45 | family: "Myriad Pro",Arial,sans-serif 46 | weight: normal 47 | size: 12px 48 | line-height: 1.4 49 | background: url(../img/bg.jpg) repeat 50% 0 50 | .out 51 | background: url(../img/bg1.png) no-repeat 50% 0 52 | a 53 | color: #3885AF 54 | // common blocks -------------------------------------------------------------------------------- /sass/lib/ceaser-easing/_easing-vars.sass: -------------------------------------------------------------------------------- 1 | $linear : "0.250, 0.250, 0.750, 0.750" !default 2 | $ease : "0.250, 0.100, 0.250, 1.000" 3 | $ease-in : "0.420, 0.000, 1.000, 1.000" !default 4 | $ease-out : "0.000, 0.000, 0.580, 1.000" !default 5 | $ease-in-out : "0.420, 0.000, 0.580, 1.000" !default 6 | 7 | $easeInQuad : "0.550, 0.085, 0.680, 0.530" !default 8 | $easeInCubic : "0.550, 0.055, 0.675, 0.190" !default 9 | $easeInQuart : "0.895, 0.030, 0.685, 0.220" !default 10 | $easeInQuint : "0.755, 0.050, 0.855, 0.060" !default 11 | $easeInSine : "0.470, 0.000, 0.745, 0.715" !default 12 | $easeInExpo : "0.950, 0.050, 0.795, 0.035" !default 13 | $easeInCirc : "0.600, 0.040, 0.980, 0.335" !default 14 | $easeInBack : "0.600, -0.280, 0.735, 0.045" !default 15 | 16 | $easeOutQuad : "0.250, 0.460, 0.450, 0.940" !default 17 | $easeOutCubic : "0.215, 0.610, 0.355, 1.000" !default 18 | $easeOutQuart : "0.165, 0.840, 0.440, 1.000" !default 19 | $easeOutQuint : "0.230, 1.000, 0.320, 1.000" !default 20 | $easeOutSine : "0.390, 0.575, 0.565, 1.000" !default 21 | $easeOutExpo : "0.190, 1.000, 0.220, 1.000" !default 22 | $easeOutCirc : "0.075, 0.820, 0.165, 1.000" !default 23 | $easeOutBack : "0.175, 0.885, 0.320, 1.275" !default 24 | 25 | $easeInOutQuad : "0.455, 0.030, 0.515, 0.955" !default 26 | $easeInOutCubic : "0.645, 0.045, 0.355, 1.000" !default 27 | $easeInOutQuart : "0.770, 0.000, 0.175, 1.000" !default 28 | $easeInOutQuint : "0.860, 0.000, 0.070, 1.000" !default 29 | $easeInOutSine : "0.445, 0.050, 0.550, 0.950" !default 30 | $easeInOutExpo : "1.000, 0.000, 0.000, 1.000" !default 31 | $easeInOutCirc : "0.785, 0.135, 0.150, 0.860" !default 32 | $easeInOutBack : "0.680, -0.550, 0.265, 1.550" !default -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "css" 6 | sass_dir = "sass" 7 | images_dir = "img" 8 | javascripts_dir = "js" 9 | 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | output_style = :compact 14 | 15 | # To enable relative paths to assets via compass helper functions. Uncomment: 16 | relative_assets = true 17 | 18 | # To disable debugging comments that display the original location of your selectors. Uncomment: 19 | line_comments = false 20 | 21 | preferred_syntax = :sass 22 | 23 | 24 | # =================== 25 | # Uncomment this part to make sprite name static, icons-123asda.png -> icons.png 26 | # useful for diffs in screen.css 27 | # =================== 28 | # # Make a copy of sprites with a name that has no uniqueness of the hash. 29 | # on_sprite_saved do |filename| 30 | # if File.exists?(filename) 31 | # FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png') 32 | # end 33 | # end 34 | # # Replace in stylesheets generated references to sprites 35 | # # by their counterparts without the hash uniqueness. 36 | # on_stylesheet_saved do |filename| 37 | # if File.exists?(filename) 38 | # css = File.read filename 39 | # File.open(filename, 'w+') do |f| 40 | # f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png') 41 | # end 42 | # end 43 | # end 44 | 45 | # # this one for switching between production and dev versions of the website 46 | # module Sass::Script::Functions 47 | # def image_path(string) 48 | # assert_type string, :String 49 | # Sass::Script::String.new("../img/#{string.value}") 50 | # end 51 | # alias_method :"image-path",:image_path 52 | # declare :"image-path", :args => [:string] 53 | # end -------------------------------------------------------------------------------- /js/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d