DevelopmentFrontend Development

What are the best SASS frameworks?

5

Options
Considered

29

User
Recs.

1 hr

Last
Updated

Here’s the Deal

5 Options Considered

Best SASS frameworks	Price	Last Updated
-- Bootstrap	-	Aug 27, 2018
-- Foundation	-	Sep 24, 2018
-- Bourbon	-	Nov 14, 2018
-- UiKit	-	Aug 16, 2018
-- Compass	-	Mar 27, 2018

Bootstrap

Add Video or Image

Top Pro

A wide variety of themes available

To help you avoid the "Bootstrap look", there are many resources that provide a great selection of themes and templates for Bootstrap. See More

Top Con

Websites can start to look the same

If the initial Bootstrap colors and styles are not changed or edited, different websites start looking the same even if they have nothing to do with each other and they are made by different developers. See More

Top Pro

Consistency across browsers

The grid layout with the predefined CSS elements and JavaScript components make it easier to have consistency across different browser versions and even different devices. See More

Top Con

Too many classes

Bootstrap's over-reliance on HTML classes for styling can get very messy very quickly. There's also an overabundance of DOM elements which have a lot of classes and are more often than not nested inside DOM elements with even more classes. This gets problematic down the line because the maintainability of the project gets harder when the project starts to get large. See More

Top Pro

Designed to get a site running quickly

Bootstrap is designed to get a site up and running quickly. Each of it's components is pre-configured to help with getting a site up and running quickly. See More

Top Con

Large file size out of the box

Bootstrap has an out-of-the box filesize of ~276K, which is pretty large considering it's just CSS. Most of those styles aren't even used in 90% of web pages built with Bootstrap. By only including the required styles it can be trimmed by 70%-75%. See More

Top Pro

Responsive design philosophy

Bootstrap is developed to be instantly compatible with all sizes of screens, so you don't have to worry about which device the user is accessing your site from. Yet if you prefer, you can disable responsiveness of Bootstrap. See More

Top Pro

Well documented

Documentation is thorough, well organized and full of live examples and templates ready for use. Every component and every part of the framework is explained and covered in depth. See More

Top Pro

Great community

Bootstrap is very popular and has a large community. As a result of this it is much easier to find help with anything you might need. This also gives you a treasure trove of prebuilt components to use and add to your site. See More

Top Pro

Custom builds

If you don't want to download the full Bootstrap framework. Custom builds of Bootstrap can be created, including only the desired CSS, CSS components, and JavaScript components. This can be done directly from the Bootstrap website by simply choosing what components to download. See More

Top Pro

Customizable

Bootstrap can be customized in a variety of ways. Either by overriding the default CSS styles with new CSS styles or by editing the .scss Bootstrap files. See More

Top Pro

Great documentation

Top Pro

Easily make professional looking websites

Bootstrap makes it easy to learn how to make professional looking websites. It can even make code junkies semi-enjoy design. See More

Top Pro

Supports responsive embeds

Allows easily adding responsiveness to <iframe>, <embed>, and <object> elements. See More

Top Pro

One of the most popular ones

Ranked on GitHub as the most starred CSS repository. See More

Foundation

Add Video or Image

Top Pro

Good mobile support

Foundation was one of the first frameworks to adopt a mobile-first philosophy. By focusing on mobile design first, Foundation makes designers think on what kind of content is important, relevant and interesting to the users without thinking too much on the space. See More

Top Con

Not UMD pattern in core

This problem will bring attention when used with Angular, React and other JS framework. It is important to know that they create app version of this framework. See More

Top Pro

Responsive design philosophy

Foundation allows designing for multiple screen sizes simultaneously easily, meaning your content will always fit. See More

Top Con

Can be hard for beginners to grasp

Since Foundation is built to be customizable, it's default style may not be very appealing for most. While it's true that most production-ready websites shouldn't be using the default style of a css framework (they would all end up looking the same), this is even more true for Foundation. See More

Top Pro

Uses SASS

Simply import from the source files to include in your build system. See More

Top Con

Depends on jQuery

Top Pro

Uses REMs instead of pixels

Foundation uses REMs instead of pixels, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply put, using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%. This is great for making your site mobile friendly. There is also a Sass function in Zurb that converts pixels to REMs so if you're used to thinking in pixels, you don't have to learn a different system. See More

Top Pro

Built-in form validation

Foundation comes with Abide plugin, an HTML5 form validation library. See More

Top Pro

RTL support

Allows easily changing text direction. <html class="no-js" lang="ar" dir="rtl"> See More

Top Pro

Uses Interchange to load responsive content

Foundation comes with Interchange, it makes use of media queries to load images responsively and create content that's suited to different browsers and devices. See More

Top Pro

Easily extensible with a selection of add-ons

There's a variety of front-end templates, icon fonts, responsive table examples, SVG icons and stencils that help you quick-start or easily improve on your site. See More

Top Pro

Block grid

Foundation has a feature called block grid. Block grid gives designers the power to divide the contents of an unordered list into a grid that is evenly spaced. Furthermore, Foundation also takes care of collapsing columns as well as removing gutters. See More

Top Pro

Easy customization

Just by looking at the name, Foundation merely provides designers with a foundation of sorts on which they can build their design. It can be customized easily through SASS, a powerful CSS pre-processor or by overriding the default CSS styles. See More

Top Pro

No style lock-in

Styles are purposefully undeveloped to encourage differentiation between different sites using Foundation. See More

Top Pro

Very popular

Bourbon

Add Video or Image

Request recommendations from the community

Explore Related Questions

Help millions of people make better decisions.

Each month, over 2.8 million people use Slant to find the best products and share their knowledge. Pick the tags you’re passionate about to get a personalized feed and begin contributing your knowledge.