Nex:Gen Designs

Nex:Gen Designs

Monday, 21 December 2015

Bootstrap 4 alpha

Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re stoked to share it with you and hear your feedback. We’ve got a lot of news to share with you, so let’s jump right into it.

What’s new

Bootstrap 4 alpha
There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights:
  • Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.
  • Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins.
  • Opt-in flexbox support is here. The future is now—switch a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.
  • Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.
  • Consolidated all our HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets likebox-sizing: border-box, margin tweaks, and more all in a single Sass file.
  • Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.
  • Dropped IE8 support and moved to rem and em units. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.
  • Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.
  • Improved auto-placement of tooltips and popovers thanks to the help of a library called Tether.
  • Improved documentation. We rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. Improved search is also on it’s way.
  • And tons more! Custom form controls, margin and padding classes, new utility classes, and more have also been included.
And that barely scratches the surface of the 1,100 commits and 120,000 lines of changes in v4 so far. Plus, we’re not even done yet!
Ready to check it out? Then head to the v4 alpha docs!

Development plan

We need your help to make Bootstrap 4 the best it can be. Starting today, the source code for v4 will be available in a v4-dev branch on GitHub. In addition, we have a v4 development and tracking pull request that includes a master checklist of changes we’ve made and our remaining possible todos. We’d love for y’all to help chip away at those todos.
The general development and release plan looks something like this:
  • A few alpha releases while things are still in flux.
  • Two beta releases after features and functionality are locked down to really test things out.
  • Two release candidates (RCs) to really test things out closer to production environments.
  • Then, the final release!
For those jamming on v4 with us, we also have a dedicated v4 Slack channel. Jump in to talk shop and work with your fellow Bootstrappers. If you haven’t yet,join our official Slack room!.
If you’re not keen on pushing code to v4, we’d love to hear from you in our issue tracker with bug reports, questions, and general feedback.

Supporting v3

When we shipped Bootstrap 3, we immediately discontinued all support for v2.x, causing a lot of pain for all our users out there. That was a mistake we won’t be making again. For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.

One more thing…

In addition to shipping the first Bootstrap 4 alpha today, we’re also launching our latest side project, Official Bootstrap Themes.
Official Bootstrap Themes
We’ve talked about building premium themes for Bootstrap since our earliest releases, but never quite found the time or ideal approach until earlier this year. We’ve poured hundreds of hours into these themes and consider them to be much more than traditional re-skins of Bootstrap. They’ve very much their own toolkits, just like Bootstrap.

Wednesday, 2 December 2015

Top 15 CSS Frameworks for Responsive Web Design

Responsive Web Design has become a basic standard of web designing these days. From no where, there are now tens of Responsive frameworks which allow designers and developers to focus on core design of the application than basic boilerplate code for design.
Responsive Web Design
Twitter Bootstrap has become the standard against which all Responsive frameworks are judged, and for a lot of good reasons. At the same time, there are excellent CSS frameworks like Zurb Foundation, LESS Framework etc. which offer features - be it components, code style, architecture, which can be more to one's taste and development preference.
While we prefer Twitter Bootstrap, there are many more basic and advanced Web frameworks you can choose from depending on your need and interest.

Twitter Bootstrap

Twitter Bootstrap CSS Framework

Technical Details

  • Type: Framework
  • Technology: HTML5, CSS3, Javascript, jQuery
  • Compatible with: Firefox- 5,6+, Safari 5+, Chrome 14+, Opera 11+, IE- 7,8,9+
  • Additional Components: Modal, Alert, Button groups, Dropdowns, Badges, Navbar, Tooltips, Labels, Progressbar, Typeahead, Thumbnails, Popovers, Accordion, JS plugins

Quick Summary

  • 12- column grid structure
  • Fixed (comes with an option of responsive design) and Fluid layout pattern
  • Designs pages fit for displays ranging between 480px (or even less) and 1200px (or even more)
  • Nested grids, Offset support
  • Customizable features for typography, colors, navbar, grid and more
  • Based on LESS CSS Pre-processor

