STYLE SWITCHER

CSS3

Controlling color with Sass color functions

Controlling color with Sass color functions

sass-logo-new
Sass comes with functions that can easily be applied to colors in your CSS properties. These functions, when used correctly, can be incredibly powerful. They take some of the sting out of choosing and manipulating colors. When used with variables, they can speed up development drastically.
creating variable for the color that we’re going to manipulate:
$base-color: #AD141E;

Darken & Lighten

These two adjust the Lightness of the color’s HSL values. Sass will parse our hex color variable to hsl, then make the adjustments. You call them on the color with a percentage value between 0 and 100. I usually stay in the range of 3-20%.
darken( $base-color, 10% )
lighten( $base-color, 10% )

Saturate, & Desaturate

These will will adjust the Saturation of the colors HSL values, much like Darken and Lighten adjusted the Lightness. Again, you need to give a percentage value to saturate and desaturate.
saturate( $base-color, 20% )
desaturate( $base-color, 20% )

Adjust-hue

This adjusts the hue value of HSL the same way all of the others do. Again, it takes a percentage value for the change.
adjust-hue( $base-color, 20% )

Adding Alpha Transparency

Using our hex color we can do a few things to get it to be a little transparent. We can call hsla, rgba, opacify, and transparentize. All of them accomplish the same thing, just in different ways. I stick to rgba as it comes most naturally to me which takes a color and a value from 0 to 1 for the alpha.
rgba( $base-color, .7 )

Tint & Shade

Our very own Phil LaPier has added to those base color functions. Both of these are accessible in Bourbon. They mix your color with a value of white (tint) and black (shade) and are similar to Darken and Lighten. They take the color and a % value for the change.
tint( $base-color, 10% )
shade( $base-color, 10% )
More
Responsive Calendar

Responsive Calendar

responsive-calendar-responsive-calendar-widget-jquery-calendar-w3widgets

Features

  • Fully responsive
  • On the fly events edit
  • Twitter bootstrap integration
  • Animated month change
  • HTML5 and CSS3 supported
  • Under constant development
Website
More
Quill – Powerful Rich Text Editor for Modern Web

Quill – Powerful Rich Text Editor for Modern Web

quill-your-powerful-rich-text-editor
Quill is a modern rich text editor built for compatibility and extensibility. It's a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API you can completely customize it to fulfill your needs.
Website
More
Granim.js – Javascript Library to Create Fluid Gradients Animations

Granim.js – Javascript Library to Create Fluid Gradients Animations

Granim.js
Granim.js is a lightweight javascript library to create fluid and interactive gradients animations.
Website
More
Multi-Layout Slideshow with Anime.js

Multi-Layout Slideshow with Anime.js

Multi Layout Slideshow   Demo 1   Codrops
Multi-Layout Slideshow is a simple decorative slideshow component with individual slide layouts and effects powered by anime.js
Website
More
Lightgallery.js – Full Featured Javascript Lightbox Gallery

Lightgallery.js – Full Featured Javascript Lightbox Gallery

lightgallery.js
Lightgallery.js is a full featured javascript lightbox gallery with no dependencies.

Main features

  • Fully responsive.
  • Modular architecture with built in plugins.
  • Touch support for mobile devices.
  • Mouse drag supports for desktops.
  • Double-click/Double-tap to see actual size of the image.
  • Animated thumbnails.
  • Social media sharing.
  • YouTube, Vimeo, Dailymotion, VK and HTML5 video support.
  • 20+ Hardware-Accelerated CSS3 transitions.
  • Dynamic mode.
  • Full screen support.
  • Supports zoom.
  • Browser history API.
  • Responsive images.
  • HTML iframe support.
  • Multiple instances on one page.
  • Easily customizable via CSS (SCSS) and Settings.
  • Smart image preloading and code optimization.
  • Keyboard Navigation for desktop.
  • Font icon support.
Website
More
Simple Background Parallax Scrolling in JavaScript

Simple Background Parallax Scrolling in JavaScript

jquery3
A tutorial about creating simple background parallax scrolling in JavaScript.

function parallax() {
  window.onscroll = function() {
    var speed = 5.0;
    document.body.style.backgroundPosition = (-window.pageXOffset/speed)+"px "+(-window.pageYOffset/speed)+"px";
  }
}
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400);
body,html{height:100%;}
body {
  font-family: 'Ubuntu Mono', sans-serif;
  height: 200%; 
  width: 200%; 
  background-image:url('http://loremflickr.com/800/600/brazil,rio');
  background-attachment: fixed; 
  background-size: cover;
}
div {
  @square: 200px;
  
  position: absolute;
  top: 40%;
  left: 20%;
  color: white; 
  font-size: 1.2em;
  text-shadow: #000 1px 1px 1px;
  width: @square*5;
  height: @square;
  padding: 20px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 6px;
  
  pre {
    font-size: .7em;
    word-break: break-all;
  }
}
function parallax() {
  window.onscroll = function() {
    var speed = 5.0;
    document.body.style.backgroundPosition = (-window.pageXOffset/speed)+"px "+(-window.pageYOffset/speed)+"px";
  }
}

parallax();
Website
More
Modaal – An Accessible Dialog Window Plugin

Modaal – An Accessible Dialog Window Plugin

modal
Modaal is an accessible dialog window plugin for all humans. This plugin requires jQuery.

