├── sass ├── _main.sass ├── screen.sass ├── _layouts.sass ├── lib │ ├── _base.scss │ ├── _images.sass │ ├── ceaser-easing │ │ ├── _ceaser.sass │ │ ├── _easing-vars.sass │ │ ├── _ease-types.sass │ │ └── _easing-functions.sass │ ├── _sprites.sass │ ├── _mixins.sass │ └── _media.scss ├── _reset.sass ├── _common.sass └── _slick.sass ├── img └── icons │ ├── codedby.png │ └── coderiver.png ├── js ├── init.js ├── common.js ├── html5shiv.js └── lib │ ├── cycle.carousel.js │ ├── head.js │ ├── cycle.js │ └── slick.min.js ├── .gitignore ├── index.html ├── README.md ├── config.rb ├── css └── screen.css └── prepros.cfg /sass/_main.sass: -------------------------------------------------------------------------------- 1 | // Normally mainpage styles 2 | -------------------------------------------------------------------------------- /img/icons/codedby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderiver/sass/HEAD/img/icons/codedby.png -------------------------------------------------------------------------------- /img/icons/coderiver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderiver/sass/HEAD/img/icons/coderiver.png -------------------------------------------------------------------------------- /js/init.js: -------------------------------------------------------------------------------- 1 | head.load("js/lib/jquery.js", 2 | "js/lib/cycle.js", 3 | "js/common.js"); 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | *.sublime-project 3 | *.sublime-workspace 4 | node_modules 5 | bower_components 6 | -------------------------------------------------------------------------------- /sass/screen.sass: -------------------------------------------------------------------------------- 1 | // done by Coderiver.com.ua 2 | @import lib/base 3 | @import reset 4 | @import common 5 | 6 | @import layouts 7 | @import main 8 | -------------------------------------------------------------------------------- /sass/_layouts.sass: -------------------------------------------------------------------------------- 1 | // default layout 2 | .l 3 | +clr 4 | .l-col1 5 | float: left 6 | width: 20% 7 | .l-col2 8 | float: right 9 | width: 70% 10 | -------------------------------------------------------------------------------- /sass/lib/_base.scss: -------------------------------------------------------------------------------- 1 | // this one just agregates all the libs 2 | @import "compass/css3"; 3 | @import "mixins"; 4 | @import "media"; 5 | @import "ceaser-easing/ceaser"; 6 | @import "sprites"; 7 | @import "images"; 8 | 9 | // gradients for ie, turn it off to disable svg base64 10 | //$experimental-support-for-svg: true; 11 | -------------------------------------------------------------------------------- /js/common.js: -------------------------------------------------------------------------------- 1 | head.ready(function() { 2 | 3 | // $(document).on("click", function(){ 4 | // $(".js-popup").hide(); 5 | // }); 6 | 7 | // function scrollFixedElements() { 8 | // var scroll_left = $(this).scrollLeft(); 9 | // $(".fixed-element").css({ 10 | // left: -scroll_left 11 | // }); 12 | // } 13 | // scrollFixedElements(); 14 | // $(window).scroll(function(){ 15 | // scrollFixedElements() 16 | // }); 17 | 18 | console.log($('body').html()); 19 | }); -------------------------------------------------------------------------------- /sass/lib/_images.sass: -------------------------------------------------------------------------------- 1 | //shortcut 2 | =pic($name) 3 | background: url("../img/#{$name}") no-repeat 0 0 4 | //background-image: inline-image("#{$name}",'image/png') 5 | +image-size("img/#{$name}") 6 | 7 | 8 | =png($name) 9 | background: url("../img/#{$name}.png") no-repeat 0 0 10 | //background-image: inline-image("#{$name}.png",'image/png') 11 | +image-size("img/#{$name}.png") 12 | =jpg($name) 13 | background: url("../img/#{$name}.jpg") no-repeat 0 0 14 | //background-image: inline-image("#{$name}.jpg",'image/jpg') 15 | +image-size("img/#{$name}.jpg") 16 | 17 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Template 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Sass Boilerplate for generic CSS/HTML 2 | ============= 3 | Coderiver.com.ua boilerplate. 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/_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="text"], 18 | input[type="email"], 19 | input[type="tel"], 20 | textarea 21 | -webkit-appearance: none 22 | input[type="submit"], 23 | button 24 | cursor: pointer 25 | &::-moz-focus-inner 26 | padding: 0 27 | border: 0 28 | textarea 29 | overflow: auto 30 | input, button 31 | margin: 0 32 | padding: 0 33 | border: 0 34 | div, input, textarea, select,button, 35 | h1,h2,h3,h4,h5,h6,a,span,a:focus 36 | outline: none 37 | ul,ol 38 | list-style-type: none 39 | +iphone 40 | * 41 | -webkit-text-size-adjust: none 42 | table 43 | border-spacing: 0 44 | border-collapse: collapse 45 | width: 100% 46 | 47 | // box-sizing model reset 48 | 49 | html 50 | +box 51 | * 52 | +box 53 | &:before, 54 | &:after 55 | +box 56 | -------------------------------------------------------------------------------- /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 | // insert pics into css 43 | // div 44 | // +pic("blabla.png") 45 | // span 46 | // +png(blabla) 47 | // p 48 | // +jpg(bla) 49 | 50 | 51 | body 52 | font-family: Arial, sans-serif 53 | font-size: 12px 54 | line-height: 1.4 55 | 56 | 57 | // 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 -------------------------------------------------------------------------------- /css/screen.css: -------------------------------------------------------------------------------- 1 | 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } 2 | 3 | body, html { height: 100%; } 4 | 5 | img, fieldset, a img { border: none; } 6 | 7 | input[type="text"], input[type="email"], input[type="tel"], textarea { -webkit-appearance: none; } 8 | 9 | input[type="submit"], button { cursor: pointer; } 10 | input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border: 0; } 11 | 12 | textarea { overflow: auto; } 13 | 14 | input, button { margin: 0; padding: 0; border: 0; } 15 | 16 | div, input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus { outline: none; } 17 | 18 | ul, ol { list-style-type: none; } 19 | 20 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { * { -webkit-text-size-adjust: none; } } 21 | table { border-spacing: 0; border-collapse: collapse; width: 100%; } 22 | 23 | html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 24 | 25 | * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 26 | *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 27 | 28 | body { font-family: Arial, sans-serif; font-size: 12px; line-height: 1.4; } 29 | 30 | .l { *zoom: 1; } 31 | .l:after { content: " "; display: table; clear: both; } 32 | .l .l-col1 { float: left; width: 20%; } 33 | .l .l-col2 { float: right; width: 70%; } 34 | -------------------------------------------------------------------------------- /sass/lib/_sprites.sass: -------------------------------------------------------------------------------- 1 | // sprites with padding 2 | $icons: sprite-map("icons/*.png", $spacing: 10px) 3 | 4 | // sized sprites 5 | =image-size($path) 6 | width: image-width($path) 7 | height: image-height($path) 8 | 9 | //for retina 10 | =image-sizer($path) 11 | width: image-width($path) / 2 12 | height: image-height($path) / 2 13 | 14 | =sized-sprite($map, $sprite) 15 | background: sprite($map, $sprite) no-repeat 16 | +image-size(sprite-file($map, $sprite)) 17 | 18 | //for retina 19 | =sized-spriter($map, $sprite) 20 | background: sprite($map, $sprite) no-repeat 21 | $ypos: round(nth(sprite-position($map, $sprite), 2) / 2) 22 | background-position: 0 $ypos 23 | +image-sizer(sprite-file($map, $sprite)) 24 | +bg-size(ceil(image-width(sprite-path($map)) / 2), ceil(image-height(sprite-path($map)) / 2)) 25 | 26 | //shortcut 27 | =s($sprite, $map: $icons) 28 | background: sprite($map, $sprite) no-repeat 29 | //background-image: inline-image('icons/'+$sprite+'.png','image/png') 30 | +image-size(sprite-file($map, $sprite)) 31 | 32 | //for retina 33 | =sr($sprite, $map: $icons) 34 | background: sprite($map, $sprite) no-repeat 35 | $ypos: round(nth(sprite-position($map, $sprite), 2) / 2) 36 | background-position: 0 $ypos 37 | +image-sizer(sprite-file($map, $sprite)) 38 | +bg-size(ceil(image-width(sprite-path($map)) / 2), ceil(image-height(sprite-path($map)) / 2)) 39 | 40 | //only image, when dimensions are useless 41 | =si($sprite, $map: $icons) 42 | background: sprite($map, $sprite) no-repeat 43 | 44 | //only position of sprite, to remove flicker effect in chrome 45 | =sp($sprite, $map: $icons) 46 | background-position: sprite-position($map, $sprite) 47 | 48 | =svg($name, $width, $height) 49 | background: url("../img/svg/#{$name}.svg") no-repeat 0 0 50 | //background-image: inline-image('icons/svg/'+$sprite+'.svg','image/svg'); // to switches sprites to base64, elegant 51 | +background-size(#{$width}px #{$height}px) 52 | width: #{$width}px 53 | height: #{$height}px 54 | display: inline-block 55 | 56 | =svgi($name, $width, $height) 57 | background: url("../img/svg/#{$name}.svg") no-repeat 0 0 58 | //background-image: inline-image('icons/svg/'+$sprite+'.svg','image/svg'); // to switches sprites to base64, elegant 59 | +background-size(#{$width}px #{$height}px) 60 | -------------------------------------------------------------------------------- /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