Trying to sharpen up my CSS skills a bit. Planning on making this a replica of my workstation, first monitor more or less done 😁
@screem@yarn.yarnpods.com So nice!
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; }.
@screem@yarn.yarnpods.com You’re welcome! 🤗
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. 😎
@screem@yarn.yarnpods.com The selector ~ 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. 👍
@screem@yarn.yarnpods.com I looked for an article that explains how to do tabs with radio buttons.
@mckinley@mckinley.cc That’s windows 98 looks fun.😄
Yeah, working with targets might be good too.
I usually avoid them since it messes up the history but if I understood @screem@yarn.yarnpods.com ’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. 🥴
@ullarah@txt.quisquiliae.com This happens to me when i work on other people CSS or when i have to use some kind of CSS framework.
I now work exclusively framework-less both in my CSS and JS in all my projects.
@screem@yarn.yarnpods.com The demo looks good, the iframe seems a bit zoomed in though.
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. 👍
@screem@yarn.yarnpods.com Maybe considering the rest of the apps you’re trying to make will help in the decision.