├── LICENSE
├── README.md
├── css
    ├── fibonacci.css
    ├── reset.css
    └── screen.css
├── img
    ├── CSSFile.png
    ├── HTMLFile.png
    ├── addhorizontal.png
    ├── addvertical.png
    ├── expand.png
    ├── fibonacci_icon.png
    ├── fibonacci_icon@2x.png
    ├── fibonacci_icon_blue.png
    ├── fibonacci_icon_blue@2x.png
    ├── info.png
    ├── options.png
    ├── remove.png
    ├── shrink.png
    ├── splithorizontal.png
    ├── splitvertical.png
    └── trash.png
├── index.html
└── js
    ├── autoprefixer.js
    ├── fibonacci.js
    └── jquery.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Max Steenbergen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![alt text](https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/master/img/fibonacci_icon_blue@2x.png "Fibonacci")
 2 | 
 3 | Fibonacci
 4 | =========
 5 | ##Flexbox page layout composer
 6 | 
 7 | Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts using Flexbox, without having to learn HTML or CSS. Live demo [here.](http://maxsteenbergen.com/fibonacci/)  
 8 | Fibonacci starts with a blank ````<div>```` , which you can then split to your heart's content. It generates both the HTML and CSS needed to recreate the layout in your own pages.
 9 | 
10 | After you've made your horizontal or vertical split, you can then add a new sibling, shrink or expand, give it a fixed width/height, remove or split it again. Remember to add a unit when you enter a fixed width or height!
11 | Once you're happy with the layout, hit the export icons to copy the generated code and paste it wherever you need it in your own code.
12 | 
13 | Tiny sidenote: Fibonacci is mostly a little sideproject still under development and by no means perfect or bug free. Contributions are highly welcome :)
14 | 
15 | ### Notes
16 | **Q: _How is the/a Fibonacci sequence used in this tool?_**
17 | **A:** It absolutely isn’t. Nothing in the code, as you can see for yourself, uses any kind of Fibonacci sequence. Nuh-uh.
18 | 
19 | **Q: _Then why is it named Fibonacci?_**
20 | **A:** There’s 1 reason, and 1 reason only. While testing the tool, I divided the main container into a Fibonacci-esque structure. That’s it. The structured reminded me of Fibonacci, I liked the ring of it, I called the tool Fibonacci. Fin.
21 | 
22 | **Q: _The main ````#container```` div is 100% * 600px. What's up with that?_**
23 | **A:** The beauty of Flexbox is that it's flexible. Whatever the dimensions of your container or even the viewport, Flexbox adapts automatically. It's completely fluid. So all you need to do is to give the ````#container```` div the dimensions you need, and all child div's made with Fibonacci will resize accordingly.
24 | 
25 | **Q: _Does Fibonacci only split div's in half?_**
26 | **A:** Only as a starting point. In the Options window, you'll find icons that allow you to grow or shrink each div' with increments of 50%. This is standard in the Flexbox spec.
27 | 
28 | **Q: _What if I want 3 or more equal div's?_**
29 | **A:** Simple. First split the ````#container```` div either horizontally or vertically, so you get two equal div's. Then, instead of splitting each div' in half again, hit the _'Add Sibling'_ icon for as many times as you need.
30 | 
31 | 
32 | **Q: _Can I mix Flexbox with fixed dimensions?_**
33 | **A:** Absolutely. Once you've made a first split, you can enter a fixed dimension in the Options window. **Be sure to include a unit!** Fibonacci also allows the same method for a div's parent.
34 | Note however, that a div's parent defines what dimension you can assign a fixed width to. Fibonacci is quite opinionated and so by default stretches all div's to fill their respective parent. Small example: if you've split a column in 2, and want to give one of those 2 div's a fixed dimension, you can only enter a fixed height. For a fixed width in this example, Fibonacci provides a second input to edit the parent's dimension.
35 | 


