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
What is the best alternative to HTML5 Boilerplate?
Ad
Ad
Initializr
All
6
Experiences
Pros
4
Cons
2
Top
Pro
Integrates Twitter Bootstrap and HTML5 Boilerplate
Initializr allows you to "fine-tune" your template by allowing you to take the good stuff from both HTML5BP and Twitter Bootstrap and download a mashed up basic template, which you can begin development on.
See More
Top
Con
Is going to be retired at the end of 2017
It's been anounced on their homepage that Initializr will be retired at the end of 2017.
See More
Top
Pro
Well documented
Initializr is very well documented, even though it itself being a pretty easy to understand and use tool. The documentations are available in different languages as well, available via the International Guides section on the website.
See More
Top
Con
No ZURB Foundation support
Some developers much prefer Foundation over Bootstrap due to the flexible grid and large selection of widgets. However, Initializr supports only Bootstrap.
See More
Top
Pro
Speed: Setup time is significantly reduced
With initializr, very little setup is needed. All you need to do to be ready for development is provide your favorite template maker (HTML5BP or Bootstrap).
See More
Top
Pro
HTML5 templates generator
It's not really a template by itself but allows you to create a custom template from known good technologies.
See More
Hide
Get it
here
9
0
Webapp generator
All
6
Experiences
Pros
4
Cons
2
Top
Con
Default support is for libsass
Webapp generator currently has default support for libsass, which falls behind Sass in features (therefor has some incompatibilities with Sass).
See More
Top
Pro
Auto resolve dependencies
Any dependencies in the webapp generated can be automatically resolved, thanks to Web-app-generator's powerful integration with Bower.
See More
Top
Con
Requires Yeoman
See More
Top
Pro
Image optimizations
Automatic automatic image optimization is a pre-built functionality of the web app generator. So that any sites that are made using this tool are perfectly optimized for performance.
See More
Top
Pro
Automatic compilation & linting
As the title suggests, the yeoman watch will auto-compile your JavaScript and Sass scripts for you. Also your code will be run through JsHint (for liniting) to make sure best practices are followed as well.
See More
Top
Pro
Built in preview server & live reload
The yeoman watch will compile your source files for you and refresh your page in the browser, as soon as it detects some changes that you've made.
See More
Hide
Get it
here
7
0
Cirrus
All
5
Experiences
Pros
5
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
CSS Only
No additional JS/jQuery required to use.
See More
Top
Pro
Mobile Responsive
Extremely responsive and supports many smaller screens.
See More
Top
Pro
Open Source
Open source and quite actively maintained on Github.
See More
Top
Pro
Lightweight
Much smaller than Bootstrap with just as much flexibility.
See More
Hide
Free
19
2
Phở Devstack
All
3
Experiences
Pros
1
Cons
2
Top
Con
Uses Bower
Bower is deprecated in most modern stacks for npm.
See More
Top
Pro
Highly configurable
It's easy to turn off any default plugin you don't want to use.
See More
Top
Con
Poor documentation
The documentation is poorly organized and doesn't provide a lot of details on using Phở.
See More
Hide
Get it
here
2
0
Google's Web Starter Kit
All
14
Experiences
Pros
11
Cons
3
Top
Pro
Sass support
Since a lot of web designers these days don't use the plain old CSS, instead they use a CSS pre-processor (like Sass or Less). Thanks to Sass support web designers can easily add GWK to their workflows.
See More
Top
Con
Deprecated
Visitors to the official docs will see a warning: "Warning: Web Starter Kit is no longer supported."
See More
Top
Pro
CSS vendor autoprefixing
Starter Kit includes Autoprefixer that takes care of vendor prefixes.
See More
Top
Con
Can't be used with Less
The framework CSS is built on Sass, which adds dependencies to the build chain. There's no option to use Less.
See More
Top
Pro
High PageSpeed Insights performance score
Since the base skeleton provided by the Web Starter kit is authored by Google itself, it's pretty much understood that the template is optimized to the max, for performance. If you test a site (on Google PageSpeed Insights) built by the GWK you can be sure that it'll always achieve a very high score.
See More
Top
Con
Rather poor documentation
See More
Top
Pro
Responsive
Since most of the websites that are currently being built (or any website that was built after 2012) are responsive, a 'scaffold-ed' website skeleton without any responsiveness would be pretty useless.
See More
Top
Pro
Live browser reloading
Helps to build website faster by refreshing the page automatically as you save the source file changes.
See More
Top
Pro
Performance optimization
Gulp script includes tools for image optimization, JavaScript & CSS minification & optimization and HTML minification.
See More
Top
Pro
Built-in HTTP server
In case you want to try out your shiny new site on your mobile phone or another PC. Just type in the command gulp serve and load up the provided server address from another device to see how your website looks and performs.
See More
Top
Pro
Google-friendly style guide
See More
Top
Pro
Includes a gulp build script
If you use the Gulp build system and are familiar with its environment, you can directly use Web Starter Kit's Gulp build script to build your next GWK based project.
See More
Top
Pro
BrowserSync for synchronized browser testing
BrowserSync offers a browser live-update solution across multiple devices. And it works with basically every desktop and mobile browser. Even IE7.
See More
Top
Pro
Yeoman generator
There's a Yeoman generator for Google's Web Starter Kit available. To install (requires Node, Ruby, Gulp, and Sass): sudo npm install -g yo generator-web-starter-kit cd project-root-directory/ yo web-starter-kit npm install gulp serve
See More
Hide
See All
Experiences
Get it
here
28
5
Element
All
4
Experiences
Pros
3
Cons
1
Top
Pro
Good documentation
The documentation is per version and it has basic examples that are easy to understand.
See More
Top
Con
Needs Vue JS
This can be PRO if you already using Vue for your project.
See More
Top
Pro
JQuery is not required
See More
Top
Pro
It's light but not empty
You can find for example date picker, option box, Sliders, Carousel, and all the basics like grid layout etc.
See More
Hide
FREE
5
1
Semantic UI
All
13
Experiences
Pros
8
Cons
5
Top
Pro
It's semantic
Uses semantic class names for its styling, making it easier to grasp and understand even for beginners looking to jump right in.
See More
Top
Con
Large file size
Packages are much bigger when comparing to Twitter Bootstrap or Zurb Foundation. Semantic UI is really extremely large and it would be better to use specific modules and components, rather than the whole thing.
See More
Top
Pro
Load only the components you need
The whole Semantic-UI package is well organized, with every component neatly set up with it's own stylesheet and JavaScript file. This way you can load only the components you need for each page, minimizing the load time and file size.
See More
Top
Con
Not maintained anymore
Use Fomantic-UI instead.
See More
Top
Pro
The elements offer a huge amount of customization, far beyond a framework like bootstrap
See More
Top
Con
Buggy
Contains a lot of UI inaccuracies, like wrong positioning, cannot mix classes, etc.
See More
Top
Pro
Beautifully designed
Semantic UI has a futuristic and beautiful design. Many will satisfied with the design, especially when Semantic UI is used as a CSS framework.
See More
Top
Con
Not for beginner developer/unfamiliar with Javascript
Many features in Semantic UI uses Javascript customization such as for Modal. This is unlike Bootstrap that can add Modal just with customizing the HTML attributes. Developers who plan to using Semantic UI must be familiar with Javascript or JQuery to get the most out of it.
See More
Top
Pro
It'll have almost any UI component/element you may think of for your project
It includes tons of UI components that you may need for almost any type of project you may work on; And of course, you can always only pick what you need.
See More
Top
Con
Small number of classes
Once you wanna do something that is not mentioned in the doc - prepare to spend an hour, then give up and implement a custom "workaround".
See More
Top
Pro
Well documented
The documentation is easy to use, well written and has lots of examples each with their source codes.
See More
Top
Pro
Official support for third-party applications
There are several official implementations of Semantic UI for many popular libraries, frameworks and CMS. Such as Angular or Wordpress.
See More
Top
Pro
Easy to use
Just start code from the beginning of the journey, from first page of documentation.
See More
Hide
See All
Experiences
Get it
here
257
65
ArtDesignUI
All
13
Experiences
Pros
10
Cons
3
Top
Pro
Support for all major web browsers
This includes IE 7 and its newer versions.
See More
Top
Con
Looks terrible
See More
Top
Pro
Great technical support available
The ArtDesignUI team offers great technical support to users.
See More
Top
Con
Pushes some really awful ideas
Loading splash screens, non-changing URLs because everything's loaded by JS, awful HTML generation from the PHP scripts. It's just a trash fire of bad.
See More
Top
Pro
Fully responsive
See More
Top
Con
Costs €50 - €250
And that's just a year of updates.
See More
Top
Pro
Class prefix to prevent conflict with classes from other CSS files
See More
Top
Pro
Full style control with JS
No need for CSS: width, height, border, icons, colors, etc...
See More
Top
Pro
Variety of transition effects
See More
Top
Pro
Full control of the position of all elements
See More
Top
Pro
Support images with different dimensions
See More
Top
Pro
Keys press listening and mouse wheel listening
See More
Top
Pro
Full navigation control
See More
Hide
See All
Experiences
$50-250
12
5
UiKit
All
12
Experiences
Pros
7
Cons
5
Top
Con
Messy code classes
Nested classes become complicated to read to obtain desired result.
See More
Top
Pro
Well architected
The code is pretty clean and follows well-defined conventions.
See More
Top
Con
Not very popular
UiKit is not a very popular framework, especially compared to other options. As such it may be hard to find learning resources other than the official documentation or it may be more likely for development of UiKit to be dropped than for another more popular framework
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
Top
Con
Slow development
New features and updates trickle out over 6-12 month development cycles, bug fixes are more frequent but very slow and selective as well.
See More
Top
Pro
Easy to use.
When using UIKit classes, it is used with the ui- prefix which is very good. Components are explained straight-forward.
See More
Top
Con
Pre-built starter templates are now behind a paywall
Easier to use Joomla! or Wordpress starter templates without paying money for it.
See More
Top
Pro
Built-in animation capabilities
UiKit has some built-in animation features which can be used to animate various components.
See More
Top
Con
Closed development
Development is mostly done in-house and not publicly available.
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
Very customizable
UiKit's rather minimal style can be easily customizable to create an entirely new look to fit the needs of the designer.
See More
Top
Pro
Extremely modular
Every aspect of the framework is designed to be modular, this way designers can easily choose which components to add to their stylesheet without risking to damage the overall style.
See More
Hide
See All
Experiences
Get it
here
163
67
Foundation
All
15
Experiences
Pros
11
Cons
4
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
Responsive design philosophy
Foundation allows designing for multiple screen sizes simultaneously easily, meaning your content will always fit.
See More
Top
Con
Needs more pre-built components
Example would be a scroll-spy not only for one cell, but cell to cell.
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
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
No style lock-in
Styles are purposefully undeveloped to encourage differentiation between different sites using Foundation.
See More
Top
Con
Documentation is a bit better than average
Documentation could be written better and clearer, with many more example than they currently have. Sometimes hard to find solutions for detailed css problems.
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
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
Support for off-canvas navigation
Foundation comes with an easy way of creating off-canvas menus.
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
RTL support
Allows easily changing text direction. <html class="no-js" lang="ar" dir="rtl">
See More
Top
Pro
Built-in form validation
Foundation comes with Abide plugin, an HTML5 form validation library.
See More
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
Hide
See All
Experiences
Get it
here
186
80
Materialize
All
15
Experiences
Pros
11
Cons
4
Top
Con
Refuses to use the flexbox model
Even though Materialize states that it only supports IE10+, which supports flexbox quite well, with prefixes, Materialize has refused to use Flexbox.
See More
Top
Pro
Great-looking demo
See More
Top
Con
Not maintained anymore
See More
Top
Pro
Device agnostic
Since Materialize follows Google's guidelines for Material design, which in theory is device agnostic, Materialize itself is device agnostic too. It's designed to look good on every device.
See More
Top
Con
Large / heavy
267 kilobytes, minified, for the CSS and JS.
See More
Top
Pro
Large selection of components
CSS components: Badges, buttons, cards, collections, footer, forms, icons, navbar, pagination, preloader. JavaScript components: Collapsible, Dialogs, Dropdown, Media, Modals, Parallax, Pushpin, ScrollFire, Scrollspy, SideNav, Tabs, Transitions, Waves. Mobile-specific: slide-out drawer menu, toasts.
See More
Top
Con
Deprecated
No longer supported by their maintainers.
See More
Top
Pro
Responsive
See More
Top
Pro
Mobile navigation
See More
Top
Pro
Nice showcase of sites built with Materialize
See More
Top
Pro
Customizable
While the default style is not bad at all, Materialize also gives developers the ability to customize it and fit their own style, while still keeping in line with the Material Design philosophy. Along with the CSS files, designers can also download the SASS files which can be edited and compiled.
See More
Top
Pro
12-Column Grid System
See More
Top
Pro
Included icon font
See More
Top
Pro
Meteor.js integration by developers
See More
Top
Pro
Opinionated
Material design is very opinionated on how design elements should behave and look. The basics of which revolve around certain visual elements (physics, space, momentum and light) which are used to create specific UX elements. This is very helpful because it creates a consistent feel without making every design look the same. This can be seen in Materialize too, where each element may be customized but still it keeps the consistent look of the material design.
See More
Hide
See All
Experiences
Get it
here
179
85
Skeleton
All
6
Experiences
Pros
5
Cons
1
Top
Con
Not maintained anymore
No active development for two years.
See More
Top
Pro
Lightweight
See More
Top
Pro
Responsive grid
See More
Top
Pro
Style agnostic
See More
Top
Pro
Vanilla CSS
No bells and whistles for Skeleton, it's just CSS.
See More
Top
Pro
Media queries
See More
Hide
Get it
here
68
37
Material Design Lite
All
4
Experiences
Pros
2
Cons
2
Top
Pro
Developed by Google
Material Design Lite is a framework created by Google, who are also responsible for the creation of Material Design.
See More
Top
Con
Deprecated
No longer maintained
See More
Top
Pro
Very customizable
See More
Top
Con
On limited support
Google moved further development efforts to Material Components for the web.
See More
Hide
Get it
here
51
31
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
{}
undefined
url next
price drop