What are the best SASS frameworks?

Question

6

Options
Considered

70

User
Recs.

Jan 4, 2021

Last
Updated

Here’s the Deal

6 Options Considered

Best SASS frameworks	Price	Last Updated
-- Bourbon	-	Oct 30, 2020
-- Bootstrap	-	Apr 19, 2020
-- Foundation	-	Aug 7, 2020
-- UiKit	-	Dec 29, 2020
-- Compass	-	Jan 4, 2021

See Full List

I Recommend...

Built By the Slant team

Find the best product instantly.

Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Try it now - it's free

score 39 · Answer 1

Bourbon

Add Video or Image

Built by Slant

Find the best product
instantly.

Stop wasting time searching endlessly. Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Add to Chrome - It's Free

Add to Edge - It's Free

Add to Firefox - It's Free

Add to Opera - It's Free

Add to Brave - It's Free

Add to Safari - It's Free

Try now - it's free

score 14 · Answer 2

Bootstrap

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

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 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 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 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 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

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

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

Great documentation

Top Pro

One of the most popular ones

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

Top Pro

Supports responsive embeds

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

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

See All

score 6 · Answer 3

Foundation

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

See All

score 3 · Answer 4

UiKit

Top Pro

Well architected

The code is pretty clean and follows well-defined conventions. See More

KnowledgeableAuahituroa's Experience

Actually bootstrap is also very good but in case of some extra dynamic uikit is good See More

Top Pro

Great style even out of the box

UiKit has a pretty good and clean style even out of the box without any customization needed. See More

Top Pro

Ready to use themes available

There are plenty of ready to use themes available from the official website. You can choose the theme that you want to use from the dropdown menu and then download the CSS, LESS or SASS file for that theme to use for the website. See More

See All

score 4 · Answer 5

Compass

Top Con

Unmaintained

Top Pro

Large collection of very useful mixins

StudiousHunHunahpu's Experience

discontinued project See More

Top Con

Not a UI components library

Compass isn't a UI components library like Bootstrap. It doesn't have tabs, tooltips, modals or even badges. You won't see any of these in their demo (there isn't a demo per se). See More

Top Pro

Uses SASS

See All

score 2 · Answer 6

Cirrus

Top Pro

Mobile Responsive

Extremely responsive and supports many smaller screens. See More

Top Pro

CSS Only

No additional JS/jQuery required to use. See More

Top Pro

Open Source

Open source and quite actively maintained on Github. See More

Top Pro

Supports Flexbox and CSS Grid

Supports both Flexbox and CSS grid making it a great modern choice for designing web apps. See More

Top Pro

Lightweight

Much smaller than Bootstrap with just as much flexibility. See More

See All

What are the best SASS frameworks?

6 Options Considered

Bourbon

My Recommendation for Bourbon

My Recommendation for Bourbon

Bootstrap

My Recommendation for Bootstrap

My Recommendation for Bootstrap

A wide variety of themes available

Websites can start to look the same

Well documented

Large file size out of the box

Responsive design philosophy

Too many classes

Designed to get a site running quickly

Consistency across browsers

Customizable

Custom builds

Great community

Great documentation

One of the most popular ones

Supports responsive embeds

Easily make professional looking websites

Foundation

My Recommendation for Foundation

My Recommendation for Foundation

Good mobile support

Not UMD pattern in core

Responsive design philosophy

Can be hard for beginners to grasp

Uses SASS

Depends on jQuery

Uses REMs instead of pixels

Built-in form validation

RTL support

Uses Interchange to load responsive content

Easily extensible with a selection of add-ons

Block grid

Easy customization

No style lock-in

Very popular

UiKit

My Recommendation for UiKit

My Recommendation for UiKit

Well architected

Great style even out of the box

Ready to use themes available

Compass

My Recommendation for Compass

My Recommendation for Compass

Unmaintained

Large collection of very useful mixins

Not a UI components library

Uses SASS

Cirrus

My Recommendation for Cirrus

My Recommendation for Cirrus

Mobile Responsive

CSS Only

Open Source

Supports Flexbox and CSS Grid

Lightweight

Don't see your favorite option? Add it.

One sec!