--------------------------------------------------------------------------------
/css/fibonacci.css:
--------------------------------------------------------------------------------
 1 | #flexcanvas{
 2 |   width: 100%;
 3 |   height: 600px !important;
 4 | }
 5 | 
 6 | .rowParent, .columnParent{
 7 |   display: -webkit-box;
 8 |   display: -ms-flexbox;
 9 |   display: -webkit-flex;
10 |   display: flex;
11 |   -webkit-box-direction: normal;
12 |   -webkit-box-orient: horizontal;
13 |   -webkit-flex-direction: row;
14 |   -ms-flex-direction: row;
15 |   flex-direction: row;
16 |   -webkit-flex-wrap: nowrap;
17 |   -ms-flex-wrap: nowrap;
18 |   flex-wrap: nowrap;
19 |   -webkit-box-pack: start;
20 |   -webkit-justify-content: flex-start;
21 |   -ms-flex-pack: start;
22 |   justify-content: flex-start;
23 |   -webkit-align-content: stretch;
24 |   -ms-flex-line-pack: stretch;
25 |   align-content: stretch;
26 |   -webkit-box-align: stretch;
27 |   -webkit-align-items: stretch;
28 |   -ms-flex-align: stretch;
29 |   align-items: stretch;
30 | }
31 | 
32 | .columnParent{
33 |   -webkit-box-orient: vertical;
34 |   -webkit-flex-direction: column;
35 |   -ms-flex-direction: column;
36 |   flex-direction: column;
37 | }
38 | 
39 | .flexChild{
40 |   -webkit-box-flex: 1;
41 |   -webkit-flex: 1;
42 |   -ms-flex: 1;
43 |   flex: 1;
44 |   -webkit-align-self: auto;
45 |   -ms-flex-item-align: auto;
46 |   align-self: auto;
47 | }
48 | 


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | html5doctor.com Reset Stylesheet
  3 | v1.6.1
  4 | Last Updated: 2010-09-17
  5 | Author: Richard Clark - http://richclarkdesign.com
  6 | Twitter: @rich_clark
  7 | */
  8 | 
  9 | html, body, div, span, object, iframe,
 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 11 | abbr, address, cite, code,
 12 | del, dfn, em, img, ins, kbd, q, samp,
 13 | small, strong, sub, sup, var,
 14 | b, i,
 15 | dl, dt, dd, ol, ul, li,
 16 | fieldset, form, label, legend,
 17 | table, caption, tbody, tfoot, thead, tr, th, td,
 18 | article, aside, canvas, details, figcaption, figure,
 19 | footer, header, hgroup, menu, nav, section, summary,
 20 | time, mark, audio, video {
 21 |     margin:0;
 22 |     padding:0;
 23 |     border:0;
 24 |     outline:0;
 25 |     font-size:100%;
 26 |     vertical-align:baseline;
 27 |     background:transparent;
 28 | }
 29 | 
 30 | body {
 31 |     line-height:1;
 32 | }
 33 | 
 34 | article,aside,details,figcaption,figure,
 35 | footer,header,hgroup,menu,nav,section {
 36 |     display:block;
 37 | }
 38 | 
 39 | nav ul {
 40 |     list-style:none;
 41 | }
 42 | 
 43 | blockquote, q {
 44 |     quotes:none;
 45 | }
 46 | 
 47 | blockquote:before, blockquote:after,
 48 | q:before, q:after {
 49 |     content:'';
 50 |     content:none;
 51 | }
 52 | 
 53 | a {
 54 |     margin:0;
 55 |     padding:0;
 56 |     font-size:100%;
 57 |     vertical-align:baseline;
 58 |     background:transparent;
 59 | }
 60 | 
 61 | /* change colours to suit your needs */
 62 | ins {
 63 |     background-color:#ff9;
 64 |     color:#000;
 65 |     text-decoration:none;
 66 | }
 67 | 
 68 | /* change colours to suit your needs */
 69 | mark {
 70 |     background-color:#ff9;
 71 |     color:#000;
 72 |     font-style:italic;
 73 |     font-weight:bold;
 74 | }
 75 | 
 76 | del {
 77 |     text-decoration: line-through;
 78 | }
 79 | 
 80 | abbr[title], dfn[title] {
 81 |     border-bottom:1px dotted;
 82 |     cursor:help;
 83 | }
 84 | 
 85 | table {
 86 |     border-collapse:collapse;
 87 |     border-spacing:0;
 88 | }
 89 | 
 90 | /* change border colour to suit your needs */
 91 | hr {
 92 |     display:block;
 93 |     height:1px;
 94 |     border:0;
 95 |     border-top:1px solid #cccccc;
 96 |     margin:1em 0;
 97 |     padding:0;
 98 | }
 99 | 
100 | input, select {
101 |     vertical-align:middle;
102 | }


