forked from jerriclynsjohn/k-mug.github.io
- Notifications
You must be signed in to change notification settings - Fork 0
Sass development
Jerric Lyns John edited this page Sep 17, 2016 · 1 revision
Check if you have all requirements for local environment. To install all development dependencies install Bundler.
gem install bundlerand run next command from root folder:
bundle installNote: Also you need to install Node.js
To watch changes of .sass files and compile it to the .css on a fly change property safe: true to safe: false in _config.yml. Note: It works only on local machine, because GitHub runs Jekyll in --savemode
To watch changes in .scss files and compile it to the .css on a fly, run this command from _sass\ folder
compass watch You can find config.rb in \_sass\ folder.
// Plugin for combining media queries require 'sass-media_query_combiner' // Plugin for prefixing css3 properties require 'autoprefixer-rails' // Removes all comments completely require "./remove-all-comments-monkey-patch" // Autoprefixer options on_stylesheet_saved do |file| css = File.read(file) File.open(file, 'w') do |io| io << AutoprefixerRails.process(css, browsers: ["last 2 version", "> 1%"]) end end http_path = "/" sass_dir = "./" css_dir = "../css" images_dir = "../img" javascripts_dir = "../js" line_comments = false relative_assets = true output_style = :compressed # Remove multiline comments - monkey patch class Sass::Tree::Visitors::Perform < Sass::Tree::Visitors::Base # # Removes all comments completely def visit_comment(node) return [] end end All available configurations described in official documentation
All parts that will be compiled into .css file described in \_sass\main.scss file.
// Modules and Variables @import "partials/base"; // Third-party @import "vendor/bootstrap-custom"; @import "vendor/animate"; @import "vendor/waves"; // Partials @import "partials/global"; @import "partials/buttons"; @import "partials/helper"; @import "partials/sprites"; @import "partials/navigation"; // Sections @import "partials/hero"; @import "partials/top-section"; @import "partials/about"; @import "partials/statistic"; @import "partials/latest-news"; @import "partials/rockstar-speakers"; @import "partials/buy-tickets"; @import "partials/location-map"; @import "partials/venue"; @import "partials/twitter-feed"; @import "partials/partners"; @import "partials/subscribe"; @import "partials/footer"; @import "partials/blog"; @import "partials/find-way"; @import "partials/direction-details"; @import "partials/team"; @import "partials/zoe-effect"; @import "partials/lily-effect"; @import "partials/ribbon"; @import "partials/modal"; @import "partials/schedule"; Note: You can safely exclude some parts under // Sections if you don't need them. Basically their names correspond to the names of _includes files.
Zeppelin uses only part of bootstrap library. To include another modules edit \_sass\vendor\_bootstrap-custom.scss.
// Core variables and mixins @import "bootstrap/variables"; @import "bootstrap/mixins"; // Reset and dependencies @import "bootstrap/normalize"; @import "bootstrap/print"; // Core CSS @import "bootstrap/scaffolding"; @import "bootstrap/type"; @import "bootstrap/code"; @import "bootstrap/grid"; @import "bootstrap/forms"; @import "bootstrap/buttons"; // Components @import "bootstrap/component-animations"; @import "bootstrap/jumbotron"; @import "bootstrap/thumbnails"; @import "bootstrap/media"; @import "bootstrap/responsive-embed"; @import "bootstrap/close"; // Components w/ JavaScript @import "bootstrap/modals"; // Utility classes @import "bootstrap/utilities"; @import "bootstrap/responsive-utilities"; All available modules you can find in _bootstrap.scss or bootstrap-sass documentation
To change included animations and another properties for Animate.css edit \_sass\vendor\helpers\_settings.scss file.
///////////////////////////////////////////////////////// // Animation Default Settings // ///////////////////////////////////////////////////////// // Base module settings $base-duration : 1s !default; // used in 1-base module $base-origin : top center !default; $base-degrees : 30deg !default; // used in lightspeed & special modules $base-timing-function-in : ease-in !default; $base-timing-function-out : ease-out !default; $base-timing-function-in-out : ease-in-out !default; $base-distance : 10px !default; // used in fade, shake and bounce modules $base-distance-big : 1000px !default; // used in fadeBig and bounce modules // Rotate module settings $rotate-degrees : 90deg !default; $rotate-degrees-max : 200deg !default; $rotate-origin : center center !default; // Flipper module settings $flipper-perspective : 400px !default; $flipper-translate : 150px !default; $flipper-degrees : 10deg !default; $flipper-degrees-max : 90deg !default; // Hinge module settings $hinge-origin : top left !default; $hinge-degrees-max : 80deg !default; $hinge-translate : 700px !default; //==================================================================================================// // Module loading // //==================================================================================================// // To include an animation module in the compiled css file, simply set it's attribute below to true // // (all modules set to false will not be included) // // The idea here is to only load the animations you want to use on a per project basis // // This helps keep the compiled css file at its leanest // //==================================================================================================// // Hugely influenced and inspired by @csswizardry's inuit.css _vars.scss file // //==================================================================================================// // Fade Enter $use-fadeIn : true !default; $use-fadeInUp : true !default; $use-fadeInUpBig : false !default; $use-fadeInDown : true !default; $use-fadeInDownBig : false !default; $use-fadeInLeft : true !default; $use-fadeInLeftBig : false !default; $use-fadeInRight : true !default; $use-fadeInRightBig : false !default; // Fade Exit $use-fadeOut : false !default; $use-fadeOutUp : false !default; $use-fadeOutUpBig : false !default; $use-fadeOutDown : false !default; $use-fadeOutDownBig : false !default; $use-fadeOutLeft : false !default; $use-fadeOutLeftBig : false !default; $use-fadeOutRight : false !default; $use-fadeOutRightBig : false !default; // Bounce Enter $use-bounceIn : false !default; $use-bounceInUp : false !default; $use-bounceInDown : false !default; $use-bounceInLeft : false !default; $use-bounceInRight : false !default; // Bounce Exit $use-bounceOut : false !default; $use-bounceOutUp : false !default; $use-bounceOutDown : false !default; $use-bounceOutLeft : false !default; $use-bounceOutRight : false !default; // Rotate Enter $use-rotateIn : false !default; $use-rotateInUpLeft : false !default; $use-rotateInUpRight : false !default; $use-rotateInDownLeft : false !default; $use-rotateInDownRight : false !default; // Rotate Exit $use-rotateOut : false !default; $use-rotateOutUpLeft : false !default; $use-rotateOutUpRight : false !default; $use-rotateOutDownLeft : false !default; $use-rotateOutDownRight : false !default; // Flippers $use-flip : false !default; $use-flipInX : false !default; $use-flipInY : false !default; $use-flipOutX : false !default; $use-flipOutY : false !default; // Lightspeed $use-lightSpeedIn : false !default; $use-lightSpeedOut : false !default; // Attention Seekers $use-bounce : false !default; $use-flash : false !default; $use-pulse : false !default; $use-wiggle : false !default; $use-swing : false !default; $use-shake : false !default; $use-tada : false !default; $use-wobble : false !default; // Special $use-hinge : false !default; $use-rollIn : false !default; $use-rollOut : false !default; Detailed information you can find in animate-sass documentation