Tables
Base
| Framework | Version | Size | Initial Release | Developer | Website |
|---|---|---|---|---|---|
| AngularJS | 2.20 | 144kb | October 20, 2010 | https://angular.io/ | |
| React | 15.4.0 | 128kb | March 2013 | Facebook, Instagram | http://facebook.github.io/react |
| Knockout | 3.4.1 | 58kb | July 5, 2010 | Steve Sanderson | http://knockoutjs.com/ |
| Ember | 2.10.0 | 514kb | December 8, 2011 | Ember Core Team | https://github.com/emberjs/ember.js |
| Backbone.js | 1.3.3 | 7.5kb | October 13, 2010 | Jeremy Ashkenas | http://backbonejs.org/ |
| Meteor | 1.4 | ? | January 20, 2012 | Meteor Development Group | https://www.meteor.com/ |
| Sails | 0.12 | ? | 2012 | Balderdash Design Company & The Treeline Company | http://sailsjs.org/ |
<div class="table--overflow">
<table class="table">
<thead class="table--header">
<tr class="table--row">
<th class="table--header-cell">Framework</th>
<th class="table--header-cell">Version</th>
<th class="table--header-cell">Size</th>
<th class="table--header-cell">Initial Release</th>
<th class="table--header-cell">Developer</th>
<th class="table--header-cell">Website</th>
</tr>
</thead>
<tbody class="table--body">
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">AngularJS</td>
<td class="table--cell" data-table-header="Version">2.20</td>
<td class="table--cell" data-table-header="Size">144kb</td>
<td class="table--cell" data-table-header="Initial Release">October 20, 2010</td>
<td class="table--cell" data-table-header="Developer">Google</td>
<td class="table--cell" data-table-header="Website"><a href="https://angular.io/">https://angular.io/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">React</td>
<td class="table--cell" data-table-header="Version">15.4.0</td>
<td class="table--cell" data-table-header="Size">128kb</td>
<td class="table--cell" data-table-header="Initial Release">March 2013</td>
<td class="table--cell" data-table-header="Developer">Facebook, Instagram</td>
<td class="table--cell" data-table-header="Website"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Knockout</td>
<td class="table--cell" data-table-header="Version">3.4.1</td>
<td class="table--cell" data-table-header="Size">58kb</td>
<td class="table--cell" data-table-header="Initial Release">July 5, 2010</td>
<td class="table--cell" data-table-header="Developer">Steve Sanderson</td>
<td class="table--cell" data-table-header="Website"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Ember</td>
<td class="table--cell" data-table-header="Version">2.10.0</td>
<td class="table--cell" data-table-header="Size">514kb</td>
<td class="table--cell" data-table-header="Initial Release">December 8, 2011</td>
<td class="table--cell" data-table-header="Developer">Ember Core Team</td>
<td class="table--cell" data-table-header="Website"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Backbone.js</td>
<td class="table--cell" data-table-header="Version">1.3.3</td>
<td class="table--cell" data-table-header="Size">7.5kb</td>
<td class="table--cell" data-table-header="Initial Release">October 13, 2010</td>
<td class="table--cell" data-table-header="Developer">Jeremy Ashkenas</td>
<td class="table--cell" data-table-header="Website"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Meteor</td>
<td class="table--cell" data-table-header="Version">1.4</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">January 20, 2012</td>
<td class="table--cell" data-table-header="Developer">Meteor Development Group</td>
<td class="table--cell" data-table-header="Website"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Sails</td>
<td class="table--cell" data-table-header="Version">0.12</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">2012</td>
<td class="table--cell" data-table-header="Developer">Balderdash Design Company & The Treeline Company</td>
<td class="table--cell" data-table-header="Website"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
</tr>
</tbody>
</table>
</div>Block Tables
Use block tables for better responsive tables when you have full control over the HTML rendering of the table. Block tables work by adding a data attribute to each table cell, which then is rendered by CSS pseudo content.
Note: The example below is block at all sizes. You probably want to turn the block table back into a normal table at some point. Use table--xxs through table--xxl to turn back into a normal table at breakpoints.
| Framework | Version | Size | Initial Release | Developer | Website |
|---|---|---|---|---|---|
| AngularJS | 2.20 | 144kb | October 20, 2010 | https://angular.io/ | |
| React | 15.4.0 | 128kb | March 2013 | Facebook, Instagram | http://facebook.github.io/react |
| Knockout | 3.4.1 | 58kb | July 5, 2010 | Steve Sanderson | http://knockoutjs.com/ |
| Ember | 2.10.0 | 514kb | December 8, 2011 | Ember Core Team | https://github.com/emberjs/ember.js |
| Backbone.js | 1.3.3 | 7.5kb | October 13, 2010 | Jeremy Ashkenas | http://backbonejs.org/ |
| Meteor | 1.4 | ? | January 20, 2012 | Meteor Development Group | https://www.meteor.com/ |
| Sails | 0.12 | ? | 2012 | Balderdash Design Company & The Treeline Company | http://sailsjs.org/ |
<table class="table table--block">
<thead class="table--header">
<tr class="table--row">
<th class="table--header-cell">Framework</th>
<th class="table--header-cell">Version</th>
<th class="table--header-cell">Size</th>
<th class="table--header-cell">Initial Release</th>
<th class="table--header-cell">Developer</th>
<th class="table--header-cell">Website</th>
</tr>
</thead>
<tbody class="table--body">
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">AngularJS</td>
<td class="table--cell" data-table-header="Version">2.20</td>
<td class="table--cell" data-table-header="Size">144kb</td>
<td class="table--cell" data-table-header="Initial Release">October 20, 2010</td>
<td class="table--cell" data-table-header="Developer">Google</td>
<td class="table--cell" data-table-header="Website"><a href="https://angular.io/">https://angular.io/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">React</td>
<td class="table--cell" data-table-header="Version">15.4.0</td>
<td class="table--cell" data-table-header="Size">128kb</td>
<td class="table--cell" data-table-header="Initial Release">March 2013</td>
<td class="table--cell" data-table-header="Developer">Facebook, Instagram</td>
<td class="table--cell" data-table-header="Website"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Knockout</td>
<td class="table--cell" data-table-header="Version">3.4.1</td>
<td class="table--cell" data-table-header="Size">58kb</td>
<td class="table--cell" data-table-header="Initial Release">July 5, 2010</td>
<td class="table--cell" data-table-header="Developer">Steve Sanderson</td>
<td class="table--cell" data-table-header="Website"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Ember</td>
<td class="table--cell" data-table-header="Version">2.10.0</td>
<td class="table--cell" data-table-header="Size">514kb</td>
<td class="table--cell" data-table-header="Initial Release">December 8, 2011</td>
<td class="table--cell" data-table-header="Developer">Ember Core Team</td>
<td class="table--cell" data-table-header="Website"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Backbone.js</td>
<td class="table--cell" data-table-header="Version">1.3.3</td>
<td class="table--cell" data-table-header="Size">7.5kb</td>
<td class="table--cell" data-table-header="Initial Release">October 13, 2010</td>
<td class="table--cell" data-table-header="Developer">Jeremy Ashkenas</td>
<td class="table--cell" data-table-header="Website"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Meteor</td>
<td class="table--cell" data-table-header="Version">1.4</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">January 20, 2012</td>
<td class="table--cell" data-table-header="Developer">Meteor Development Group</td>
<td class="table--cell" data-table-header="Website"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Sails</td>
<td class="table--cell" data-table-header="Version">0.12</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">2012</td>
<td class="table--cell" data-table-header="Developer">Balderdash Design Company & The Treeline Company</td>
<td class="table--cell" data-table-header="Website"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
</tr>
</tbody>
</table>Fixed Tables
Use fixed tables for better responsive tables. Fixed tables work by floating the table header to the left and allowing for overflow scrolling on the table body.
Note: The example below is fixed at all sizes. You probably want to turn the fixed table back into a normal table at some point. Use table--xxs through table--xxl to turn back into a normal table at breakpoints.
| Framework | Version | Size | Initial Release | Developer | Website |
|---|---|---|---|---|---|
| AngularJS | 2.20 | 144kb | October 20, 2010 | https://angular.io/ | |
| React | 15.4.0 | 128kb | March 2013 | Facebook, Instagram | http://facebook.github.io/react |
| Knockout | 3.4.1 | 58kb | July 5, 2010 | Steve Sanderson | http://knockoutjs.com/ |
| Ember | 2.10.0 | 514kb | December 8, 2011 | Ember Core Team | https://github.com/emberjs/ember.js |
| Backbone.js | 1.3.3 | 7.5kb | October 13, 2010 | Jeremy Ashkenas | http://backbonejs.org/ |
| Meteor | 1.4 | ? | January 20, 2012 | Meteor Development Group | https://www.meteor.com/ |
| Sails | 0.12 | ? | 2012 | Balderdash Design Company & The Treeline Company | http://sailsjs.org/ |
<table class="table table--fixed">
<thead class="table--header">
<tr class="table--row">
<th class="table--header-cell">Framework</th>
<th class="table--header-cell">Version</th>
<th class="table--header-cell">Size</th>
<th class="table--header-cell">Initial Release</th>
<th class="table--header-cell">Developer</th>
<th class="table--header-cell">Website</th>
</tr>
</thead>
<tbody class="table--body">
<tr class="table--row">
<td class="table--cell">AngularJS</td>
<td class="table--cell">2.20</td>
<td class="table--cell">144kb</td>
<td class="table--cell">October 20, 2010</td>
<td class="table--cell">Google</td>
<td class="table--cell"><a href="https://angular.io/">https://angular.io/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">React</td>
<td class="table--cell">15.4.0</td>
<td class="table--cell">128kb</td>
<td class="table--cell">March 2013</td>
<td class="table--cell">Facebook, Instagram</td>
<td class="table--cell"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Knockout</td>
<td class="table--cell">3.4.1</td>
<td class="table--cell">58kb</td>
<td class="table--cell">July 5, 2010</td>
<td class="table--cell">Steve Sanderson</td>
<td class="table--cell"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Ember</td>
<td class="table--cell">2.10.0</td>
<td class="table--cell">514kb</td>
<td class="table--cell">December 8, 2011</td>
<td class="table--cell">Ember Core Team</td>
<td class="table--cell"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Backbone.js</td>
<td class="table--cell">1.3.3</td>
<td class="table--cell">7.5kb</td>
<td class="table--cell">October 13, 2010</td>
<td class="table--cell">Jeremy Ashkenas</td>
<td class="table--cell"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Meteor</td>
<td class="table--cell">1.4</td>
<td class="table--cell">?</td>
<td class="table--cell">January 20, 2012</td>
<td class="table--cell">Meteor Development Group</td>
<td class="table--cell"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Sails</td>
<td class="table--cell">0.12</td>
<td class="table--cell">?</td>
<td class="table--cell">2012</td>
<td class="table--cell">Balderdash Design Company & The Treeline Company</td>
<td class="table--cell"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
</tr>
</tbody>
</table>