--------------------------------------------------------------------------------
/css/screen.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |   background-image: -o-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
  3 |   background-image: -moz-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
  4 |   background-image: -webkit-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
  5 |   background-image: -ms-linear-gradient(45deg, #1A658D 0%, #6CBFDA 100%);
  6 |   background-image: linear-gradient(135deg, #1A658D 0%, #6CBFDA 100%);
  7 |   background-attachment: fixed;
  8 |   text-align: center;
  9 | }
 10 | 
 11 | #header{
 12 |   margin: 0 auto;
 13 |   width: 311px;
 14 |   height: 80px;
 15 |   background-image: url( '../img/fibonacci_icon.png' );
 16 |   background-repeat: no-repeat;
 17 |   background-position: center left;
 18 |   background-size: contain;
 19 | }
 20 | 
 21 | h1, h2, span.action{
 22 |   font-family: Avenir, Helvetica, Arial, sans-serif;
 23 |   color: hsla(200,100%,90%,1);
 24 |   text-align: left;
 25 |   font-size: 2.5em;
 26 |   margin-top: 50px;
 27 |   padding-left: 90px;
 28 |   padding-top: 10px
 29 | }
 30 | h2{
 31 |   font-size: 1.6em;
 32 |   font-weight: normal;
 33 |   margin-top: -10px
 34 | }
 35 | span.action{
 36 |   padding: 0;
 37 |   font-size: 1em;
 38 |   margin: 13px;
 39 | }
 40 | div{
 41 |   outline: 1px solid hsla(200,100%,90%,0.2);
 42 |   background-color: hsla(200,100%,1%,0.1);
 43 | }
 44 | div.selected{
 45 |   background-color: hsla(0, 0%, 100%, 0.75);
 46 | }
 47 | 
 48 | #flexcanvas, #codeExportTextarea{
 49 |   width: 100%;
 50 |   height: 600px !important;
 51 |   position: absolute;
 52 |   top: 180px;
 53 | }
 54 | #flexcanvas div{
 55 |   min-height: 10px;
 56 |   min-width: 10px;
 57 | }
 58 | #codeExportTextarea{
 59 |   box-sizing: border-box;
 60 |   resize: none;
 61 |   border: none;
 62 |   background-color: hsla(200,100%,1%,0.6);
 63 |   padding: 50px;
 64 |   font-family: Courier;
 65 |   font-size: 16px;
 66 |   color: hsla(200,100%,90%,1);
 67 |   display: none;
 68 |   outline: none;
 69 |   overflow-y: scroll;
 70 |   text-align: left; 
 71 |   white-space: pre-wrap;
 72 | }
 73 | #codeExportTextarea p{
 74 |   width: 600px;
 75 |   margin: 0 auto;
 76 |   margin-bottom: 15px;
 77 | }
 78 | 
 79 | #triggerHTMLCode, #triggerCSSCode, #triggerInfo{
 80 |   margin: 0 auto;
 81 |   margin-top: 675px;
 82 |   padding: 0 25px 0 25px;
 83 |   margin-bottom: 10px;
 84 |   opacity: 0.6
 85 | }
 86 | #splitControls{
 87 |   position: absolute;
 88 |   outline: none;
 89 |   background-color: transparent;
 90 | }
 91 | #splitControls img{
 92 |   margin: 15px 5px;
 93 |   opacity: 0.7;
 94 |   cursor: pointer;
 95 | }
 96 | 
 97 | #optionsBar{
 98 |   box-sizing: border-box;
 99 |   -webkit-box-flex: 0 0 auto;
100 |   -webkit-flex: 0 0 auto;
101 |   -ms-flex: 0 0 auto;
102 |   flex: 0 0 auto;
103 |   width: 200px;
104 |   outline: 1px solid hsla(100, 100%, 100%, 0.6);
105 |   box-shadow: 0 0 10px rgba(0,0,0,0.3);
106 |   padding: 20px;
107 |   background-color: hsla(100, 100%, 100%, 0.5);
108 |   text-align: left;
109 | }
110 | 
111 | #optionsBar img{
112 |   cursor: pointer;
113 |   margin: 5px;
114 |   margin-bottom: 15px;
115 | }
116 | 
117 | ::-webkit-input-placeholder { color:hsla(200,100%,90%,1); }
118 | ::-moz-placeholder { color:hsla(200,100%,90%,1); } /* firefox 19+ */
119 | :-ms-input-placeholder { color:hsla(200,100%,90%,1); } /* ie */
120 | input:-moz-placeholder { color:hsla(200,100%,90%,1); }
121 | 
122 | #optionsBar label{
123 |   font-family: Avenir;
124 |   font-size: 1.05em;
125 |   font-weight: bold;
126 |   color: hsla(200,100%,100%,0.8);
127 |   text-shadow: 0 -1px hsla(200,100%,0%,0.3);
128 | }
129 | #optionsBar select{
130 |   width: 160px;
131 |   margin-bottom: 15px;
132 | }
133 | #optionsBar input{
134 |   box-sizing: border-box;
135 |   width: 160px;
136 |   height: 30px;
137 |   -webkit-appearance: none;
138 |   appearance: none;
139 |   border: none;
140 |   border-bottom: 2px solid hsla(200,100%,90%,1);
141 |   border-right: 2px solid hsla(200,100%,90%,1);
142 |   padding-right: 5px;
143 |   background: none;
144 |   font-family: Avenir;
145 |   color: hsla(200,100%,10%,1);
146 |   font-size: 1em;
147 |   text-align: right;
148 |   outline: none;
149 | }
150 | 
151 | #optionsBar button{
152 |   width: 160px;
153 |   margin-bottom: 15px;
154 |   font-family: Avenir;
155 |   font-size: 1.05em;
156 |   font-weight: bold;
157 |   color: hsla(200,100%,100%,0.8);
158 |   text-shadow: 0 -1px hsla(200,100%,0%,0.3);
159 |   padding: 5px 15px;
160 |   -webkit-appearance: none;
161 |   appearance: none;
162 |   border: none;
163 |   outline: none;
164 |   cursor: pointer;
165 |   box-shadow: 0 0 0 1px hsla(100,100%,100%,0.2) inset, 0 0 0 1px hsla(200,100%,0%,0.1);
166 |   border-radius: 5px;
167 |   background-image: -o-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
168 |   background-image: -moz-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
169 |   background-image: -webkit-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
170 |   background-image: -ms-linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
171 |   background-image: linear-gradient(0deg, #1A658D 0%, #6CBFDA 100%);
172 | }
173 | 
174 | .disabled{
175 |   opacity: 0.4;
176 |   pointer-events: none;
177 | }
178 | 
179 | 
180 | footer{
181 |   box-sizing: border-box;
182 |   text-align: center;
183 |   margin-top: 50px;
184 |   width: 100%;
185 |   height: 40px;
186 |   padding: 15px;
187 |   background-color: hsla(200,100%,90%,0.3);
188 |   outline: 1px solid hsla(200,100%,90%,0.6);
189 |   font-family: Avenir;
190 |   color: hsla(200,100%,100%,0.8);
191 | }
192 | 
193 | footer a{
194 |   font-weight: bold;
195 |   color: hsla(200,100%,100%,1);
196 |   text-decoration: none;
197 | }


