10 Lightweight Alternatives To Bootstrap & Foundation

-

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.




Comments

Post a Comment

Popular posts from this blog

Six tips from Apple on how to create better app icons

-
Image
This is a guest post by Martin LeBlanc, the founder of   IconFinder , a search engine for icons. You can follow him on twitter   here Shortly after the WWDC event in San Francisco in June, a plethora of iOS7 resources became available on the web. Throughout the hundreds of sessions, speakers and keynotes, Apple   unveiled its new iOS 7   to thousands of delegates lucky enough to be there. We found a great presentation called “Best Practice Guide for Great iOS Design” by Apple UX Evangelist, Mike Stern. The first part of his presentation is about app icons and what Apple believes makes a good icon. He goes through a list of six important things to consider when you are designing your app icon. We will do our best to summarise the presentation in this post. Mike Stern begins by explaining why it’s important to pay attention to the UI and app icon: Your users aren’t going to judge your app based on how many technologies you are using, or how many APIs you integrated or how eleg
Read more

3D Thumbnail Hover Effects

-
Image
3D Thumbnail Hover Effects Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase .  In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.   THE MARKUP __________________________________________________________________________________ The markup for the thumbnail structure will be as follows: 566 124 →       __________________________________________________________________________________   Each thumbnail goes into a division with another division for the details (view-back). The structure that we want to create for each division with the class view using JavaScript is the
Read more

Some Ideas for Checkout Effects

-
Image
Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms and transitions.  A while back we explored a morphing button concept where the active element gets transformed into its target, aiming to create a fluid UI experience with a semantic connection of the involved elements. Today we want to apply that same concept and some other ideas to the first step of the checkout process. The checkout process in online stores is one of the most challenging and crucial in terms of UI design. Done well it can create a pleasant and smooth purchasing experience for the user; done wrong, it can lead to an abandoned shopping cart and no sale at all. There are many carefully planned and well designed e-commerce sites out there and making the UI uncluttered is definitely a great trend welcomed by anyone who buys things online.  With the demos we’ve created today we are looking
Read more