Introducing
The Slant team built an AI & it’s awesome
Find the best product instantly
Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to Safari
Try it now
4.7 star rating
0
Development
Frontend Development
What are the best SASS frameworks?
6
Options
Considered
97
User
Recs.
Jul 8, 2023
Last
Updated
Related Questions
Activity
Have feedback or ideas?
Join our community
on Discord
Ad
6
Options
Considered
Best SASS frameworks
Price
Last Updated
60
Bourbon
-
Jul 8, 2023
--
Bootstrap
-
Jun 1, 2023
--
Foundation
-
Aug 7, 2020
--
Compass
-
Oct 17, 2022
--
UiKit
-
Sep 6, 2021
See Full List
60
Bourbon
My Rec
ommendation
for
Bourbon
My Recommendation for
Bourbon
Hide
Get it
here
Recommend
51
1
--
Bootstrap
My Rec
ommendation
for
Bootstrap
My Recommendation for
Bootstrap
All
16
Pros
12
Cons
4
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
•••
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
•••
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 dead
It's difficult to create your own styles.
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
•••
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
•••
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
•••
Great documentation
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
•••
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
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
Hide
See All
Get it
here
Recommend
18
6
--
Foundation
My Rec
ommendation
for
Foundation
My Recommendation for
Foundation
All
15
Pros
12
Cons
3
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
See More
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 More
Hide
See All
Get it
here
Recommend
6
--
Compass
My Rec
ommendation
for
Compass
My Recommendation for
Compass
All
5
Experiences
1
Pros
2
Cons
2
Top
Con
•••
Unmaintained
See More
Top
Pro
•••
Large collection of very useful mixins
See More
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 More
Hide
See All
Get it
here
Recommend
7
--
UiKit
My Rec
ommendation
for
UiKit
My Recommendation for
UiKit
All
4
Experiences
1
Pros
3
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
Hide
See All
Get it
here
Recommend
4
--
Cirrus
My Rec
ommendation
for
Cirrus
My Recommendation for
Cirrus
All
5
Pros
5
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
Hide
See All
Free
Recommend
4
Don't see your favorite option? Add it.
Built By the Slant team
Find the best product instantly.
4.7 star rating
Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to Safari
Try it now - it's free
One sec!
Are you sure that you want to abandon your hard work?
Delete Work
Continue working
{}
undefined
url next
price drop