--------------------------------------------------------------------------------
/img/CSSFile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/CSSFile.png


--------------------------------------------------------------------------------
/img/HTMLFile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/HTMLFile.png


--------------------------------------------------------------------------------
/img/addhorizontal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/addhorizontal.png


--------------------------------------------------------------------------------
/img/addvertical.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/addvertical.png


--------------------------------------------------------------------------------
/img/expand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/expand.png


--------------------------------------------------------------------------------
/img/fibonacci_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/fibonacci_icon.png


--------------------------------------------------------------------------------
/img/fibonacci_icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/fibonacci_icon@2x.png


--------------------------------------------------------------------------------
/img/fibonacci_icon_blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/fibonacci_icon_blue.png


--------------------------------------------------------------------------------
/img/fibonacci_icon_blue@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/fibonacci_icon_blue@2x.png


--------------------------------------------------------------------------------
/img/info.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/info.png


--------------------------------------------------------------------------------
/img/options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/options.png


--------------------------------------------------------------------------------
/img/remove.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/remove.png


--------------------------------------------------------------------------------
/img/shrink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/shrink.png


--------------------------------------------------------------------------------
/img/splithorizontal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/splithorizontal.png


--------------------------------------------------------------------------------
/img/splitvertical.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/splitvertical.png


--------------------------------------------------------------------------------
/img/trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxsteenbergen/Fibonacci/abdb26ea9e6d961fb529823844718ee33eb8637f/img/trash.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <link rel="stylesheet" type="text/css" href="css/reset.css">
 5 |   <link rel="stylesheet" type="text/css" href="css/screen.css">
 6 |   <link rel="stylesheet" type="text/css" href="css/fibonacci.css">
 7 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">
 8 |   <title>Fibonacci &ndash; Flexbox Composer</title>
 9 | </head>
