Thinking about cooking up the next Smashing Magazine? Maybe you’re looking for front-end tools to build a new kind of JAMstack site? Perhaps you’ve just decided to taking a breather from building with React and Angular for a bit. Whatever the reason you just landed on an awesome list. And it’s chock-full of open goodies for developers to build websites with.
No magic tricks here. Unlike the apps you might see built with Awesome React Boilerplates, these Web frameworks all have a relatively small footprint, are search and mobile friendly and represent some of the best design accomplishments of the last ten years. Or the last two months, depending on when you visit.
These frameworks pretty much have it all, and then some.
Created and managed by Zurb, Foundation is a well established and thoughtfully designed framework. Notable aspects include a focus on Inclusive Design principles, proven UX methodologies, an extensive set of documentation, online training and community, and the flexibility to create some very powerful experiences on the Web. Hundreds of major brands rely upon Foundation every day, and, despite that fact, Foundation continues to push new releases and set the bar for what a framework should achieve.
Foundation is available with multiple prepackaged builds and also has the ability to pick what you want to create your own custom build. In addition to being the building block for many, Foundation also offers a complimentary set of tools for creating responsive email templates as well. And while it may not be as easy as some of the others, the thoughtful design constraints baked into Foundation will make you a better Web developer just by using it.
This framework needs little introduction. Born out of Twitter, Bootstrap is one of the most well-known and widely deployed starting points for building a website. Bootstrap is perfect for newcomers looking to build a rich Web experience without the steep learning curve and it now it its 4th version with a significant number of contributions from across the globe.
Though it hasn’t gained the mindshare of the Foundations and Bootstraps of the world, Semantic UI is not something to be overlooked. Semantic UI takes a different approach to building interfaces, making it possible to mix and match many of their UI components to create truly custom layouts that can do a lot more than meets the eye until you start working with it. I once used the Semantic UI to build a SPA using the React-port when it was still called Stardust and was thoroughly impressed with the flexibility and power of the interfaces I could build with Semantic UI.
Material design clone for Vue.js. Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.
Oldies but goodies
Like the full-featured frameworks, you can do a lot with these frameworks, all of which have amassed over 10,000 stargazers on GitHub. Visit their websites to learn more about them, and dig into their open source repositories to start getting involved. Just remember, more stars does not necessarily mean better. So make your selections carefully.
Materialize (~26,000 stargazers)
Material Design Lite (~27,000 stargazers)
Material Design for Bootstrap (~18,000 stargazers) <br Material Design Bootstrap is Material Design “theme” for Bootstrap 3 and is working towards support for Bootstrap 4. Like the name implies, this framework brings together the two worlds of Bootstrap and Material Design under a single umbrella, an incredibly unique experience.
Shining bright, these libraries are composed of industry trend-setters and visionaries looking to make waves in the design and development world. There are all very much worth checking out in close detail.
Dubbing itself “not a UI kit” I saw Tailwind mentioned on a Hugo forum thread and gave it a spin while building a landing page. and found it very enjoyable to use. It’s well-designed, extensible and includes searchable documentation. Someone even created an awesome list for it.
As the author pointed out to me mini.css isn’t exactly a full-featured framework, but it’s not a micro framework either. I took a look at the doc site and was surprised to see such comprehensive documentation and even quick a reference guide with code snippets and links to functional Pens. And that’s something you don’t see very often in the other frameworks. Mini lives up to its name with a pretty lightweight footprint – clocking in at just 7kb gzipped. And if you’re compressing your assets with Brotli compression, you can expect to do even more with less.
UIkit brands itself as
A lightweight and modular front-end framework
for developing fast and powerful web interfaces. They’ve got through a number of iterations already, use semantic versioning to make upgrading a no-brainer and maintain a CHANGELOG to help keep you abreast of what’s happening.
Thanks to Victor Bastos for making me aware of this one. It’s CSS only, and supports a very simple method of building very beautiful and flexible layouts, with a reasonable level of opinion. Constraint with Bulma is a benefit, and they’re carefully working towards building a one-of-a-kind framework that may take the world by storm.
A designer favorite, Tachyons is designed for modular, clean and readable designs. It has a growing library of open source components, gallery for inspiration, a very fresh looking docs site and is gaining popularity quickly.
For the minimalists in the crowd, these frameworks were built with strong opinion, kept it simple and are purpose-driven while allowing some level of customization.
hack.css describes itself as a
dead simple css framework, and it truly is. I used this little beauty to build the After Dark, and absolutely love how people are finding ways to make it their own.
Spectre brands itself as a lightweight, responsive and modern CSS framework for faster and extensible development. The doc site is very nicely laid out and there’s some pretty nifty-looking CJK support baked-in. They’re also planning on adding support for email templates, something I haven’t seen anyone except for Foundation do. Thanks to
@roemhildtg for bringing it to my attention.
Build mobile apps with simple HTML‚ CSS‚ and JS components. I used this to build some mobile demos for talks I’ve given in the past and loved the result achieved with relatively little effort.
A minimalist CSS framework for desktop and mobile development, Milligram provides the basics to get a site set-up without using a full-featured framework.
Dated but still relevant
Created by Yahoo, Pure CSS can be added piecemeal to accomplish simple layout and styling tasks on a site without going all-in on a framework – perfect for building quick prototypes or when you don’t want to add a lot of opinion to your site. Check out the docs to see what it can do.
Resources, tooling, and design guidelines for building interfaces with GitHub’s design system.
Animation and Visualization
Complex frameworks typically use advanced HTML5 techniques to achieve interactive effects. Some of these require a license for use in commercial projects, so be sure to read licenses carefully.
GreenSock Animation Platform
Does things you can't achieve with CSS and has a members site full of demos that’ll literally blow you away. Just search the Web for “TweenMax” and get a glimpse of what animation on the Web can really do. If you want this kind of experience on your sites, you’re going to have to pay for it.
Responsive CSS framework for creating sliders, presentations, banners, and other step-based applications. Sequence provides a number of free and premium themes to help you create an engaging app or wizard in no time at all.
A web framework for building virtual reality experiences Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms. For an example React boilerplate using A-Frame, check out Awesome React Boilerplates.
Animate Plus is a CSS and SVG animation library for modern browsers. Animate Plus is performant and lightweight (2.8KB gzipped), making it particularly well-suited for mobile. I tried using this library to create a title rotation animation but got stuck in callback hell as it didn't support promises at the time.
CSS-only frameworks for super-simple animation effects. Perfect for beginners looking to add a little movement to their pages.
A collection of loading indicators animated with CSS.
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Just-add-water CSS animations. Handy for providing feedback to users, such as shaking a button when a form is invalid.
Some CSS classes to move your DOM. Drop it in, add a few classes to your markup and do your best to determine if the page is shaking, or you’ve simply had too much coffee. Just don’t go overboard with this one, mmm-kay?
Icons and icon-related tools to help bring your site some flair. Use them to create social icons, export SVG images, do sprite things and all around just add value to help move eyeballs through your pages.
A “Tiny style-controlled SVG iconset”. Like the name suggests, this icon set is fairly small. But the minimalist design makes these perfect for applications where you don’t want draw too much attention away from your content. I use some of these icons in After Dark and love the way they look.
Material Design Icons
A bunch of Materialesque icons including SVG vectors for easily-embedded iconography piped down with the page HTML.
Icon set for Material Design. Lots of them, and there’s a very handy toolbar for downloading these in SVG, PNG or Icon Font format. Let Ross Phillips show you how to use them to create some very lightweight social share buttons.
Generate custom icon webfonts from the comfort of the command line. Use only what you need, with Font Custom. I originally learned about this one while working with the Feeling Responsive theme. It can be a little tricky to use at first, but the payoff is worth it.
Everyone and their mom knows about Font Awesome. But did you know you can download it asynchronously so it doesn’t slow down your page load?
Here’s how using Fetch Injection:
<script> fetchInject([ 'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' ]) </script>
Really Simple, Organized, Media Queries with Sass. I’ve been using Breakpoint in my JAMstack projects since I saw it used by Michael Rose in Minimal Mistakes. It’s a super-simple way to organize your media queries and make sure they always do what you want. What’s more, they’re totally Keanu-approved (but probably not really).
A low-level CSS toolkit. Basscss provides a base for desktop and mobile development, is composable and provides a number of community-supported add-ons.
Man this thing has been around forever. But it provides some crutches for Sass many designers need to create slick CSS animations such as hamburger menu open/close animations and is def worth mentioning.
The magical, reusable web component compiler. Generate Web Components that run on any modern browser.
Other libraries and frameworks
A customizable, modular, responsive, lightbox gallery plugin for jQuery. Includes a number of built-in modules such as video, thumbnail, autoplay and more. Looks comprehensive. This is how to build a better lightbox.
Lazy load images and scripts into your page. Support for optimistic preloading of assets with lazy-queueing. Also does responsive images and supports LQIP (Low-Quality Image Placeholders) and more. I used this while building a prototoype for the WordCamp Ubud 2017 and it did wonders for page weight. I’ve also implemented on the Hugo theme gallery to improve UX and page speed.
Achieve infinite scrolling on your static website, and trigger events as the user scrolls. Used to be a jQuery only thing back in the day. But not anymore.
Helps you remove unused CSS from your webapps.
Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll.
Create badass, fluid and smooth transition between your website’s pages. Acts like a router. Probably one of the easiests way to turn your website into an app.
A fetching async loader and DOM injection sequencer for high-performance websites. Use Fetch Inject to dynamically import page resources such as JS and CSS in parallel (even across the network), and load them into your page in a desired sequence.
Content management systems built around static site generators.
Cloud CMS’s make it possible to manage content and create a publishing workflow for your content using a web-based GUI. Generator support varies between service, and, in some cases, may feel overly prescriptive. But all-in-all these tools are a good start to getting landing pages updated and articles published without a lot of hassle.
Like CloudCannon, SiteLeaf is a Cloud CMS for Jekyll. I used them to rebuild security7.net in 2017 and was surprised at how quickly they were able to provide support. Siteleaf has been around for over 7 years, and as one of their employees told me, they consider that and their API two of their key advantages in the Cloud CMS space.
Build Jekyll or static websites, have your team and clients update inline. CloudCannon has a number of professionally designed, open source Jekyll themes you can begin using immediately with their service, has great documentation, maintains a learning website with the missing cheat sheet Liquid or Jekylll should have had but never did. They maintain a very simple set-up experience and focus on creating one of the best user experiences you could possibly imagine.
I haven’t tried them yet. But the support for Hugo is appealing.
Offline solutions allow for creation of content offline, either from the terminal or a GUI. These are more suitable for developers and can be extended to provide functionality similar to cloud providers.
After Dark is free and open source software you can use to create a privacy-aware website, blog or app. Unparalleled speed, secure design and add-on rewards system help you own your data and monetize your users. This is a passion project I’ve been working on since 2016 after I got fed up throwing away code.