STYLE SWITCHER

Sass Style Guide

Sass Style Guide

With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I've been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own. If you're looking for more examples, Sass Guidelines is another good place to look.

#Use Your Regular CSS Formatting Rules / Style Guide

This post is about Sass-specific stuff, but as a base to this, you should follow a whatever good CSS formatting guidelines you are already following. If you aren't yet, this roundup of style guides may help you. This includes things like:

  • Be consistant with indentation
  • Be consistant about where spaces before/after colons/braces go
  • One selector per line, One rule per line
  • List related properties together
  • Have a plan for class name naming
  • Don't use ID's #hotdrama
  • etc

#List @extend(s) First

.weather {

    @extend %module; ...

}

Knowing right off the bat that this class inherits another whole set of rules from elsewhere is good. Another benefit is that overriding styles for that inherited set of rules becomes much easier. Knowing when to use @extend versus @include can be a little tricky. Harry does a nice job of differentiating the two plus offers thoughts on how to use them both.

#List @include(s) Next

.weather {
  @extend %module; 
  @include transition(all 0.3s ease-out);
  ...
}

Next up is your @includes for mixins and other functions. Again, this is nice to have near the top for reference, but also allows for overrides. You might also want to make the call on separating user-authored @includes and vendor-provided @includes.

#List "Regular" Styles Next

.weather {

@extend %module;

@include transition(all 0.3s ease-out);

background: LightCyan; ...

}
Website
More
Compile imported regular CSS file in SCSS file to SASS @import rule

Compile imported regular CSS file in SCSS file to SASS @import rule

With SASS and Compass, all the imported SCSS and SASS files can be compressed and merged into a single CSS output file. What about the regular CSS files? According to this documentation all files with .css extension, it will be compiled to a CSS @import rule. For example, if style.scss contains:
@import "../../bower_components/animate.css/animate.css";
... it will be compiled to:
@import url(../../bower_components/animate.css/animate.css);
This is not what we want if we are aiming to utilize the minify and merge features of SASS and Compass. Some will rename the .css fileextension to .scss as workaround. But if we are using a package manager like Bower, renaming the file extension is strongly not recommended. This article will show solution to this issue: In your project folder, create mylib.rb file and copy the following codes in this file:
require "sass/importers"
class Sass::Importers::Filesystem
  alias :css_importer :extensions
  def extensions
    css_importer.merge('css' => :scss)
  end
end
Now we can import regular CSS file(s) in our SASS files. Example if we want to import ../../bower_components/animate.css/animate.css we will write it in SASS file without the .css extension:
@import "../../bower_components/animate.css/animate";
To use our custom ruby library with the compass command line, execute:
compass compile assets/sass/style.scss -r ./mylib.rb
If you are using grunt, you can use the following codes as the reference for your gruntfile.js:
odule.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.initConfig({
    compass: {
      prod: {
        options: {
          config: 'config.rb',
          require: './mylib',
          environment: 'production',
          sourcemap: true
        } // options
      }, // prod
      dev: {
        options: {
          config: 'config.rb',
          require: './mylib',
          sourcemap: true
        } // options
      } // dev
    }, // compass
    watch: {
      sass: {
        files: [
          'assets/sass/*.scss'
        ],
        tasks: ['compass:dev']
      } // sass
    } // watch
  }); // initConfig
  grunt.registerTask('default', 'watch');
  grunt.registerTask('prod', ['compass:prod']);
} // exports
More
Rallax.js – Dead-Simple Parallax Scrolling Plugin

Rallax.js – Dead-Simple Parallax Scrolling Plugin

Rallax.js is a Vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.

Explore a variety of options, including:

  • Changing parallax speed
  • Conditionally disabling and enabling the effect
  • Compensating for mobile devices
 // example code for 'dead' block         
const dead = rallax('.dead')
dead.when(
() => window.scrollY > 750,
() => dead.stop()
).when(
() => window.scrollY < 750,
() => dead.start()
Website
More
3D Carousel for Vue.js

3D Carousel for Vue.js

Beautiful, flexible and touch supported 3D Carousel for Vue.js
Beautiful

With CSS transition you will get nice and smooth slide transition in 3D effect

Flexible

Inside slides you can display any html content or some other Vue component

Touch supported

Touch support enabled on mobile devices

website
More
Glider.js (jQuery Slider)

Glider.js (jQuery Slider)

A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling list with paging controls of jQuery slider

What is Glider.js?

Glider.js was born out of a frustration for carousels, especially on mobile devices. Inspired by the well-known Slick.js, Glider.js aims to be a fast, lightweight, responsive, unopinionated, dependency-free carousel alternative. Glider.js is not truly a carousel; it lacks the defining carousel feature, infinite looping. Without support for looping, Glider.js retains the ability to use native scrolling creating a natural feel on any touch enabled devices, while still providing the basic carousel aesthetic and functionality (great for desktop!)

Features

  • Insanely Small (2.1kb gzipped!)
  • Ridiculously Fast (as low as 25ms initilization!)
  • Vanilla JS - No Dependencies (look Mom, no jQuery!)
  • Native Browser Scroll (momentum scrolling!)
  • Fully Responsive (breakpoint based settings)
  • Customizable Arrow and Dot Navigation
  • Supports Mouse Dragging!
  • Flexbox Support (enabled by default)
  • Easily Extendable
  • Custom Events
Website
More