STYLE SWITCHER

Hi, I am Anish

More about Anish

Name : Anish

Email : anish.alias00@gmail.com

Admin theme color : fresh

Post by Anish

Hugo – The world’s fastest framework for building websites

Hugo – The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugo's Go-based templating provides just the right amount of logic to build anything from the simple to complex. If you prefer Jade/Pug-like syntax, you can also use Amber, Ace, or any combination of the three.

Website
More
Select2 – The jQuery replacement for select boxes

Select2 – The jQuery replacement for select boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
  • In your language
  • Remote data support
  • Theming
  • Fully extensible
  • Dynamic item creation
  • Full browser support

Installation

In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files, also known as a distribution, in your website or application.
Using Select2 from a CDN
A CDN (content delivery network) is the fastest way to get up and running with Select2! Select2 is hosted on both the cdnjs and jsDelivr CDNs. Simply include the following lines of code in the <head> section of your page:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Single select boxes

Select2 was designed to be a replacement for the standard <select> box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.
<select class="js-example-basic-single" name="state"> 
    <option value="AL">Alabama</option> 
    ... 
    <option value="WY">Wyoming</option> 
</select>
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery selector where you would like to initialize Select2.
// In your Javascript (external .js resource or <script> tag) 
$(document).ready(function() { 
    $('.js-example-basic-single').select2(); 
});
Website
More
Cube.js – Open Source Serverless Analytics Framework

Cube.js – Open Source Serverless Analytics Framework

Cube.js is an open source serverless analytics framework that is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application.

A complete open source analytics platform: frontend SDKs and API backed by a fully managed analytics infrastructure.

Website

More
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
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
Muuri

Muuri

For the ultimate in flexible layouts, Niklas Rämö's Muuri is well worth a look. Its layout system enables you to position grid items of assorted sizes within a container in pretty much any way imaginable, and it's responsive, sortable, filterable and draggable. By default it'll arrange everything in a 'fit first' manner, but you can add your own layout algorithm for a different layout style.

FEATURES

  • Customizable layout
  • Drag & drop
  • Extensive API
  • Fast animations
  • Good browser support
  • Fully open source
  Website
More