Example uses D3 to produce Pure's responsive grid programmatically.
For example, elements within a '3' row grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
View console or source to see created elements/grid elements.
| (function() { | |
| 'use strict'; | |
| var items = 9, // number of div containers required | |
| rows = 3, // number items in a single row | |
| rowId = 0; // reference for the row ID | |
| var w = 200, | |
| h = 100, | |
| colour = d3.scale.category10(); | |
| var container = d3.select('body').append('section').classed('l-content main-wrapper', true); | |
| function render(_items, _rows) { | |
| // loop through number of items to render the responsive grid | |
| for (var i = 0; i < _items; ++i) { | |
| if ( (i % rows) === 0 || i === 0) { | |
| rowId++; // increment the row ID | |
| addRow(); // add row | |
| addDiv(); // then add div to row | |
| } else { | |
| addDiv(); // add div to row | |
| } | |
| } | |
| function addRow() { | |
| container.append('div') | |
| .classed('pure-g rows', true) | |
| .attr('id', function() { return 'row-id-' + rowId; }); | |
| } | |
| function addDiv() { | |
| var divId = i + 1; // ensure ID starts at 1 (not 0) | |
| d3.select('#row-id-' + rowId) | |
| .append('div') | |
| .classed('pure-u-1 pure-u-md-1-' + rows, true) | |
| .attr('id', function() { return 'svg-id-' + divId; }) | |
| .call(addSvg); | |
| } | |
| function addSvg(selection) { | |
| var svg = selection.append('svg') | |
| .attr({ | |
| width: w, | |
| height: h | |
| }); | |
| svg.append('rect') | |
| .attr({ | |
| x: 0, | |
| y: 0, | |
| width: w, | |
| height: h | |
| }) | |
| .style({ | |
| fill: colour(i), | |
| stroke: 'none' | |
| }); | |
| svg.append('text') | |
| .attr({ | |
| x: 10, | |
| y: 20 | |
| }) | |
| .text(i+1); | |
| } | |
| } | |
| render(items, rows); | |
| // slider code for demo controls (not needed to create the responsive grid) | |
| // https://github.com/turban/d3.slider | |
| // ensure slider text is showing current render values | |
| d3.select('#slider-text-items').text(items); | |
| d3.select('#slider-text-rows').text(rows); | |
| // update items | |
| d3.select('#slider-items').call(d3.slider().value(items).min(5).max(50).on('slide', function(evt, value) { | |
| items = d3.round(value); // ensure whole number | |
| d3.select('#slider-text-items').text(items); // update the text to show value | |
| d3.selectAll('.rows').remove(); // remove all the rows | |
| rowId = 0; // ensure ID is starting at zero | |
| render(items, rows); // update with new amount of items | |
| })); | |
| // update users | |
| d3.select('#slider-rows').call(d3.slider().value(rows).min(1).max(5).on('slide', function(evt, value) { | |
| rows = d3.round(value); | |
| d3.select('#slider-text-rows').text(rows); | |
| d3.selectAll('.rows').remove(); | |
| rowId = 0; | |
| render(items, rows); // update with new rows | |
| })); | |
| })(); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3 | create</title> | |
| <meta name="author" content="Sundar Singh | eesur.com"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <!-- load pure css --> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css"> | |
| <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> | |
| <!--<![endif]--> | |
| <!-- any other css --> | |
| <link rel="stylesheet" type="text/css" href="https://rawgit.com/turban/d3.slider/master/d3.slider.css"> | |
| <style> | |
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400); | |
| body { | |
| background-color: #130C0E; | |
| padding: 20px; | |
| } | |
| p, text { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| } | |
| p { | |
| color: #7AC143; | |
| font-weight: 400; | |
| font-size: 16px; | |
| line-height: 1.5; | |
| letter-spacing: 1px; | |
| width: 700px; | |
| } | |
| text { | |
| fill: #eee; | |
| } | |
| #slider-items, #slider-rows { | |
| margin: 0 0 20px 0; | |
| max-width: 300px; | |
| } | |
| span { | |
| color: #FDBB30; | |
| font-size: 18px; | |
| letter-spacing: 3px; | |
| } | |
| a:link { | |
| color: #00B0DD; | |
| text-decoration: none; | |
| } | |
| a:visited { | |
| color: #00B0DD; | |
| } | |
| a:hover { | |
| color: #EE3124; | |
| } | |
| a:active { | |
| color: #00B0DD; | |
| } | |
| .d3-slider { | |
| border: 1px solid #7AC143; | |
| } | |
| .d3-slider-handle { | |
| border: none; | |
| background: #7AC143; | |
| } | |
| .d3-slider-handle:hover { | |
| border: 1px solid #7AC143; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <p>Move sliders to alter items and rows. Example uses D3 to produce <a href="http://purecss.io/grids/">Pure's responsive grid</a> programmatically.</p> | |
| <div class="pure-g"> | |
| <div class="pure-u-1 pure-u-md-1-3"> | |
| <p>Number of items: <span id="slider-text-items">9</span></p> | |
| <div id="slider-items"></div> | |
| </div> | |
| <div class="pure-u-1 pure-u-md-1-3"> | |
| <p>Number of rows: <span id="slider-text-rows">3</span></p> | |
| <div id="slider-rows"></div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- code for slider --> | |
| <script src="https://rawgit.com/turban/d3.slider/master/d3.slider.js"></script> | |
| <!-- d3 code to create elements --> | |
| <script src="d3_code_pure.js"></script> | |
| </body> | |
| </html> |
