11. September 2016

SASS Bellmaker . a responsive media query package

The Bellmaker is a library of device-agnostic and device-specific media queries that will complement your exisiting CSS.

.bellmaker_container {
    @media #{$da_baseline} {    width: $pw_baseline;}
    @media #{$da_2x_small} {    width: $pw_2x_small;}
    @media #{$da_x_small} {     width: $pw_x_small;}
    @media #{$da_small} {       width: $pw_small;}
    @media #{$da_medium} {      width: $pw_medium;}
    @media #{$da_large} {       width: $pw_large;}
    @media #{$da_x_large} {     width: $pw_x_large;}
}

.bellmaker_container {

@media #{$da_baseline} { width: $pw_baseline;}

@media #{$da_2x_small} { width: $pw_2x_small;}

@media #{$da_x_small} { width: $pw_x_small;}

@media #{$da_small} { width: $pw_small;}

@media #{$da_medium} { width: $pw_medium;}

@media #{$da_large} { width: $pw_large;}

@media #{$da_x_large} { width: $pw_x_large;}

}

Bellmaker

9. September 2016

jQuery Stuck it to them :)

A responsive sticky element plugin, designed to be used with Foundation, Bootstrap or your own css solution.

jQuery Stuck

8. September 2016

Patterns over at Subtle Patterns

SEAMLESS / TILABLE

A seamless background pattern is a repeating graphic that can be used to fill a large area without any visible breaks or seams between the repetitions. This type of pattern is often used in web design, graphic design, and textile design to add visual interest and texture to a surface without overwhelming the other design elements. They can be created using various software and can be in various format such as jpeg, png, svg, gif etc.

WHY A BACKGROUND PATTERN?

Background patterns are used in various design fields as they can serve several purposes. Some of the reasons why they are used include:

Adding visual interest: Background patterns can add texture, depth, and interest to a design, making it more engaging and attractive to viewers.
Creating a sense of movement: Some background patterns are designed to create the illusion of movement, which can be used to draw the viewer’s eye or to convey a particular mood or message.
Concealing imperfections: Background patterns can be used to cover up blemishes or other imperfections on a surface, such as a wall or a piece of fabric.
Establishing a theme or style: Background patterns can be used to establish a particular theme or style, such as a vintage or a modern look.
Enhancing branding: Background patterns can be used to enhance branding by incorporating a company’s colors, logo, or other visual elements into the design.

Overall, background patterns can be used as a design tool to add visual interest, create movement, conceal imperfections, establish a theme, and enhance branding.

HOW TO CREATE SEAMLESS PATTERNS?

There are several ways to create seamless patterns, including the following:

Using a software: There are various software that can be used to create seamless patterns, such as Adobe Illustrator, Photoshop, and Procreate. These software have tools that allow you to easily repeat and align elements to create a seamless pattern.
Using a grid: One way to create a seamless pattern is to start by drawing a grid on a piece of paper or using a digital software, then filling in each square with a different design element. Once the grid is complete, the design can be repeated to create a seamless pattern.
Using a pattern brush: Some software like Illustrator have pattern brushes that can be used to create seamless patterns easily. This is a great method for creating patterns with repeating shapes.
Using a filter: Some software like Photoshop have filter that can be used to create seamless patterns, such as the offset filter. This filter allows you to offset the image and fill in the gaps to create a seamless pattern.
By hand: You can also create seamless patterns by hand, by sketching a pattern, then copying and pasting it to create a seamless pattern.

Each method has its own advantages and disadvantages and it’s best to try each method to find the one that works best for you. Once you have created your seamless pattern, you can save it and use it in various projects.

Looking for a background pattern or want to share a unique pattern of your own?

Look no more, Subtle Patterns is a quality resource for anyone searching for tilable textured patterns.

Subtl Patterns ( provided by Toptal®)

8. September 2016

D3 Calendar Heatmap – Still summer here

A d3.js heatmap representing time series data. Inspired by Github’s contribution chart.

// chart data example
var chartData = [{
  date: valid Javascript date object,
  count: Number
}];
var chart1 = calendarHeatmap()
              .data(chartData)
              .selector('#chart-one')
              .colorRange(['#D8E6E7', '#218380'])
              .tooltipEnabled(true)
              .onClick(function (data) {
                console.log('onClick callback. Data:', data);
              });
chart1();  // render the chart

// chart data example

var chartData = [{

date: valid Javascript date object,

count: Number

}];

var chart1 = calendarHeatmap()

.data(chartData)

.selector('#chart-one')

.colorRange(['#D8E6E7', '#218380'])

.tooltipEnabled(true)

.onClick(function (data) {

console.log('onClick callback. Data:', data);

});

chart1(); // render the chart

GitHub

6. September 2016

List of Data Visualization Tools

Nice list of tools that will make your life easier, creating meaningful and beautiful data visualizations.

Maps
Charts
Data
Anything else :)

datavisualization.ch

4. September 2016

Crazy cool stuff – WebGL globe based on the boardroom scene from Tron: Legacy

The Encom Globe is a WebGL-based clone of the globe from the boardroom scene in Tron: Legacy. Its written using Three.js, with parts implemented in GLSL.

Really amazing!

Encom Globe

4. September 2016

Simple overlay instructions for your apps – Chardin.js

Chardin.js is a jQuery plugin that creates a simple overlay to display instructions for certain elements on a page.

GitHub

4. September 2016

Scripting Vector Graphics with Paper.js

“Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.”

Paper.JS