Zurb Foundation

Zurb Foundation

Technical Details

  • Type: Framework
  • Technology: HTML5, CSS3, Javascript
  • Compatible with: Chrome, Safari, Firefox, IE- 8,9+, iOS- for iPhone, iPad, Windows Phone 7, Android 2+ for tablet and phone
  • Additional components: Media Queries, Buttons, Modular Scale for Typography, Forms, Navigation, Tabs, Alerts, Tooltips, Labels, Accordion, Tables, Progress Bars, Video, Thumbnails, Orbit, Magellan, Reveal, Joyride, Clearing, UI elements

Quick Summary

  • 12-column grid structure
  • Fluid layout pattern
  • Default grid-width set at 940px, adjustable grid-size, single breakpoint at 768px for devices that need width less than 768px
  • Nested grids, Offset support
  • Customizable features for typography, forms, UI elements, navigation etc
  • Based on Sass styling pattern

LESS framework

LESS CSS Framework

Technical Details

  • Type: Grid System
  • Technology: HTML5, CSS, Javascript
  • Compatible with: IE 6+, Safari, Chrome, Opera, Firefox, Nokia Webkit, Android Webkit, Mobile Safari (all iPhones, iPads, and iPod Touches), WebOS, Blackberry OS
  • Additional Components: You need to add them separately

Quick Summary

  • 3/5/8/10 columns grid structure
  • Fluid layout pattern
  • Default grid-width set at 992 px, adjustable for 320, 480, and 768px
  • 3 sets of typography presets
  • Default layout served to browsers not supporting media queries; other layouts served for the ones that do
  • Based on LESS CSS Pre-processor

Skeleton

Skeleton CSS Framework

Technical Details

  • Type: Boilerplate
  • Technology: CSS
  • Compatible with: Chrome, Firefox 3 and above, Safari, IE- 7,8,9
  • Additional Components: Buttons, Forms, Media Queries, Typography

Quick Summary

  • 16-column grid structure
  • It's only a development kit and not a full-fledge UI framework
  • Default width set at 960px; can design pages for width ranging from 480px (or even less) to 960px
  • Support for iPhone Retina images and Droid (charge/original)
  • Grid pattern is a variation of 960gs

Gumby

Gumby CSS Framework

Technical Details

  • Type: Framework
  • Technology: HTML, CSS, Javascript
  • Compatible with: all the commonly-used browsers and screen-sizes
  • Additional Components: Design templates, UI kit, Production-ready codes, Buttons, Forms, Toggles, Navigation, Drawers, Tabs

Quick Summary

  • 12/16/hybrid columns grid structure
  • 12-column grid divided into 60px-wide portion, 16-column into 40px-wide
  • Fixed, fluid layout pattern Grid based on 960gs
  • Nested grids
  • Customizable features for grid, typography, colors etc

Columnal

Columnal CSS Framework

Technical Details

  • Type: Grid System
  • Technology: CSS
  • Compatible with: all the commonly-used desktop and mobile browsers
  • Additional components: Media Queries, Sub-columns, Prefix, Suffix, Wireframing templates, PDF of grid system

Quick Summary

  • 12-column grid structure
  • Default width of 1140px; IE- 6,7 work well on 984px or 960px
  • Fluid layout
  • Borrowed from 960.gs, cssgrid.net grid systems

1140 Grid

1140 Grid CSS Framework

Technical Details

  • Type: Grid System
  • Technology: CSS
  • Compatible with: IE- 6,7,8+, Safari, Chrome, Firefox, MacBook, iMac, iPhone, iPad, Android phones, Blackberry OS, Nokia phones (the old ones too)
  • Additional components: Media Queries

Quick Summary

  • 12-column grid structure
  • Default width of 1140px
  • Fluid layout
  • Option of including Retina Display x2 images for iPhone 4

Semantic Grid System

Semantic CSS Framework

