10 Lightweight Alternatives To Bootstrap & Foundation

Choosing the right framework that is the perfect fit for your projects could be a little bit overwhelming – there are a lot to choose from. Perhaps, you want to go with popular choices like Bootstrap or Foundation, but if your website is going to be a fairly simple one, you won’t be needing most of the building blocks and materials included in the default package.

The good news is that there are a handful of alternatives that are much leaner than Bootstrap or Foundation. Most of these frameworks ship with just the right amount of styles and components to help you get started, while allowing you to be able to extend them in the direction you want for your project.

Here are 10 lightweight alternatives to Bootstrap and Foundation that you should use for building smaller-scale websites.

More on Hongkiat.com:

• Getting started with Twitter Bootstrap


• Using Bootstrap 3 With Sass


• Bootstrap Tool: Build HTML Bootstrap Layouts


• Working With Bootstrap Plugin: Modal Window


• Bootstrap Tool: Build Megamenu with YAMM3

1. Skeleton

Skeleton has finally gotten a facelift. It’s a total revamp from the ground up, and yet it is still as light as it used to be. The new Skeleton grid system now adopts mobile-first philosphy, which ensures that the layout takes center stage regardless of how small the device screen is.

All components that were included in the earlier version – buttons, forms and input elements – are still present but basic typography styles are now set in rem unit.

2. CardinalCSS

CardinalCSS is a CSS framework built with a focus on performance, readability and most importantly maintainability. CardinalCSS adopts some modern approaches such as mobile-first for shaping up the grid; and CSS Box Model that allows you to easily determine element width and height.

CardinalCSS also comes with a handful of helper classes that allow you to quickly apply styles upon an element, for example, the drop-cap which applies the drop-cap effect for the first character in the paragraph.

3. ConciseCSS

ConciseCSS is a CSS framework – without the bloat. It is a lean framework built on top of Sass, LESS, and Stylus which paves its golden path to CSS maintainability. But, if you prefer plain simple vanilla CSS, you can have that as well.

Similarly, ConciseCSS also comes with base styles for essential elements such as the headings, paragraphs, tables, forms, and a set of helpers class to create button UI.

4. PowertoCSS

PowertoCSS is lightweight and a solid frontend framework. Class names that are used to build the grid and apply styles are simple and easy to remember e.g. .button. You can also add your own theme. Head over to their StarterKit to get started.

5. Furtive

Furtive is a mobile-first CSS framework built around the cutting-edge web standards like the use of Flexbox for the grid and rem unit for sizing elements (including font size). Furtive retains a small CSS footprint by not supporting older browsers (*cough* Internet Explorer) since they require some CSS hacking. Hence Furtive is a perfect framework if you are designing a website for the future.

6. BassCSS

BassCSS offers a lightweight set of base element styles, utilities, layout and color styles, in modular form for buildilng a responsive web application. The SCSS files are included to customize the style easily. You can play with typography, white space, breakpoints, and UI elements.

7. Mueller

Mueller is a modular responsive grid system built on top of Sass and Compass. With Mueller, you can build the grid either by adding classes straight to the HTML elements, or if you prefer your HTML elements to be neat and clean, using the grid() function. Mueller grid can be used in tandem with the Masonry Javascript library to create a Pinterest-like layout.

8. Tuktuk

Tuktuk is a very unique name for a framework. Compared to Bootstrap or Foundation, Tuktuk is much lighter as it only comes with just the proper amount of components to build a presentable website including for the grid system, basic styling for typography, tables, and a couple of UI like navbar and modals.

9. Base

Base is built on top of LESS and Sass, and it includes only the most essential of components to build websites: the grid and the basic styling of HTML elements. Base does not come with Javascript components, yet it provides great browser compatibility so much so that it works even with IE7.

10. Toast

The last of our list is Toast. Through the SCSS stylesheet is included in the package, Toast allows you to easily configure the grid class names, the gutter, and even the column-base. For example, if you want the grid to be a 9-base column instead of 12, you can do that. Toast is a minimal CSS framework with very flexible configurations catered to meet your requirements.

No related posts.

10 Lightweight Alternatives To Bootstrap & Foundation

Free Online Photoshop Alternatives That Don"t Suck

Photoshop’s feature set is so staggeringly huge that it’s difficult or perhaps impossible to find a competitor that truly stacks up. That being said, it’s rare for someone to actually need all of those features in their workflow. In fact, for many quick design or photo editing needs, a lot of people can get by just fine with free online photo editors. The problem is, most of these online editors kind of suck. Fortunately, there are a few than stand out as not only usable, but actually pretty great. Here are six you should try.

Note: Many of these apps have pro features or versions, but all make good on the promise of being highly functional in their free iterations.

1. Pixlr

This web editor is by far the most powerful free Photoshop alternative you’ll find. Pixlr is easy to use and has many of the heavy-hitting editing tools that you can usually only find in paid programs, like cloning and color replacement. It’s the closest thing to free Photoshop you’ll find on the web.

2. Polarr

Out of all the apps listed, Polarr gives you the most control over photo effects and color selection. You can even create filters (called “dynamic styles” in the editor). The best editing options on it in my opinion are the artificial distortions and lens physics. They give digital pictures that film quality look.

3. Adobe Photoshop Express Editor

One of the many awesome things about Adobe is that they offer some of the image editing tools from their paid programs for free online. Adobe Photoshop Express Editor is pretty simple: basic (crop, re-size, general touch-up); adjustment (exposure, highlight, sharpen); and effects (crystallize, sketch, distort). But they are very effective. Some of the best features are found in the decorating tool sets. You can easily add text, sticky notes, costumes, and other fun stuff to your photos.

4. PicMonkey

Even if you have full access to the entire Photoshop suite, PicMonkey is a great alternative or complement to photo editing. The simple but powerful editing capabilities of this app will do wonders for your image. You can add different images together, set canvas backgrounds, add text, and much more.

5. Fotor

Fotor is perfect for perfecting portraits. You can perform very detailed and delicate work, like adding or fixing makeup to someone’s face. You can even whiten teeth, remove blemishes, and do a little reshaping. Though it can lag at times, it’s a great app and you can really do a lot with the editing tools.

6. Canva

Most of the photo editors listed here are variations on similar programs to Photoshop, but Canva is something pretty different. It’s a powerful online tool that helps you create great looking designs of all types, even without any design experience whatsoever. You simply choose a template, customize the text and images, and you’re ready to go.

Which Free Online Photoshop Alternative Is Your Favorite?

By combining the strengths of these online Photoshop alternatives, you can get amazing results without paying a cent. Have you created anything in a free Photoshop alternative that you love? Post it below.

Free Online Photoshop Alternatives That Don"t Suck