Frameworks

Bootstrap Sass

Bootstrap Sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.

Skeleton Sass

Skeleton Sass is a Responsive Sass Framework. Skeleton Sass is a highly modularized version of Skeleton CSS [written in Sass].

Penguin

Penguin is a lightweight and extensible front-end framework built with Sass to kickstart any web project.

Flint

Flint is a responsive grid framework written in Sass, created to allow developers to rapidly produce responsive layouts that are built on a sophisticated foundation.

Archetype

Archetype is a Compass/Sass based framework for authoring configurable, composable UI components and patterns.

Maze

Maze is a Responsive Sass Framework. Maze is a responsive grid built using Sass and HTML5, the grid is easily customisable with editable options for grid columns, gutter widths, break points and push values.

Hoisin.Scss

A simple responsive mini framework to kick start your project, written in Sass.

Flexible.Gs

Flexible Grid System is a Responsive CSS Framework (CSS, Sass, Less and Stylus).

Singularity

Singularity is a next generation grid framework built from the ground up to be responsive. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use.

Compass

Compass is an open-source CSS Authoring Framework. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.

Bourbon Neat

Neat is a semantic grid framework built on top of Sass and Bourbon.

Frameless

The spiritual successor to Less Framework.

Foundation

Foundation is a responsive front-end framework made by ZURB. Setting up Foundation 5 Sass is quick and easy!

Compass.App

Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of plain CSS.Compass.app is a menubar only app for Sass and Compass. It helps designers compile stylesheets easily without resorting to command line interface.

Fluid-Email

Mobile-first email framework build with scss.

Refills

Components and patterns built with Bourbon and Neat.

Mice

Mice is semantic front-end framework.

Bitters

Add a dash of pre-defined style to your Bourbon.

ApplePie

ApplePie Toolkit is modular and responsive CSS framework.

GUFF

Guff is a SASS helper framework comprised of all of my favorite features from the top SASS frameworks.

Pure CSS For Sass

Pure CSS framework by Yahoo, converted to Sass and ready to use in Sass powered applications.

SassySkeleton

A boilerplate for better structured styles based on Sass & Compass.

Luigi

Luigi is a Bozboz Sass Framework. Luigi is the Scss library developed by the developers at Bozboz and the rest of the world.

Grids & Layouts

Zen Grids

Zen Grids is a responsive grid system built with Compass and Sass.

Gridset

Gridset is a tool that allows you to create sets of responsive grids for your site. Gridset provides a gridset.scss file complete with Sass mixins and functions derived from your grid set measurements.

MUELLER GRID SYSTEM

MUELLER is a modular grid system for responsive/adaptive and non-responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media-queries.

FGrid

fGrid is a responsive and customisable grid system for Sass styled websites. It’s built to be flexible and small and is suitable for a wide range of projects.

Girder

A simple CSS grid for building and prototyping modern websites. Its flexible, semantic and responsive.

Sassaparilla

Sassaparilla is a fast way to start your responsive web design projects that harnesses the power of Sass and Compass.

Susy

Susy is a responsive layout toolkit for Sass. Susy is an agnostic set of tools for creating powerful, custom layouts. We provide the language, but you provide all the opinions. Use a grid, don’t use a grid, or use a combination of grids — it’s all up to you.

Chewing-Grid.Css

The chewing-grid is the ideal CSS Grid for card listing design.

Herow

Herow, a time-saving Sass grid system.

SASS Grid System

Grid System Bootstrap adequacy of the SASS of an alternative way.

Gridlines

Gridlines is a Sass mixin that generates image-less grid backgrounds with ease. This eliminates having to create and recreate a bitmap image every time you want to experiment with a new set of measurements or viewport dimensions.

Thumper

Thumper is a simple and very light responsive grid system built with speed and simplicity in mind.

Compilers

Prepros

Prepros is a tool to compile LESS, Sass, Compass, Stylus, Jade and much more with automatic CSS prefixing, It comes with built in server for cross browser testing. It runs on Windows, Mac OSX and Linux.

CodeKit

CodeKit compiles Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript, TypeScript, Markdown and Compass files automatically each time you save. Easily set options for each language on a file-by-file basis.

LiveReload

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

LibSass

A C/C++ implementation of a Sass compiler.

Koala

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.

Scout

Scout is a cross-platform app that delivers the power of Sass & Compass into the hands of web designers. Scout helps make your CSS workflow a snap by delivering more control, optimization, and organization.

Playgrounds

CodePen

CodePen is an HTML, CSS, and JavaScript editor in the browser. Sass, LESS, Stylus, PostCSS. Markdown, Haml, Slim, Jade. Just some of the preprocessor syntaxes you can use on CodePen.

Takana

Takana is a Sass/CSS live-editor. It lets you see your SCSS and CSS style changes live, in the browser, as you type them.

Fiddle Salad

SASS and HTML editor with sytax highlighting and code completion. Style changes are updated instantly without reloading the results.

SassMeister

SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.

Testing

Ghostlab

Ghostlab is a Mac based testing tool to ensure your responsive site works well across all devices.

True

Unit Tests for Sass.

Bootcamp

Jasmine-style BDD testing written in Sass for Sass.

Modernizr Mixin

Simple and comprehensive mixin for Modernizr tests in Sass.

SassyTester

SassyTester is a minimalistic function tester in Sass.

Typography

Quotation Marks

An easy to use mixin for localized quotation marks in Sass and Compass.

Typesettings

A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.

Modular Scale

Modular scale calculator built into your Sass.

Sassline

Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.

Typeplate

Typeplate is a typographic starter kit.

Responsive Modular Scale

This is a responsive extension of the Sass team’s modular-scale add-on. A modular typographic scale gives you a set of predefined values to use in your design, based on one or more base sizes and one or more intervals.

Typographic

Typographic is responsive typography made easy. Pick a few font stacks, set a few settings, and you’ve got beautiful responsive typography – it’s that easy.

Type Heading

A responsive typography tool for headings. Type Heading is a lightweight Compass Extension that lets you easily manage responsive typographic sizing.

Sassy Gridlover

Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.

Knife

Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.

Shevy

Vertical rhythm made easy. Typography how you want it, where you want it.

Typey

A complete framework for working with typography on the web.

Harmon

A simple typographic scale written in Sass.

Color

Sass Colour Function Calculator

A tool for calculating the Sass colour function required to get from one colour to another.

SassMe

A nifty tool to visualize SASS Color functions and generate the code for use in your .sass/.scss files.

SassyGradients

A powerful wrapper to handle CSS gradients in Sass.

Sassy-Palette

Color palette agnostic tool for designers and front-end developers. Sassy-palette manages complex color palettes and simplifies design process by giving a nice API for outputting predefined or random colors and their tones.

Chroma

Chroma is a Sass library that manages a project’s color names, color variations, and color schemes.

Color Schemer

Color schemer is a robust color toolset for Sass.

Sass Material Colors

An easy way to use Google’s Material Design colors in your Sass/Scss project.

Sass Hwb

A Sass function for the HWB color model.

Buttons

Sassy Buttons

Super sassy and super easy CSS3 buttons.

CSS3 Buttons

This is a collection of CSS3 buttons that use the simplest possible markup. These buttons are now implemented using Sass, with help from Bourbon.

Buttons 2.0

A CSS button library built using Sass and Compass.

Zocial CSS Social Buttons

Zocial button set with CSS. Entirely vector-based social buttons.

Button-Collection.Scss

A collection of buttons made with SASS.

Icons

Sass Burger

A Sass mixin for creating hamburger icons.

SassyIcons

Flexible system to manipulate icons, SVG, PNG, sprites.

Sass Icon Font Mixins

This is a simple Bower package for creating a custom CSS listing of icon fonts in your project.

Smooth Drop

A simple snippet of CSS for adding smooth “cubic-bezier” animation to Bootstrap dropdown menus.

Responsive SASS Navigtion

A light-weight, easy-to-use, responsive navigation built using SASS. Use SASS variables to easily customize your own menu.

Plugins

Compass Retinator

This Compass extension will allow you to create retina ready sprites from scratch.

Compass Grails Plugin

Compass, SASS and SCSS support for Grails. Automatically compiles .scss/.sass during run-app, and adds other framework functionality.

Coda Sass Plugin

This is a Sass plug-in for Panic’s Coda. This plug-in converts scss files into css files. You can set it up to automatically convert on save. By default you must manually process scss files via the Coda Plug-ins menu.

Gulp Compass Imagehelper

Gulp plugin for polyfilling the compass imagehelper functions in node-sass enviroments.

Easy Sprites V1.0

Spriting plugin for SASS/Compass.

Cleaning

SCSS-Lint

SCSS-Lint is a tool to help keep your SCSS files clean and readable. You can run it manually from the command-line, or integrate it into your SCM hooks.

Resolution

HiDPI

HiDPI is a Sass mixin that seamlessly serves high resolution background images to high density (Retina-like) displays.

Sass Resolution

Sass mixin to target high density screens.

API

SassyJSON

SassyJSON is a Sass-powered API for JSON. It provides you the classic json-encode and json-decode directly from your Sass files.

SassyCast

SassyCast is a simple API for type conversion in Sass.

Converters & Generators

Retina Icon Sprites

Retina Icons Sprite is a Sass Mixins is generator tool for for front-end developers to easily integrate Retina Icons in your website.

SASS Em

Sass function and mixin to convert px in em.

SassyIteratorsGenerators

Iterators and generators implementation in Sass.

Spinners

A Sass mixin to generate pure CSS3 loading indicators. Uses a single rotating element and a partial border. Fully customizable. Works with plain Sass or Compass.

WordPress

Forge

Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript.

Sass Mixins/Functions Library

Bourbon

Bourbon is a lightweight Sass tool set that helps you write more effective stylesheets.

Juice

Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements.

Sass MediaQueries

It’s a collection of useful Media Queries mixins for Sass (including iOS devices, TVs and more). Fully customizable and very easy to use.

Mussarela

An useful and simple set of SASS mixins!

Saffron

Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler. Just include a mixin in your Sass declaration, then set any configuration using variables and mixin parameters.

Sunglass

A mixin and functions library for Sass.

Tipsy.Sass

A Simple Mixin Tooltip CSS Using Sass.

Include-Media

include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

Bemify

Bemify is a set of Sass mixins to help you write well-structured, readable, maintainable, component-based modular SCSS source using a BEM-style syntax.

Breakpoint

Breakpoint makes writing media queries in Sass super simple.

Hammer

Hammer is a web development tool for web designers & developers. Build out static HTML sites & templates quickly and easily. Built-in support for SASS (with Bourbon), CoffeeScript, HAML & Markdown, as well as special Hammer tags.

MVCSS

MVCSS [Modular View CSS] is a Sass-based CSS architecture for creating predictable and maintainable application style.

Sass Doc

A documentation tool for Sass.

Sassy Starter

A starter toolkit based on Scalable and Modular Architecture for CSS SMACSS for Sass (SCSS) projects.

Titon Toolkit

Titon Toolkit is a collection of very powerful user interface components, behaviors, and utility classes for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS, and JavaScript functionality for role specific page elements.

Scut

Sass utilities for the frontend laborer.

SASS Rem

Sass mixin and function to use rem units with pixel fallback.

Sassifaction

A Sass mixin library.

Animate.Sass

Animate.sass is a Sass and Compass CSS animation library for WebKit, Firefox and beyond based on the work being done by Dan Eden in Animate.css.

ZUI

ZUI is a pattern library developed for Zource. This library is a collection of commont user interface elements that are used in advanced web applications. Zource makes use of these elements. It is important to realize that ZUI is not designed for your average daily website. It’s meant to be used in web-applications.

Sassy-Validation

Sass data type validation library.

Sass-Config-Manager

A dot-syntax configuration (Map) library for Sass (mixin / function).

Sassy-Exists

Sassy-exists is Sass micro library for existence checks.

BEM Constructor

BEM Constructor is a Sass library for building immutable and namespaced BEM-style CSS objects.

SASS NAMED COLORS

A Sass micro-library featuring a standardized list of 1,500+ named colors.

SASS FONT STACKER

This Sass micro-library provides a simple way to work with a pre-defined set of presumably web-safe font stacks. Two functions and a single mixin provide a bit of syntactic sugar to make it easier to prepend any of the existing fonts stacks with an arbitrary number of fonts.

Rocket 2.0

Rocket is a powerful SASS library to help web developers handle layout, color and other components.

Sass-Convert

sass-convert is a library that provides binding for Node.js to sass-convert, the converter shipped with Sass. Integrates the converter in a stream pipeline.

SassySort

Several ways to sort values in Sass using popular sorting algorithms.

SassyMatrix

All you ever wanted to deal with matrices in Sass.

SassyBitwise

Bitwise operators in Sass.

SassyLogger

A powerful logger to handle error and warning messages in Sass.

SassyStrings

A collection of Sass functions to manipulate strings.

Flask

This project is a collection of helpful functions and mixins for use in Sass projects using the SCSS syntax.

Sass FPO

Create CSS-Only placeholder images. I’m using the term “FPO” (For Placement Only) because “placeholder” is already a keyword in Sass and things would get confusing fast.

Sassy-Border

Sassy-border is Sass shorthand mixin for border properties.

Quantity Queries Mixins

Simple quantity queries mixins for Sass.

Front-End Toolkit

This project is a collections of resources, best practices and tools for front-end developers. Is made to help unify workflow and standardize the code inside our team.

Sassdash

The Sass implementation of lodash.

SassFunk

A collection of Sass utility functions.

Sass Initials Avatar

Create easy to configure initials avatars like Google Inbox or Apple mail.

Sassy Export

Sassy Export is a lightweight Sass extension that allows you to export an encoded Sass map into an external JSON file. Use it anyway you like.

Blog & Community

The Sass Way

This is the main repository for The Sass Way! Your source for the latest tips, tricks, and news about Sass and Compass.

Sache

Find Sass and Compass Extensions for your next project.

Sass Break

Sass break is a humble new blog for the Sass community.

Sass Guidelines

The Sass Guidelines project has been translated into several languages by generous contributors.

Sass Compatibility

Sass Compatibility is to provide a list of inconsistencies between different Sass engines.

SassyLists

SassyLists is a toolbox providing you all the functions you need to manipulate your Sass lists.

Conferences & Meetups

SassConf

A conference for front-end developers and designers that love Sass and are passionate about building a better, more beautiful web.


TAGS :