Much smaller in size and features than fully-featured frameworks like Bootstrap, Spectre is a great choice for single-page websites and small web applications.
This very handy framework will provide a solid foundation for creating quality responsive designs in no time.Ī lightweight (~10KB gzipped) starting point for your projects, Spectre provides elegantly designed elements, as well as a flexbox-based, responsive and mobile-friendly layout. Built with lightweight and minimal code, Base is designed to provide developers and designers an easy way to built cross-browser, mobile-first websites and web applications. As no compiling or installing is required, this lightweight framework makes it easy to create any type of responsive design.īase is a very simple but robust responsive framework.
Yet, it features a responsive CSS grid system, typography, forms, media queries… all you need for building a quality site in no time.ĭesigned as a starting point for your projects, Skeleton only includes styles a handful of HTML elements and provides a simple but efficient grid system. With only 400 lines of code, Skeleton is light as a feather. UIkit is a lightweight and responsive CSS framework for developing fast and powerful web interfaces.Ĭonsisting of compiled CSS and JavaScript, UIKit is easy to use and provides all the needed tools for modern web design: Grid, custom icons, components, animations, and a lot more. The framework relies solely on modern CSS, so you do not have to worry about JavaScript conflicts and you can freely decide on which JavaScript library you will use in your project. Standing in the gap between fully-featured frameworks like Bootstrap and very small frameworks as such as Pure.CSS, Mini contains many features (Responsive grid, components…) in a small package. Mini is, as the name suggests, a lightweight (7kb gzipped) framework for crafting fast and responsive websites easily. Easy to use, it provides components, as well as starter templates which allow you to start designing your website with minimal setup time. Materialize is a modern responsive front-end framework based on Material Design. It uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.Īs of 2019, Material Design has been implemented on most Google products as such as YouTube, Gmail, Google Drive, and Google Docs.
Material Design is a design language created in 2014 by Google. Those classes allow you to finely style any element: We can easily spot classes named text-white, font-bold and rounded, defining the visual aspect of the button. Let’s have a quick look to some HTML used with Tailwind: Īs you can see, the example is using many utility classes on a button element. Instead of predesigned components, Tailwind provides low-level utility classes that let you build your own designs. Tailwind is a relatively new CSS framework, designed to be different from its competitors. column class to any of your HTML elements.īulma is also built with Sass, which allows you to only use the features you really need in your web development tasks. Bulma is built with a mobile-first approach, which makes every element optimized for vertical reading, and its grid system is fully built with Flexbox.Īchieving flexible layout with same-size columns is as simple as adding a. With 21kB minified and gzipped, Bulma isn’t the most lightweight of this list, but this open source CSS framework is so interesting that it totally deserves a mention. Only 3.8KB minified and gzipped, but packed with tons of features for your web design needs.Ĭreated by Yahoo in 2014, Pure specializes in providing a very lightweight set of responsive CSS layouts and components to act as a foundation for creating a responsive design. If you want to become a web developer, learning Bootstrap is a must. It’s extremely easy to learn and the documentation is very complete. Interested in Bootstrap? Check out our Bootstrap Forms guide.īootstrap is one of my tools of choice when it comes to building responsive websites or a WordPress theme.
0 kommentar(er)
