I'm also a fan of squeezing CSS to the limit on my projects, did you do it with CSS Grid layout?
For the content in the browser you cound put an iframe and switch the url to show the pages and, if you prefer to go to the CSS route instead of JavaScript, you can have an iframe per tab and switch them by creating a tabbed interface with some radio button and using the sibling selector
.tab-a:checked ~ .content-a { display: block; }.
No grid at all, I manually moved the parent div and then started cooking a huge div soup.
I actually really like the iframe idea, so I'll gladly yoink that ð I hadn't actually considered an iframe so thank you for the idea ð
I think using CSS Grids and Flexbox will help you quite a bit on the layout, you can put everything together with 60% less divs.
An advice I can give you about JavaScript is that you can consider using it in two ways, for making things interactive (the usual use) _or_ to purely construct layouts and interfaces (to simplify and split the html).
If you learn CSS well and try to use JavaScript only for the minimum interactions you need you can put together apps with little code that can possibly break and can build enterprise level web apps that will run butter smooth even on potatoes. ð
.tab-a:checked ~ .content-a { display: block; } because (I think) the iframe has a different parent to the tabs. Might need to redesign that ðĪ
~ pick elements that are _aside_ from each other.Here an example from w3school
Also if you use a label with a
for="input-id" for the radio input you can put the tab whenever you want on the page and not care too much on the content location.Whenever way you go with just make sure to have fun. ð
Here the post
<style>.select{display:none}.select:target{display:block}</style>
...
<a href="#option1">1</a> <a href="#option2">3</a> <a href="#option3">3</a>
<div id="option1" class="select">...</div>
<div id="option2" class="select">...</div>
<div id="option3" class="select">...</div>
Yeah, working with targets might be good too.
I usually avoid them since it messes up the history but if I understood @screem 's intentions he planning to make the entire desktop?
With the target you can take it further and do a map on everything like:
#start-menu
#browser_tab-1
#browser_tab-2
#program-1
#program-1_settings
#file-manager
#file-manager_download
But this works only for single view screens.
But damn.... this project is making me itching for building something fun myself. ðĨī
Progress on the start menu:
Wow somehow this GIF got compressed super badly...
Wow somehow this GIF got compressed super badly... but I guess it just adds to the animation of CSS ð
I now work exclusively framework-less both in my CSS and JS in all my projects.
The idea of using JS to create the layout can be just a pure
element.innerHTML = 'HTML' with functions to split the parts or pages easily.It's only a way of doing things, just work the way you want. ð
Yeah, I've kinda parked the iframe for now but I'll loop back to it. Trying to decide whether I want to use an iframe or construct static pages with CSS ðĪ