D3 Examples - d3 | Pure css grid programmatically

d3 | Pure css grid programmatically

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>d3 | create</title> 
    <meta name="author" content="Sundar Singh | eesur.com">
​
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    
    <!-- load pure css -->
    <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="https://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(https://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="https://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://cdn.jsdelivr.net/gh/turban/d3.slider/d3.slider.js"></script>
<!-- d3 code to create elements -->
<script src="d3_code_pure.js"></script> 
​
</body>
</html>
    