Normalize.css
Due to the inherent variation in User Style Sheets, it is important to reset the browser display to ensure you are working with the same layout for all browsers. Normalize.css is the best for this.
Animate.css
Cross-browser animations. Mark the items for animation with “animated” class, then apply the class name of the type of animation.
Works with jQuery to make classes that can then be animated.
You also have the ability to edit the animation by changing the CSS parameters for the style. For example, change #hideMe {animation:delay:500ms;} to change the animation delay for the hideMe id.
Hover.css
Library with tons of hover effects for all elements that support hover effects, images, buttons, etc.
To use the hover effects, choose whichever element you want to style and add the class “hvr-” and then the name of the animation or effect. For example, class=”hvr-sweep-tp-left” for a nice little animation.
Regardless of how the element is originally styled, the hover animation will work and look great. Hover also works with icons, especially the ones from font-awesome.
It’s already set up with special classes that utilize the fontAwesome icons, all we have to is add the classes to our elements. If we want to change the icons used by the hover.css classes, we can simply overwrite the :before psuedo-element with the unicode identifier of the new icon. For example, if we want to use an envelope for the class with a right-pointing arrow, we use .hvr-icon-right-point-arrow:before {content:”\f010;”}
It can also be used to style other elements, like div or p. Simple add a class of “hvr-float-shadow” to the div, then add child elements like images and content. Then, when you hover over that element, you are shown the hover effect.
Typographic
CSS library for responsive typography. Download the package, which is SCSS (so you’ll need SASS). Create a master.scss, import typographic into the scss file, then create a HTML file with some content. On this file, link in the master.css, which is blank. Now we want to fire the mixin to get the whole thing going. To the master.scss file, add @include typographic; and then compile.
You are free to override CSS settings. Check out typographic.scss to see the font stacks. Copy the settings in this file and paste them into master.scss, giving you the option to edit them and recompile, thus resetting the styles to your preference.
Grid Overlay
Typographic comes with a grid overaly. @include grid-overlay(blue, 10) where blue is desired color and 10 is the offset. The offset is used to place the text on the baseline.
Compass
Compass is an open-source framework to help you write your CSS faster. On a Rube enabled system, open your terminal and enter $ gem install compass to install compass on your system. Next, create a new project with compass create {project name}. Open the config and make sure everything looks right.
Create an index.html in the root folder. You will need to @import any css styling you with to use (animations, css3 techniques, etc.) by calling it into the screen.scss file. For example, if you want ed to use the CSS3 animation library, @import “compass/css3/animation”; will give you easy access to tall the animation styles. Then, if you only wanted a certain animation, you can instead use @import “compass/css3/animation/animation-delay”; to only call certain portions of CSS onto your stylesheet, keeping it smaller and neater.
To use Compass for styling, in the screen.scss, choose the element you want to style, then inside the curlies @include [property-name](value) to use the styling mixin. For example, pre {@include border-radius(5px)} would call in the border-radius maxin and create styling for the pre element. Then return to your command line and enter compass watch to compile the css into your stylesheet and watch the magic happen.
There are a bunch of different items Compass gives you access to, check out the reference online to see what you can do!
Bourbon
Similar to Compass but more light-weight. It is a mixin library that can be installed from the command line with Ruby. I recommend using Compass instead as it makes more sense to me.
Susy
A Compass plugin that can be used to make responsive layouts (think Bootstrap). Can be installed by Compass or Bower. @import Susy into your master.scss file to get started with Susy.
Be sure to have master.css added to your html page
Target mixins with @include to create elements, .grid {@include container(90%)} creates container elements within the .grid element.
In order to use the columns for the grid, you must first import the global Susy object $susy: (columns: number of columns, gutter-position: split;). You will then give your elements a column value, so .content{{@include span(4 of 12)} gives the content 4 grid elements out of the 12 available.
Inside the style, can @media (max-width: 768px) {@include span(10 of 12)}) to add responsiveness to your grid.
Easier still, use @include layout with (column number, gutter width, split, debug show or no) so @include layout(12, .25, split, show); is a 12 column grid system with .25px gutter splits and a show for debug.
Sassline
Css library to strap text to baseline grid. Install in our normal ways. CSS files are in assets folder /css . Add the class=”typeset” to set the text to the baseline grid. There are a bunch of options in the assets folder.
Hamburgers
The popular hamburger menu icons are on the verge of becoming ubiquitous. Make yours with a bit of flair using the Hamburgers library. Using bower, issue the command: bower install css-hamburgers. This creates a bower-components folder holding the hamburgers CSS. Then, in your SCSS, @import “bower_components/{path to hamburgers}/humburgers”. This will add hamburger CSS to your CSS file.
To use it, add a button above a menu item and give the button an id=”menu-button”. Inside, you need a span with a class=”hambuger-box” and another span inside it with a class=”hamburger-inner”. That’s all the HTML you need for a hamburger icon, but it needs an isActive class toggle.
Its probably best to use Jquery for this. You’ll want to create a function to toggle the is-active class whenever the button (also with it’s own ID) is clicked.
SpinKit
Library for CSS only loaders. It features 11 different options which can be previewed on their website. You can then get the HTML and CSS from the same website.
Alternatively, bower install SpinKit. This gives you the package, which you want to import in the scss file. You can also only import the certain spinner that you want to use, thus reducing the size of your css.
To use, create a div with a class of page-loader and inside, place the markup for the particular spinner you wish to use. The markup is found online and in the bower-components/examples folder. Just copy and paste, then add your own styles, like positioning or transform:translate(50%, -50%); which is the trick for positioning something in the middle of the page.
You can override the settings by copying the contents of the variables file into your .scss and editing the values.
Buttons
CSS-only Button library built with Compass. With Compass installed, head to unicorn-ui.com/buttons to download the Buttons package. The config.rb is used to fine-tune project settings.
CSS tags can be used with with either an anchor tag or button tag. If working with a href, then give the link a class=”button” and then the style of button you want, like button-pill or button-action.