Skip to Content

Category:CSS

Base – Lightweight responsive layout framework

Are you looking for a lightweight responsive layout framework with minimal bells and whistles? And you don’t want use Bootstrap? Well maybe Base is for you. Base utilizes the LESS dynamic stylesheet language less to make websites targeting all screen sizes easy peasy. With mixin support, it doesn’t take long to get your site looking great on tablets, phones and the desktop. You don’t really have to be that familiar with LESS to get started. But the rundown is that LESS allows you to use variables, mixins (embedding all the properties of a class into another class just by including the class name as one of its properties like a function taking an argument.), nested rules, functions and operations.

basebutton

The Base grid works on a system of declare once, compile many times.

Base comes standard with a main site LESS file – base.less and 3 responsive files: desktop.less, tablet.less and mobile.less. Each of these files has LESS variables that change how _layout.less is imported for that screen size.

When Base compiles you end up with 4 CSS files compiling the same grid structure but at different sizes. It is creating responsive versions of your site intelligently, based on the layout you set out.

When a column is too big for the grid at that size, it is set to 100% of the grid. Voila! The mobile stacking we all love.

Where does the power come from?

The .column() mixin. When compiling .column() checks if the column being created is too wide for the page. If so, it will set that particular element at 100% of the grid width. If not it will continue to render it out as a fraction of the width, taking into consideration gutters, offsets and padding.

It’s custom

By generating the grid on the fly, Base supports a tonne of cool features you wouldn’t expect like:

Partial columns and offsets – just use decimals in the column mixin.
Theoretically unlimited compiled responsive sizes (although don’t go crazy with it)
Multiple columns on mobile (set the grid to 6 columns and watch 3 column items sit in 2 columns on mobile)

Huge list of Boostrap resources

If you are developing in Twitter’s Bootstrap then you will possibly need to get some resources at some point. Google is your friend, but what’s better is if someone else (a human) has already sifted through the results and compiled a nice list of things that you can use in your development. Using Twitter’s Boostrap can speed up development time and make your site responsive and looking good in a fraction amount of time that it would take doing it alone. Boostrap has great grid layout capabilities that will make your site look uniform or almost uniform across all browsers. Typography and JavaScript plugins help with the user experience as well. So if you are learning Boostrap or already developing using it, check out this huge list I found at Bootstrap Hero.

Bootstrap List of Resources

What kind of stuff is in the list? Well this stuff…

Components
Additional Bootstrap specific addons to supplement the base Bootstrap features
Display
BOOTSTRAP-MAXLENGTH
Uses badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute “maxlength” to work.
WATABLE
a pretty decent jQuery table plugin
BOOTSTRAP-TIMEPICKER
A simple timepicker component for Twitter Bootstrap.
BOOTSTRO.JS
Guide users through your application via a series of Bootstrap popovers
NOD!
A frontend validation plugin for Twitter Bootstrap
MESSENGER
Replacement for alert() messages and other user interaction notifications.
JQUERY.TOCIFY.JS
A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.
BOOTSTRAP-PROMPTS
An implementation to replace the alert(), prompt(),confirm() notifications on the browser when using Twitter Bootstrap with Modal information
SUBNAV FOR BOOTSTRAP 2
Example of how to implement SubNavs in Bootstrap navigation menus.
JQUERY-BOOTSTRAP-SCRIPTING
Uses the modal dialog provided by bootstrap and provides a controlable dialog functionality for web pages as a jQuery plugin.
BOOTSTRAP-LIGHTBOX
This is a plugin for Twitter Bootstrap that adds a lightbox that is based off the modal dialog
MENTION.JS
Lightweight wrapper for adding @user mention functionality to Twitter Bootstraps Typeahead plugin
PINES NOTIFY
JavaScript notifications for Bootstrap or jQuery UI
ACC-WIZARD
An accordion-based wizard based on Bootstrap styles.
JQUERY-BOOTSTRAP-PAGINATION
A simple, full-featured, pagination system for jQuery that outputs Twitter Bootstrap marked up pagination links.
BANGBANG TAG INPUT
A jQuery plugin to handle multiple tagged input.
TOCIFY
A Bootstrap styled jQuery Table of Contents
SORICH87/BOOTSTRAP-TOUR
Quick and easy way to build your product tours with Twitter Bootstrap Popovers
BOOTSTRAP-TAGS
Bootstrap tags is a lightweight jQuery plugin meant to extend the Twitter Bootstrap UI to include tagging.
BOOTSTRAP ARROWS
Add-on to the popular Twitter Bootstrap framework to include the use of arrows at any angle in your UI designs
BOOTSTRAP-MODAL
Extends Bootstrap’s native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.
PILLBOX FUEL UX
Pillbox container (often used for tags) control
DATAGRID FUEL UX
Editable, searchable data display table.
BOOTMETRO
Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the “Windows 8 App Store” style
BOOTSTRAP TOUR
Easy to configure site tour wizard