Packages of Sass mixins

About

Glob is designed to be easy to setup with any type of project. It's a collection of modules that give a base set of style to get you up and running incredibly quickly.

Every packages contains a _glob.scss file that mimics a globbing technique, so that every package is as simple as it's installation command. Or, just import the files you want without the pseudo-glob.

Installation

$ bower install aglobof-sass --save

Importation

@import "bower_components/aglobof-sass/glob";

Resets

About

The Glob resets package does exactly what it sounds. It's a very straight-forward collection of reset tools, giving you normalize, a box model reset and some mixins.

The mixins are where it's just a tiny bit trickier, the best way to know what's available is to check the source. There's list clears, clearfixes and some other goods.

Installation

$ bower install aglobof-sass.resets --save

Declaration

@import "bower_components/aglobof-sass.resets/glob";

Usage

// Import the package
@import "/the/path/aglobof-sass.resets/glob";

// Party.
              

Animations

About

Animations are a critical step in the dance these days, the Glob animations packages exposes some super helpful mixins for keyframe animations, transitions and tranformations.

This package is a bit tricky when it comes to implementation, there is a good bit to know about declaring the mixins. Make sure to check out the documentation in this packages repo.

Installation

$ bower install aglobof-sass.animations --save

Importation

@import "bower_components/aglobof-sass.animations/glob";

Usage

// Import
@import "/path/to/aglobof-sass.animations/glob";

// Transition errday
.div {
  @include transition(2s);
}

// Keyframe declaration for animation
@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
};

// Animate errday
.div {
  @include animation(fade-in, 1s, ease-in);
}
            

Utilities

About

Utilities are helper mixins. Different mixins for clearing floats, centering and more. The benefit of using these helpers as mixins is the clarity in your markup. You can import the mixins directly to classes needing them, or import them to clases to use on their own.

Installation

$ bower install aglobof-sass.utilities --save

Importation

@import "bower_components/aglobof-sass.utilities/glob";

Usage

// Import
@import "../aglobof-sass.utilities/glob";

// Clearfix
.div {
  @include clearfix;
}

// List Clear
ul {
  @include list-clear
}
              

Type

About

The type packages helps you organize and set font, sizing and line-height properties. It's easy to run straight out of the box, and doesn't get in your way if you need lots of customizination.

Installation

$ bower install aglobof-sass.type --save

Importation

@import "bower_components/aglobof-sass.type/glob";

Usage

// Import
@import "../aglobof-sass.type/glob"