Technical Details

  • Type: Grid System
  • Technology: CSS
  • Compatible with: IE 6+, Firefox 3.5+, Chrome, Opera 9+, Safari 4+
  • Additional components: Mixins for LESS, Stylus, and SCSS

Quick Summary

  • 12-column grid structure
  • Default width of 960px
  • Fixed, fluid layout
  • Nested columns
  • Runs on LESS, Stylus, SCSS pre-processor

Golden Grid System

Golden Grid CSS Framework

Technical Details

  • Type: Grid System
  • Technology: HTML, CSS3, Javascript
  • Compatible with: IE 6+, Safari, other common browsers and screen-sizes
  • Additional components: Media queries, Zoomable baseline grid, Golden Gridlet

Quick Summary

  • 18-column grid structure of which 16 columns available for actual design
  • Foldable grid pattern inspired by DIN paper system and Unigrid
  • Covers screens ranging from 240px to 2560px
  • Columns can be folded into 8 or 4 numbers depending upon the screen size
  • Elastic gutters for better layout pattern

Titan Framework

Titan CSS Framework

Technical Details

  • Type: Framework
  • Technology: CSS
  • Compatible with: Still in developmental phase
  • Additional components: PSD templates, reset.css, 12.css, text.css, 16.css

Quick Summary

  • 12/16 column grid structure
  • Similar to 960.gs grid system classes
  • Default width set at 960px
  • Responsive Grid System

Responsive CSS Grid System

Responsive Grid CSS Framework

Technical Details

  • Type: Grid System
  • Technology: HTML, CSS
  • Compatible with: IE 6+, Safari 4+, Opera 9+, Firefox 3.5+, Chrome
  • Additional Components: Media Queries

Quick Summary

  • 2 to 12 columns grid structure
  • Suitable for all the commonly-used widths including those less than 480px
  • Fluid layout

Base

Base CSS Framework

Technical Details

  • Type: Framework
  • Technology: HTML5, CSS, Javascript
  • Compatible with: IE 7 and above, Firefox, Chrome, Opera
  • Additional components: PSD, HTML5 template and jQuery, Typography, Tables, Blockquotes, Javascript plugins, Forms, Buttons, Lists

Quick Summary

  • 12-column grid structure
  • Fluid layout
  • Based on LESS CSS Pre-processor
  • Default font-size of 14px, line-height of 22px
  • Built for mobile, netbook, tablet, desktop

Kube

Kube CSS Framework

Technical Details

  • Type: Framework
  • Technology: CSS, Javascript
  • Compatible with: Chrome, Opera, Safari, IE 8+, Firefox
  • Additional components: Typography, Tables, Forms, Buttons, Blockquotes, Lists, Figure, Definition

Quick Summary

  • Nested columns
  • Developer version is based on LESS and includes mixins, modules, and variables
  • Includes a few goodies like Lead, Links, Colours, Elements, and Images

CSS Horus

CSS Horus Framework
URL: csshor.us

Technical Details

  • Type: Framework
  • Technology: CSS
  • Compatible with: IE 7, 8, 9+, Safari, Chrome, Firefox, Opera, iPhone, iPad, Blackberry, Windows phone, Android, Nokia
  • Additional components: Resets, Table, Lists, Button, Links, Typography, Forms, Basics, RTL

Quick Summary

  • 16-column grid structure
  • Available width-size of 1200px, 960px, and less
  • Based on LESS CSS Pre-processor
  • Also compatible with screen-width of mobile phones

Amazium

Amazium CSS Framework

Technical Details

  • Type: Framework
  • Technology: HTML, CSS
  • Compatible with: all the commonly-used browsers and screen-sizes
  • Additional Components: Typography defaults, Tables, Media Queries, Forms, provision for responsive images and videos, Show and Hide, Forms, Tables

Quick Summary

  • 12-column grid structure
  • Fluid layout
  • Default grid-width set at 960px; can design pages for width ranging between 300px and 1200px *Supports Hi-resolution/Retina (Pixel ratio:2) images
  • Offset support