10 | <body>
11 |   <header id="header" class="">
12 |     <h1>Fibonacci</h1>
13 |     <h2>Flexbox Composer</h2>
14 |   </header>
15 |   
16 |   <div id='flexcanvas' class='rowParent'>
17 |   <div id="optionsBar" class="disabled flexChild">
18 |     <img src="img/expand.png" id="growDivButton" alt="Expand div" title="Expand div"></img>
19 |     <img src="img/shrink.png" id="shrinkDivButton" alt="Shrink div" title="Shrink div"></img>
20 |     <img id="removeDivButton" src="img/trash.png" alt="Delete div" title="Delete div"></img>
21 | 
22 | 
23 |     <label for="justifyButton">Justification: </label>
24 |     <select id="justifyButton" alt="Set justification within parent" title="Set justification within parent">
25 |       <option val="flex-start">flex-start</option>
26 |       <option val="flex-end">flex-end</option>
27 |       <option val="center">center</option>
28 |       <option val="space-between">space-between</option>
29 |       <option val="space-around">space-around</option>
30 |     </select>
31 | 
32 |     <label for="allAlignmentButton">Align within parent: </label>
33 |     <select id="allAlignmentButton" alt="Set alignment for all in parent" title="Set alignment for all in parent">
34 |       <option val="flex-start">flex-start</option>
35 |       <option val="flex-end">flex-end</option>
36 |       <option val="center">center</option>
37 |       <option val="baseline">baseline</option>
38 |       <option val="stretch">stretch</option>
39 |     </select>
40 | 
41 |     <label for="singleAlignmentButton">Align single: </label>
42 |     <select id="singleAlignmentButton" alt="Set single alignment" title="Set single alignment">
43 |       <option val="auto">auto</option>
44 |       <option val="flex-start">flex-start</option>
45 |       <option val="flex-end">flex-end</option>
46 |       <option val="center">center</option>
47 |       <option val="baseline">baseline</option>
48 |       <option val="stretch">stretch</option>
49 |     </select>
50 |     
51 |     <input id="widthInput" type="text" placeholder="Fixed width">
52 |     <button id="enterWidthButton" title="width">Enter width</button>
53 |     <input id="heightInput" type="text" placeholder="Fixed height">
54 |     <button id="enterHeightButton" title="height">Enter height</button>
55 | 
56 | 
57 |     <input class='disabled' id="parentDimensionSizeInput" placeholder="Parent's dimension" type="text">
58 |     <button class='disabled' id="enterParentDimensionButton">Enter</button><br>
59 | 
60 |   </div>
61 |   <div id='container' class="flexChild">
62 |   </div>
63 | </div>
64 | <pre><code id='codeExportTextarea'></code></pre>
65 |   <img id="triggerHTMLCode" src="img/HTMLFile.png" alt="Export HTML">
66 |   <img id="triggerCSSCode" src="img/CSSFile.png" alt="Export CSS">
67 |   <img id="triggerInfo" src="img/info.png" alt="Export CSS">
68 |   <br>
69 |   <span class='action'>Export HTML</span>
70 |   <span class='action'>Export CSS</span>
71 |   <span class='action'>About Fibonacci</span>
72 | 
73 |   <footer>
74 |     A project by <a href='https://maxsteenbergen.com'>Max Steenbergen</a>
75 |   </footer>
76 | 
77 |   <a href="https://github.com/maxsteenbergen/Fibonacci"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
78 | 
79 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
80 |   <script src="js/autoprefixer.js" type="text/javascript"></script>
81 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
82 |   <script src="js/fibonacci.js" type="text/javascript"></script>
83 | </body>
84 | </html>
85 | 


