"builder"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dlupoGorilla/pen/mAOPWL?depth=everything&order=popularity&page=4&q=Builder&show_forks=false" /> <style class="cp-pen-styles">@import 'https://fonts.googleapis.com/css?family=Montserrat'; html, body { font-family: "Montserrat"; margin: 0; padding: 0; width: 100%; height: 100%; background: #eee; color: #222222; overflow-x:hidden; } .main.column { display: flex; } .main.column .container { width: 30%; } .main.column .controls { width: 70%; } .main.column span.content { left: 15%; } .container { background-color: #88499c; padding: 5px; list-style-type: none; margin: 0; } .item { background-color: #f38630; margin: 10px; padding: 10px; color: white; min-width: 100px; } .item span { display: inline-block; background: white; height: 25px; width: 25px; line-height: 25px; border-radius: 100%; color: #f38630; text-align: center; margin: 0 0 10px 0; } /* Controls */ h3 { padding: 0 10px 10px 0; display: inline-block; margin: 0; border-bottom: 2px solid; } .left h3 { color: #88499c; border-color: #88499c; } .right h3 { color: #f38630; border-color: #f38630; } label { display: block; } label:before { content: ""; display: block; margin-top: 20px; clear: both; } input[type="text"] { display: block; margin-top: 5px; box-sizing: border-box; width: 100%; padding: 10px; } input[type="text"].number { width: 65px; display: inline-block; } #flex-control { display: flex; } .left, .right { width: 50%; box-sizing: border-box; padding: 20px; border: 1px solid #e8e8e8; } select { border-radius: 3px; box-sizing: border-box; background-color: white; height: 36px; line-height: 14px; padding: 10px; text-indent: .01em; vertical-align: baseline; width: 100%; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDMwIDYwIj48cGF0aCBmaWxsPSIjRjJFQkRFIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoMzB2NjBIMHoiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNBREE4OUUiIHN0cm9rZS1vcGFjaXR5PSIwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0uNSA2MFYwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMzMzMiIGQ9Ik0xNS42NzYgMzMuMDM3bDUuMTAyLTUuMTAzLS43MDctMS4wODYtNC40OSA0LjQ5Mi00LjQ5LTQuNDkyLS43MDIgMS4wODYgNS4xMDIgNS4xMDMuMDc1LjExNS4wMi0uMDIuMDIuMDJ6Ii8+PC9zdmc+) no-repeat 100% 45% white; margin-top: 5px; -webkit-appearance: none; } /* Code */ button { background: none repeat scroll 0 0 transparent; border: medium none; border-spacing: 0; font-weight: normal; line-height: 1.42rem; list-style: none outside none; margin: 0; padding: 0; text-align: left; text-decoration: none; text-indent: 0; font-size: 1.17em; padding: 10px; display: inline-block; margin: 0; border: 2px solid; border-color: #88499c; color: #88499c; cursor: pointer; font-family: "Montserrat"; margin-bottom: 2px; } button:focus { outline:0; } button:active { margin-top: 2px; } #code-container { position: relative; } #copy-to-clipboard { position: absolute; right: 20px; top: 20px; } #CSScode { background: #222222; min-height: 100px; color: #f38630; } code { display: block; } code:not(.default) { clear: both; padding: 20px; white-space: pre; word-break: normal; word-wrap: normal; } span.tooltip { display: block; position: relative; width: 100%; } span.icon { float: right; cursor: pointer; display: inline-block; height: 25px; width: 25px; line-height: 25px; border-radius: 100%; text-align: center; border: 2px solid #cecece; color: #cecece; margin: -5px 0 5px 0; } span.content { z-index: 1; position: absolute; display: none; left: 50%; right: 35px; background: #fff; padding: 10px; border: 1px solid #222222; font-weight: normal; font-size: 14px; } span.icon:hover + span.content { display: block; } #extra > * { margin: 25px; } #extra-container { display:flex; margin: 0 15px; } #extra-container > div { padding: 0 10px; min-width: 33%; } #extra-container p { font-size: 14px; border: 1px solid #222222; padding: 10px; background: white; } #source { width: 100%; text-align: center; } </style></head><body> <div class="felx-box-builder"> <div class="slides"> <section class="main column"> <ul class="container"> <li class="item"><span>1</span></li> <li class="item"><span>2</span><br>Sample Text</li> <li class="item"><span>3</span><br>More sample text to test alignment</li> <li class="item"><span>4</span><br>A lot more sample text to test alignment and flex stretch. I like peanut butter and jelly sandwitches. All jokes aside, peanut allergies are a serious and growing health problem in the Western world, affecting millions of kids and their families.</li> <li class="item"><span>5</span><br>Some sample text</li> </ul> <div class="controls"> <form action="" id="flex-control"> <div class="left"> <h3>Container</h3> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.</span> </span> Display </label> <select name="display" id="display"> <option value="">null (block)</option> <option value="flex">flex</option> <option value="inline-flex">inline-flex</option> </select> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.</span> </span> Flex direction </label> <select name="flex-direction" id="flex-direction"> <option value="">null</option> <option value="row">row (default)</option> <option value="row-reverse">row-reverse</option> <option value="column">column</option> <option value="column-reverse">column-reverse</option> </select> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.</span> </span> Flex Wrap </label> <select name="flex-wrap" id="flex-wrap"> <option value="">null</option> <option value="nowrap">nowrap (default)</option> <option value="wrap">wrap</option> <option value="wrap-reverse">wrap-reverse</option> </select> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</span> </span> Justify Content </label> <select name="justify-content" id="justify-content"> <option value="">null</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> </select> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).</span> </span> Align Items (cross axis) </label> <select name="align-items" id="align-items"> <option value="">null</option> <option value="stretch">stretch (default)</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> </select> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. <b>Note:</b> this property has no effect when there is only one line of flex items.</span> </span> Align Content </label> <select name="align-content" id="align-content"> <option value="">null</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="stretch">stretch</option> </select> </div> <div class="right"> <h3>Items</h3> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.<br><br>Please see the align-items explanation to understand the available values.</span> </span> Align Self </label> <select name="itemx_1_align-self" id="align-self"> <option value="">Item 1</option> <option value="auto">auto</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> </select> <select name="itemx_2_align-self" id="align-self"> <option value="">Item 2</option> <option value="auto">auto</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> </select> <select name="itemx_3_align-self" id="align-self"> <option value="">Item 3</option> <option value="auto">auto</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> </select> <select name="itemx_4_align-self" id="align-self"> <option value="">Item 4</option> <option value="auto">auto</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> </select> <select name="itemx_5_align-self" id="align-self"> <option value="">Item 5</option> <option value="auto">auto</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> </select> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.</span> </span> Order </label> <input type="text" class="number" name="itemx_1_order" value="" placeholder="item 1"> <input type="text" class="number" name="itemx_2_order" value="" placeholder="item 2"> <input type="text" class="number" name="itemx_3_order" value="" placeholder="item 3"> <input type="text" class="number" name="itemx_4_order" value="" placeholder="item 4"> <input type="text" class="number" name="itemx_5_order" value="" placeholder="item 5"> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.<br><br>If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).</span> </span> Flex Grow </label> <input type="text" class="number" name="itemx_0_flex-grow" value="" placeholder="All"> <input type="text" class="number" name="itemx_1_flex-grow" value="" placeholder="item 1"> <input type="text" class="number" name="itemx_2_flex-grow" value="" placeholder="item 2"> <input type="text" class="number" name="itemx_3_flex-grow" value="" placeholder="item 3"> <input type="text" class="number" name="itemx_4_flex-grow" value="" placeholder="item 4"> <input type="text" class="number" name="itemx_5_flex-grow" value="" placeholder="item 5"> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This defines the ability for a flex item to shrink if necessary.</span> </span> Shrink </label> <input type="text" class="number" name="itemx_0_flex-shrink" value="" placeholder="All"> <input type="text" class="number" name="itemx_1_flex-shrink" value="" placeholder="item 1"> <input type="text" class="number" name="itemx_2_flex-shrink" value="" placeholder="item 2"> <input type="text" class="number" name="itemx_3_flex-shrink" value="" placeholder="item 3"> <input type="text" class="number" name="itemx_4_flex-shrink" value="" placeholder="item 4"> <input type="text" class="number" name="itemx_5_flex-shrink" value="" placeholder="item 5"> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.<br><br>If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value.</span> </span> Flex Basis </label> <input type="text" class="number" name="itemx_0_flex-basis" value="" placeholder="All"> <input type="text" class="number" name="itemx_1_flex-basis" value="" placeholder="item 1"> <input type="text" class="number" name="itemx_2_flex-basis" value="" placeholder="item 2"> <input type="text" class="number" name="itemx_3_flex-basis" value="" placeholder="item 3"> <input type="text" class="number" name="itemx_4_flex-basis" value="" placeholder="item 4"> <input type="text" class="number" name="itemx_5_flex-basis" value="" placeholder="item 5"> <label> <span class="tooltip"> <span class="icon">?</span> <span class="content">It is recommended that you use this shorthand property rather than set the individual properties. The short hand sets the other values intelligently</span> </span> Flex </label> <code class="default">[ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ] or 'none'</code> <input type="text" class="number" name="itemx_0_flex" value="" placeholder="All"> <input type="text" class="number" name="itemx_2_flex" value="" placeholder="item 1"> <input type="text" class="number" name="itemx_2_flex" value="" placeholder="item 2"> <input type="text" class="number" name="itemx_3_flex" value="" placeholder="item 3"> <input type="text" class="number" name="itemx_4_flex" value="" placeholder="item 4"> <input type="text" class="number" name="itemx_5_flex" value="" placeholder="item 5"> </div> </form> </div> </section> </div> </div> <style id="flex-styles"> </style> <section id="code-container"> <button id="copy-to-clipboard">Copy to Clipboard</button> <code id="CSScode"> /* CSS will appear here */ </code> </section> <section id="extra"> <h2>Other Properties</h2> <div id="extra-container"> <div> <h3>Container</h3> <h4>flex-flow</h4> <p>This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap.</p> </div> <div> <h3>Item</h3> <h4>flex</h4> <p>This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.</p> </div> </div> <div id="source"> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"><button id="">Info Source: css-tricks.com</button></a> </div> <div> <small>Application: © Gorilla Group 2016</small> </div> </section> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script > !function($) { /* Switch between demo on top/on left */ $(function(){ $('select').on('change', function(){ if ($('#display option:selected').text() === 'null (block)'){ $('.main').addClass('column'); } else if ($('#flex-direction option:selected').text() === 'column' || $('#flex-direction option:selected').text() === 'column-reverse') { $('.main').addClass('column'); } else { $('.main').removeClass('column'); } }); }); /* CSS generation */ $(function(){ $('select, input').on('change', function(){ var containerCSS = ".container { \n" var itemsCSS = ".item { \n" var additionalCSS = []; var vals = decodeURI($('form').serialize()); var arrVals = vals.split('&'); for (var i = arrVals.length - 1; i >= 0; i--) {if (window.CP.shouldStopExecution(1)){break;} var arrValsProp = arrVals[i].split('='); if (arrValsProp[1] != "") { arrValsProp[1] = arrValsProp[1].split("+").join(" "); //cleanup if (arrValsProp[0].indexOf('itemx') < 0) { containerCSS += "\t" + arrValsProp[0] + ": " + arrValsProp[1] + "; \n"; } else { itemProps = arrValsProp[0].split("_"); if (itemProps[1] == "0") { itemsCSS += "\t" + itemProps[2] + ": " + arrValsProp[1] + "; \n"; } else { if (typeof additionalCSS[itemProps[1]-1] == "undefined" || additionalCSS[itemProps[1]] == "") { additionalCSS[itemProps[1]-1] = ".item:nth-child(" + itemProps[1] + ") {\n"; additionalCSS[itemProps[1]-1] += "\t" + itemProps[2] + ": " + arrValsProp[1] + ";\n"; } else { additionalCSS[itemProps[1]-1] += "\t" + itemProps[2] + ": " + arrValsProp[1] + ";\n"; } } } } } window.CP.exitedLoop(1); var additionalCSS_string = ""; for (var i = 0; i <= 10; i++) {if (window.CP.shouldStopExecution(2)){break;} //i is dynamic so we need to surpass length and check if defined if (typeof additionalCSS[i] != "undefined") { additionalCSS_string += additionalCSS[i] + "\n} \n\n"; } } window.CP.exitedLoop(2); containerCSS += "}\n\n" itemsCSS += "}\n\n" $("#flex-styles, #CSScode").html(containerCSS + itemsCSS + additionalCSS_string); }); }); /* Copy to Clipboard */ $(function(){ $('#copy-to-clipboard').click(function(){ copyToClipboard($('#CSScode')); }); function copyToClipboard($source) { var hiddenID = 'hidden-copy-text-input'; // create temporary hidden form element if (!$('#'+hiddenID).length) { $('body').append('<textarea style= "left: -8888px; position: absolute;" id="' + hiddenID + '">'); } var $hidden = $('#'+hiddenID); // put source text into hidden input $hidden.val($source.text()).select(); // copy from hidden input var success; try { success = document.execCommand("copy"); } catch(e) { success = false; } return success; } }); }(window.jQuery); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: