Sass development

Environment

Check if you have all requirements for local environment. To install all development dependencies install Bundler.

  	gem install bundler

and run next command from root folder:

	bundle install

Note: 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 --save mode

Running

To watch changes in .scss files and compile it to the .css on a fly, run this command from _sass\ folder

    compass watch

Configuration

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

Parts configuration

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.

Configuration of third-party libraries

Bootstrap

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

Animate.css

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