STYLE SWITCHER

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
Slate – Customizable Framework for Building Rich Text Editors

Slate – Customizable Framework for Building Rich Text Editors

Slate is a customizable framework that lets you build rich, intuitive editors like in Medium, Dropbox Paper or Google Docs.

Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity. It can do this because all of its logic is implemented with a series of plugins, so you aren't ever constrained by what is or isn't in "core". You can think of it like a pluggable implementation of contenteditable built on top of React and Immutable. It was inspired by libraries like Draft.js, Prosemirror and Quill.

Website
More