Responsive webdesign is op dit moment hét codewoord in webontwikkeling. Maar hoe start je hiermee ? Om een goede start te maken is het handig om met een responsive framework te beginnen. Hieronder 15 van die responsive frameworks, sommigen puur css en anderen ook met html5.

[h2]Girder[/h2]

responsive framework 01

Gebouwd met Sass, is Girder een minimalistische toolkit om flexibele layouts onder te verdelen in logische selecties. Het maakt gebruik van placheholders om de content te structureren.

[button url=”http://comfypixel.com/Girder/” size=”small” style=”coffee” ]Cirder[/button][button url=”https://github.com/unmaya/Girder” size=”small” style=”cherry” ]Github[/button]

[h2]Cardinal[/h2]

responsive framework 02

[button url=”http://cardinalcss.com/” size=”small” style=”coffee” ]Cardinal[/button][button url=”https://github.com/cbracco/cardinal” size=”small” style=”cherry” ]Github[/button]

[h2]Typeplate[/h2]

responsive framework 03

[button url=”http://typeplate.com/” size=”small” style=”coffee” ]Typeplate[/button][button url=”https://github.com/typeplate/typeplate.github.io” size=”small” style=”cherry” ]Github[/button]

[h2]Gridism[/h2]

responsive framework 04

[button url=”http://cobyism.com/gridism/” size=”small” style=”coffee” ]Gridism[/button][button url=”https://github.com/typeplate/gridism” size=”small” style=”cherry” ]Github[/button]

[h2]Furatto[/h2]

responsive framework 05

[button url=”http://icalialabs.github.io/furatto/index.html” size=”small” style=”coffee” ]Furatto[/button][button url=”https://github.com/IcaliaLabs/furatto” size=”small” style=”cherry” ]Github[/button]

[h2]PocketGrid[/h2]

PocketGrid CSS framework grid responsive UI kit

responsive framework 06[button url=”http://arnaudleray.github.io/pocketgrid/” size=”small” style=”coffee” ]PocketGrid[/button][button url=”https://github.com/arnaudleray/pocketgrid” size=”small” style=”cherry” ]Github[/button]

[h2]Fitgrid[/h2]

responsive framework 07

Fitgrid CSS framework grid responsive UI kit

responsive framework 06

[button url=”http://www.fitgrd.com/” size=”small” style=”coffee” ]PocketGrid[/button][button url=”https://github.com/jayalai/fitgrd/” size=”small” style=”cherry” ]Github[/button]

[h2]Kraken[/h2]

responsive framework 08

[button url=”http://cferdinandi.github.io/kraken/” size=”small” style=”coffee” ]Kraken[/button][button url=”https://github.com/cferdinandi/kraken” size=”small” style=”cherry” ]Github[/button]

[h2]Markup[/h2]

responsive framework 09

Markup is a simple collection of layouts, widgets, UI styles and other components that you can make use of in your projects in order to code rapidly and efficiently.

[button url=”http://www.markupframework.org/” size=”small” style=”coffee” ][/button]

[h2]Topcoat[/h2]

responsive framework 10

[button url=”http://topcoat.io/” size=”small” style=”coffee” ]Topcoat[/button][button url=”https://github.com/topcoat” size=”small” style=”cherry” ]Github[/button]

[h2]Cascade[/h2]

responsive framework 11

[button url=”http://jslegers.github.io/cascadeframework/index.html” size=”small” style=”coffee” ]Cascade[/button][button url=”https://github.com/jslegers/cascadeframework/” size=”small” style=”cherry” ]Github[/button]

[h2]Responsable[/h2]

responsive framework 12

[button url=”http://responsablecss.com/” size=”small” style=”coffee” ]Responsable[/button][button url=”https://github.com/Abban/Responsable-Grid-System” size=”small” style=”cherry” ]Github[/button]

[h2]Ratchet[/h2]

responsive framework 13

[button url=”http://maker.github.io/ratchet/” size=”small” style=”coffee” ]Ratchet[/button][button url=”https://github.com/maker/ratchet” size=”small” style=”cherry” ]Github[/button]

[h2]Clank[/h2]

responsive framework 14

[button url=”http://getclank.com/” size=”small” style=”coffee” ]Clank[/button][button url=”https://github.com/Wolfr/clank” size=”small” style=”cherry” ]Github[/button]

[h2]Responsive Web CSS[/h2]

responsive framework 15

[button url=”http://www.responsivewebcss.com/” size=”small” style=”coffee” ]Responsive Web CSS[/button]

 

via 15 New Responsive Frameworks.