Some Features

  • Fully responsive, scaling with browser width.
  • Modal types include inline content, ajax, image and image gallery, iframe, confirmation and Instagram photo.
  • Customisable CSS with SASS options
  • Inline attribute configuration support
  • Full-screen/viewport mode
  • Flexible close options and methods
  • Callback events for before and after open and close
  • Callback events for before and after image change in gallery.
  • More
    Timedropper – jQuery Timepicker Plugin

    Timedropper – jQuery Timepicker Plugin

    timer
    timedropper is a jQuery timepicker plugin. Manage time input fields in a standard form. Focus on the input to open an small interactive timepicker.
    http://felicegattuso.com/projects/timedropper/
    More
    CSS Flexbox Toolbox – Learning Guides, Tools & Frameworks

    CSS Flexbox Toolbox – Learning Guides, Tools & Frameworks

    maxresdefault (1)
    Flexbox is an advanced method of more efficiently using space amongst items of a CSS container. While its theory can seem a bit complicated and difficult to master, thankfully the web is chock-full of great opportunities to learn.
     

    Flexbox Learning Guides

    Flexbox CSS Reference By Sara Soueidan

    Flexbox CSS Reference is a collection of writings that will help you learn the basics. There’s a rundown of all the various Flexbox properties and some excellent interactive demonstrations of their capabilities. Flexbox CSS Reference

    Dive into Flexbox – Design, Tools & Workflow By Greg Smith

    Dive into Flexbox provides some background information on Flexbox including why it holds such promise, a brief history, along with various examples of Flexbox concepts and properties. Dive into Flexbox

    Using CSS Flexible Boxes By MDN

    Straight from the Mozilla Developer Network, Using CSS Flexible Boxes will introduce you to the layout mode and provides a handy browser compatibility chart. Using CSS Flexible Boxes

    A Complete Guide to Flexbox By Chris Coyier

    A Complete Guide to Flexbox is perhaps everything you ever wanted to know about Flexbox, but were afraid to ask. Lots of useful examples here to get you up-to-speed.

    How To Get Started With CSS Flexbox By Paul Underwood

    How To Get Started With CSS Flexbox takes you from the very basics of setting up a simple layout all the way to more complex use cases.

    A Visual Guide to CSS3 Flexbox Properties By Dimitar Stojanov

    Not only will A Visual Guide to CSS3 Flexbox Properties help you with the basic concepts, there’s a fun Flexbox Playground that will show you how various properties will affect your layout. A Visual Guide to CSS3 Flexbox Properties

    What The FlexBox?! By Wes Bos

    What The FlexBox?! uses an in-depth series of 20 free videos to unlock the mysteries of layouts for more visual learners. Sometimes, it’s just nice to have someone show and guide you with what can be a complicated topic.

    flexbox in 5 Minutes (Interactive Tour)

    If you’re sick of having to read long tutorials, flexbox in 5 Minutes might be for you. It’s a simple tour of what Flexbox is and does in just 5 minutes (comprised of 53 slides). flexbox in 5 Minutes Interactive Tour

    Flexbox Examples & Resources

    Flexbox Patterns By CJ Cenizal

    Flexbox Patterns will demonstrate several real-world examples along with the code to get you started. Flexbox Patterns

    Solved by Flexbox By Philip Walton

    Featuring some long-sought-after layout scenarios, Solved by Flexbox will show you techniques behind some of the layouts that can now be easily achieved. Solved by Flexbox

    Flexbox Snippets for Atom

    Flexbox Snippets for Atom makes writing code with the Atom text editor a breeze.

    Flexbox Snippets for Sublime Text

    If you’re using Sublime Text, installing Flexbox Snippets for Sublime Text will help you create layouts more efficiently.

    Web Based Flexbox Tools

    Flexplorer By Bennett Feely

    Flexplorer lets you create complicated layouts using a very simple interface. Flexplorer

    CSS Flexbox Please! By Eiji Kitamura

    CSS Flexbox Please! not only generates layout CSS, it also provides HTML you can use with your project. CSS Flexbox Please

    Test CSS Flexbox Rules Live By Tayler Summs

    Test CSS Flexbox Rules Live will demonstrate the effects that each property can have on a given layout. Test CSS Flexbox Rules Live

    Flexbox Tester By Eiji Kitamura

    Flexbox Tester lets you play with settings for each item in a layout and displays the pixel width of items as you make changes. Flexbox Tester

    Flexibility By 10up

    Use the simple menus in Flexibility to see how various properties can change a Flexbox layout. Flexibility

    Fibonacci Flexbox Page Layout Composer By Max Steenbergen

    Fibonacci Flexbox Page Layout Composer is a tool aimed at non-developers who want to create their own layouts using Flexbox.

    Flexy Boxes By Pete Boere

    Flexy Boxes will help you generate layouts and tweak the properties of both the flex container and items. Flexy Boxes

    Flexbox Playground By Gabi Siquès

    Flexbox Playground is a colorful way to learn about the power of Flexbox layout properties. Flexbox Playground tool web based

    Flexbox Editor By Brian Diehr

    Drag and drop boxes and fiddle with their properties using Flexbox Editor. Flexbox Editor

    Web Frameworks Based on Flexbox

    Flexbox Grid – Grid System Based on flexbox

    Flexbox Grid is an easy-to-use framework with lots of examples for creating various types of layouts. Flexbox Grid Grid System Based on flexbox

    cssPlus – Layout Scaffolding Based on Flexbox

    cssPlus helps you create flexible and responsive layouts all based on Flexbox. cssPlus Layout Scaffolding Based on Flexbox

    STRUCTURE – Declarative Flexbox Based Grid Framework

    STRUCTURE is a declarative framework – meaning it uses non-standard attributes on elements. This can cut down on development time as opposed to adding several CSS classes to each item. STRUCTURE Declarative Flexbox Based Grid Framework

    Juiced – Flexbox CSS Framework

    Juiced took some inspiration from Foundation and Bootstrap but left out the heavy styling and JavaScript.

    …and finally…

    Flexbox Froggy By Thomas Park

    Like to learn by doing and having some fun while you’re at it? Flexbox Froggy is a game that requires you to write Flexbox code! Flexbox Froggy learn game

    Concluding

    When used correctly, Flexbox can make setting up even the most complex layouts a much easier task. Just think about the possibilities of creating layouts that automatically adjust to their content and screen viewports. And it’s all built in to CSS3! Start using these resources today and flex your layout muscles.   http://speckyboy.com/2016/02/10/css-flexbox-toolbox/
    More