My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code:
<div class="flex-box">
<div class="col" id="html-panel">
<p>html</p>
</div>
<div class="handle">
<div class="handle-inner"></div>
</div>
<div class="col" id="css-panel">
<p>css</p>
</div>
<div class="handle">
<div class="handle-inner"></div>
</div>
<div class="col" id="js-panel">
<p>javascript</p>
</div>
</div>
I have added textareas inside each panel for user input, and use an AngularJS controller to update output based on changes in the textareas.
Now, I am considering different layout options without repeating too much code, such as horizontal or vertical arrangement of panels, or variations with 1 or 2 panels on either side. How can I implement this efficiently?
Should we maintain 1 common .html, .js, and multiple .css files for different layouts? This way, users can simply choose a different .css file to switch between layout options?