--------------------------------------------------------------------------------
/js/fibonacci.js:
--------------------------------------------------------------------------------
  1 | $(document).ready( function(){
  2 | 
  3 |   var CSSOverrides = {}
  4 | 
  5 |   function getUnstyledMarkup(cssCode){
  6 |     var clone = $('#container').clone(),
  7 |         elements = clone.find('div')
  8 |     for (var i = elements.length - 1; i >= 0; i--) {
  9 |       elements[i].removeAttribute('style')
 10 |     }
 11 |     
 12 |     var returnString = $(clone)[0].outerHTML.toString()
 13 |     returnString = returnString.replace(regex = new RegExp('</div></div>',"g"), '</div>\n</div>')
 14 |                                 .replace(/\</g,'&lt;')
 15 |                                 .replace(/\>/g,'&gt;')
 16 | 
 17 |     return returnString
 18 |     clone.remove()
 19 |   }
 20 | 
 21 |   function insertIndentation (distanceToContainer){
 22 |     var indentation = '\n'
 23 |     for (var i = 0; i <= distanceToContainer; i++){
 24 |       (function(){
 25 |         indentation += '\t'
 26 |       }(i))
 27 |     }
 28 |     return indentation
 29 |   }
 30 | 
 31 |   $( '#triggerHTMLCode' ).on( 'click', function(){
 32 |     if( $(this).css('opacity') == 1 ){
 33 |       $( '#codeExportTextarea' ).css( 'display', 'none' )
 34 |       $(this).css( 'opacity', 0.6)
 35 |     }
 36 |     else {
 37 |       $( 'img' ).css( 'opacity', 0.6)
 38 |       $(this).css( 'opacity', 1)
 39 |       $( '#codeExportTextarea' ).empty()
 40 |                                 .css('display', 'block')
 41 |                                 .removeClass()
 42 |                                 .addClass('html')
 43 |                                 .append(getUnstyledMarkup())
 44 |       hljs.configure({
 45 |         tabReplace: '  '
 46 |       })
 47 |       hljs.highlightBlock($('#codeExportTextarea')[0])
 48 |     }
 49 |   })
 50 | 
 51 |   $( '#triggerCSSCode' ).on( 'click', function(){
 52 |     if( $(this).css('opacity') == 1 ){
 53 |       $( '#codeExportTextarea' ).css( 'display', 'none' )
 54 |       $(this).css( 'opacity', 0.6)
 55 |     }
 56 |     else {
 57 |       $( 'img' ).css( 'opacity', 0.6)
 58 |       $(this).css( 'opacity', 1)
 59 |       $.get( 'css/fibonacci.css' ).then( function( cssCode, status, xhr ){
 60 |         var overrides = ''
 61 |         for (var i = Object.keys(CSSOverrides).length - 1; i >= 0; i--) {
 62 |           singleOverride = autoprefixer({cascade: false}).process( '#' + Object.keys(CSSOverrides)[i] + '{\n ' + CSSOverrides[Object.keys(CSSOverrides)[i]] + '\n}').css
 63 |           overrides += '\n\n' + singleOverride + '\n'
 64 |         }        
 65 |         
 66 |         $( '#codeExportTextarea' ).empty()
 67 |                                   .css('display', 'block')
 68 |                                   .removeClass().addClass('css')
 69 |                                   .append( cssCode + overrides )
 70 |         hljs.highlightBlock($('#codeExportTextarea')[0])
 71 |       })
 72 |     }
 73 |   })
 74 | 
 75 |   $( '#triggerInfo' ).on( 'click', function(){
 76 |     if( $(this).css('opacity') == 1 ){
 77 |       $( '#codeExportTextarea' ).css( 'display', 'none' )
 78 |       $(this).css( 'opacity', 0.6)
 79 |     }
 80 |     else {
 81 |       $( 'img' ).css( 'opacity', 0.6)
 82 |       $(this).css( 'opacity', 1)
 83 | 
 84 |       var code =
 85 |       '<p>Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts using Flexbox, without having to learn HTML or CSS.</p>' +
 86 |       '<p>Fibonacci starts with a blank &lt;div&gt;, which you can then split to your heart\'s content. It generates both the HTML and CSS needed to recreate the layout in your own pages. ' +
 87 |       'After you\'ve made your horizontal or vertical split, you can then add a new sibling, shrink or expand, give it a fixed width/height, remove or split it again.<br>' +
 88 |       'Remember to add a unit when you enter a fixed width or height!</p>' +
 89 |       '<p>Once you\'re happy with the layout, hit the export icons to copy the generated code and paste it wherever you need it in your own code.</p>' +
 90 |       '<p>Fibonacci does *not* use the Fibonacci sequence in any way, despite reports to the contrary. The reasoning behind the name  is simple. While testing the tool, I divided the main container into a Fibonacci-esque structure. That\'s it. The structured reminded me of Fibonacci, I liked the ring of it, I called the tool Fibonacci. The End.</p>' +
 91 |       '<p>Tiny sidenote: Fibonacci is mostly a little sideproject and by no means perfect or bug free. Contributions are highly welcome :)</p>'
 92 | 
 93 |       $( '#codeExportTextarea' ).empty()
 94 |                                 .css('display', 'block')
 95 |                                 .removeClass()
 96 |                                 .append( code )
 97 |     }
 98 |   })
 99 | 
100 |   function addSplitControls( srcDiv ){
101 |     var parent = $(srcDiv).parent()
102 |     if( $( '#splitControls' ).length == 0 && $( '#optionsModal' ).length == 0){
103 |       $( srcDiv ).append( '<div id="splitControls">' )
104 |       $( '#splitControls' ).append( '<img id="splitVerticalIcon" data-layout-action="splitvertical" src="img/splitvertical.png" alt="Split vertically">' )
105 |                             .append( '<img id="splitHorizontalIcon" data-layout-action="splithorizontal" src="img/splithorizontal.png" alt="Split horizontally" title="Split horizontally">' )
106 | 
107 |       if( parent.hasClass( 'columnParent' ))
108 |         $( '#splitControls' ).append( '<img id="addHorizontalIcon" data-layout-action="addhorizontal" src="img/addhorizontal.png" alt="Add horizontal sibling" title="Add horizontal sibling">' )
109 | 
110 |       if( parent.hasClass( 'rowParent' ))
111 |         $( '#splitControls' ).append( '<img id="addVerticalIcon" data-layout-action="addvertical" src="img/addvertical.png" alt="Add vertical sibling" title="Add vertical sibling">' )
112 | 
113 |     }
114 |   }
115 | 
116 | 
117 |   $( 'body' ).on( 'mouseover', '#container, #container div', function(e){
118 |     addSplitControls(this)
119 |   })
120 | 
121 |   $( 'body' ).on( 'click', '#container, #container div', function(e){
122 |     e.stopPropagation()
123 |     if( $(this).hasClass('selected') ){
124 |       $(this).removeClass('selected')
125 |       $("#optionsBar").addClass('disabled')
126 |     }
127 |     else {
128 |       $('div.selected').removeClass('selected')
129 |       $(this).addClass('selected')
130 |       $('#optionsBar').removeClass('disabled')
131 | 
132 |       if( $('div.selected').parent().attr('id') != 'container' ){
133 |         $("#parentDimensionSizeInput, #enterParentDimensionButton ").removeClass('disabled')
134 |         var parentDimension = $('div.selected').parent().hasClass( 'columnParent' ) ? 'width' : 'height'
135 |         $("#parentDimensionSizeInput").attr('placeholder', 'Parent\'s ' + parentDimension )
136 |       } else {
137 |         $("#parentDimensionSizeInput, #enterParentDimensionButton ").addClass('disabled')
138 |       }
139 |     }
140 |   })
141 | 
142 |   $( 'body' ).on( 'mouseleave', '#container, #container div', function(e){
143 |     e.stopPropagation()
144 |     $('#splitControls').remove()
145 |     $('#optionsModal').remove()
146 |   })
147 | 
148 | 
149 |   $( 'body' ).on( 'click', '#splitControls img', function(e){
150 |     e.stopPropagation()
151 |     $('div.selected').removeClass('selected')
152 |     $('#optionsBar').addClass('disabled')
153 |     var parentDiv = $(this).parent().parent(),
154 |         grandParent = parentDiv.parent(),
155 |         action = $(this).data('layout-action'),
156 |         indentCount = 0
157 | 
158 |     if( $(parentDiv)[0].id != 'container' )
159 |       indentCount = (parentDiv.parentsUntil($('#container')).andSelf().length)
160 | 
161 |     /*//////////////////////////////////////
162 |     // Split current row in two
163 |     //////////////////////////////////////*/
164 |     if (action == 'splitvertical'){
165 |       var id1 = Math.floor(Math.random() * 100000 + 1)
166 |       var id2 = Math.floor(Math.random() * 100000 + 1)
167 | 
168 |       parentDiv.append( insertIndentation(indentCount) + '<div id="rowChild' + id1 + '"></div>\n' )
169 |               .append( insertIndentation(indentCount) + '<div id="rowChild' + id2 + '"></div\n>' )
170 |               .addClass( 'rowParent' )
171 |               .find( 'div' ).not('#splitControls').each(function(){
172 |                 $(this).addClass( 'flexChild' )
173 |                 if( $(this).data( 'flexsize') == undefined)
174 |                     $(this).data( 'flexsize', 1 )
175 |               })
176 |       $( '#splitControls' ).remove()
177 |     }
178 | 
179 |     /*//////////////////////////////////////
180 |     // Split current column in two
181 |     //////////////////////////////////////*/
182 |     else if (action == 'splithorizontal'){
183 |       parentDiv.append( insertIndentation(indentCount) + '<div id="columnChild' + Math.floor(Math.random() * 100000 + 1) + '"></div>\n' )
184 |               .append( insertIndentation(indentCount) + '<div id="columnChild' + Math.floor(Math.random() * 100000 + 1) + '"></div>\n' )
185 |               .addClass( 'columnParent' )
186 |               .find( 'div' ).not('#splitControls').each(function(){
187 |                 $(this).addClass( 'flexChild' )
188 |                 if( $(this).data( 'flexsize') == undefined)
189 |                     $(this).data( 'flexsize', 1 )
190 |               })
191 |       $( '#splitControls' ).remove()
192 |     }
193 | 
194 |     /*//////////////////////////////////////
195 |     // Add extra row
196 |     //////////////////////////////////////*/
197 |     else if(action == 'addvertical'){
198 |       if( grandParent.hasClass( 'rowParent' )){
199 |         $(grandParent).append( insertIndentation(indentCount) + '<div id="rowChild' + Math.floor(Math.random() * 100000 + 1) + '"></div>\n' )
200 |                       .find( 'div' ).not('#splitControls').each(function(){
201 |                         $(this).addClass( 'flexChild' )
202 |                         if( $(this).data( 'flexsize') == undefined)
203 |                             $(this).data( 'flexsize', 1 )
204 |                       })
205 |         $( '#splitControls' ).remove()
206 |       }
207 |       else {
208 |         alert( 'You need to split vertically first.')
209 |       }
210 |     }
211 | 
212 |     /*//////////////////////////////////////
213 |     // Add extra column
214 |     //////////////////////////////////////*/
215 |     else if(action == 'addhorizontal'){
216 |      if( grandParent.hasClass( 'columnParent' )){
217 |         $(grandParent).append( insertIndentation(indentCount) + '<div id="columnChild' + Math.floor(Math.random() * 100000 + 1) + '"></div>\n' )
218 |                       .find( 'div' ).not('#splitControls').each(function(){
219 |                         $(this).addClass( 'flexChild' )
220 |                         if( $(this).data( 'flexsize') == undefined)
221 |                             $(this).data( 'flexsize', 1 )
222 |                       })
223 |         $( '#splitControls' ).remove()
224 |       }
225 |       else {
226 |         alert( 'You need to split horizontally first.')
227 |       }
228 |     }
229 |   })
230 | 
231 | 
232 |   /*/////////////////////////////////////////////
233 |   // Increase flexsize
234 |   /////////////////////////////////////////////*/
235 |   $( '#growDivButton').on( 'click', function(){
236 |     var selectedDiv = $('div.selected')
237 |       selectedDiv.css({
238 |         'flex-grow': selectedDiv.data( 'flexsize' ) + 1
239 |       })
240 |       selectedDiv.data('flexsize', selectedDiv.data( 'flexsize' ) + 1)
241 |       CSSOverrides[ selectedDiv.attr( 'id' ) ] = selectedDiv.attr( 'style' )
242 |   })
243 | 
244 |   /*/////////////////////////////////////////////
245 |   // Decrease flexsize
246 |   /////////////////////////////////////////////*/
247 |   $( '#shrinkDivButton' ).on( 'click', function(){
248 |     var selectedDiv = $('div.selected')
249 |     if (selectedDiv.data( 'flexsize' ) > 1){
250 |       selectedDiv.css({
251 |         'flex-grow': selectedDiv.data( 'flexsize' ) - 1
252 |       })
253 |       selectedDiv.data('flexsize', selectedDiv.data( 'flexsize' ) - 1)
254 |       CSSOverrides[ selectedDiv.attr( 'id' ) ] = selectedDiv.attr( 'style' )
255 |     }
256 |   })
257 | 
258 |   /*/////////////////////////////////////////////
259 |   // Enter fixed width/height for current div
260 |   /////////////////////////////////////////////*/
261 |   $( '#enterWidthButton, #enterHeightButton' ).on( 'click', function(e){
262 |     var selectedDiv = $('div.selected')
263 |         dimension = $(e.target).attr('title')
264 |         size = $( '#' + dimension + 'Input' ).val()
265 | 
266 |       selectedDiv.css({
267 |         'flex': ' none'
268 |       })
269 |       .css(dimension, size)
270 |       CSSOverrides[ selectedDiv.attr( 'id' ) ] = selectedDiv.attr( 'style' )
271 |   })
272 | 
273 |   /*/////////////////////////////////////////////
274 |   // Enter fixed width/height for selected div's parent
275 |   /////////////////////////////////////////////*/
276 |   $( '#enterParentDimensionButton' ).on( 'click', function(){
277 |     var selectedDiv = $('div.selected'),
278 |         selectedDivParent = $('div.selected').parent(),
279 |         parentDimension = selectedDivParent.hasClass( 'columnParent' ) ? 'width' : 'height'
280 |     
281 |     selectedDivParent.css({
282 |         'flex': ' none'
283 |       })
284 |     .css(parentDimension, $( '#parentDimensionSizeInput' ).val())
285 | 
286 |     CSSOverrides[ selectedDivParent.attr( 'id' ) ] = selectedDivParent.attr( 'style' )
287 |   })
288 | 
289 | 
290 |   /*/////////////////////////////////////////////
291 |   // Set justification within parent
292 |   /////////////////////////////////////////////*/
293 |   $( '#justifyButton' ).on( 'change', function(){
294 |     var selectedDivParent = $('div.selected').parent()
295 | 
296 |     selectedDivParent.css({
297 |       'justify-content': $(this).val()
298 |     })
299 |     CSSOverrides[ selectedDivParent.attr( 'id' ) ] = selectedDivParent.attr( 'style' )
300 |   })
301 | 
302 | 
303 |   /*/////////////////////////////////////////////
304 |   // Set single alignment
305 |   /////////////////////////////////////////////*/
306 |   $( '#singleAlignmentButton' ).on( 'change', function(){
307 |     var selectedDiv = $('div.selected')
308 | 
309 |     selectedDiv.css({
310 |       'align-self': $(this).val()
311 |     })
312 |     CSSOverrides[ selectedDiv.attr( 'id' ) ] = selectedDiv.attr( 'style' )
313 |   })
314 | 
315 | 
316 |   /*/////////////////////////////////////////////
317 |   // Set global alignment for parent
318 |   /////////////////////////////////////////////*/
319 |   $( '#allAlignmentButton' ).on( 'change', function(){
320 |     var selectedDivParent = $('div.selected').parent()
321 | 
322 |     selectedDivParent.css({
323 |       'align-items': $(this).val()
324 |     })
325 |     CSSOverrides[ selectedDivParent.attr( 'id' ) ] = selectedDivParent.attr( 'style' )
326 |   })
327 | 
328 | 
329 |   /*/////////////////////////////////////////////
330 |   // Remove current div from DOM
331 |   /////////////////////////////////////////////*/
332 |   $( '#removeDivButton' ).on( 'click', function(){
333 |     var selectedDiv = $('div.selected')
334 |     if (selectedDiv != $('#container')[0]){
335 |       delete CSSOverrides[ selectedDiv.attr( 'id' )]
336 |       selectedDiv.remove()
337 |     }
338 |   })
339 | 
340 | })
341 | 


--------------------------------------------------------------------------------