{"id":13850419,"url":"https://github.com/victorqribeiro/fos","last_synced_at":"2025-08-20T00:42:43.666Z","repository":{"id":44687266,"uuid":"220522309","full_name":"victorqribeiro/fos","owner":"victorqribeiro","description":"Web Components to turn your web app into a fake operating system","archived":false,"fork":false,"pushed_at":"2022-06-15T14:51:33.000Z","size":45,"stargazers_count":196,"open_issues_count":1,"forks_count":27,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-30T23:11:09.520Z","etag":null,"topics":["framework","html5","javascript","library","ui","ux","web-components"],"latest_commit_sha":null,"homepage":"https://victorribeiro.com/fos","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/victorqribeiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"victorqribeiro"}},"created_at":"2019-11-08T18:07:47.000Z","updated_at":"2025-03-22T15:18:45.000Z","dependencies_parsed_at":"2022-08-03T18:15:25.333Z","dependency_job_id":null,"html_url":"https://github.com/victorqribeiro/fos","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorqribeiro%2Ffos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorqribeiro%2Ffos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorqribeiro%2Ffos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorqribeiro%2Ffos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/victorqribeiro","download_url":"https://codeload.github.com/victorqribeiro/fos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252564105,"owners_count":21768589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","html5","javascript","library","ui","ux","web-components"],"created_at":"2024-08-04T20:01:11.634Z","updated_at":"2025-05-05T19:44:13.512Z","avatar_url":"https://github.com/victorqribeiro.png","language":"JavaScript","funding_links":["https://patreon.com/victorqribeiro"],"categories":["JavaScript","💾 INDIE-OS"],"sub_categories":[],"readme":"# FOS - Fake Operating System\n\nWeb Components to turn your web app into a fake operating system.\n\n![screenshot](screenshot.png)\n\nLive example [here](https://victorribeiro.com/fos)\n\n## About\n\nThis is my first experiment writting webcomponents. I kind ran with the idea and made this project that can be used to create awesome / fun / creative web apps. Hope you like it.\n\n## How to use\n\n[Watch the creation of a basic web app using FOS here](https://www.youtube.com/watch?v=rddE1jKPgWk)\n\n\nAdd the JavaScript file to your project\n\n```html\n\u003cscript src=\"fos.min.js\"\u003e\u003c/script\u003e\n```\n\nThen just start typing HTML like it is the 90's.\n\n## Components\n\nAll the component can be stylized with CSS just like a regular [DOM](https://www.w3schools.com/jsref/dom_obj_all.asp) element.\n\n### fos-desktop\n\nThis is a wrapper for all the icons, bars, windows...\n\n**custom attributes**  \n*iconOffset* - int - will off set the start position of the icons.\n\n### fos-icon\n\nThis is a icon. It's draggable by default. It moves on a grid of 8 x 8 pixels.\n*fixed* - Prevent the icon from bing dragged.\n\n### fos-window\n\nThis is a window application. You can write html directly inside of it. Or you can make something more complex and add a fos-bar -\u003e fos-menu -\u003e fos-menu-item and a fos-panel inside of it. Each fos-menu-item controls a fos-panel.\n\n**custom attributes**  \n*title* - String - Sets the title displayed on top of the window.\n\n### fos-bar\n\nThis is just a wrapper for the menu. Can be placed on top or bottom of fos-desktop / fos-window.\n\n**custom attributes**  \n*position* - top | bottom - Sets the position of the bar. Values can be top or bottom.\n\n### fos-menu\n\nThis is a menu that is only visible when clicked. It houses fos-menu-item.\n\n### fos-menu-item\n\nThis is items of a menu. It should control a panel.\n\n### fos-panel\n\nThis is a wrapper for your content. The idea is that you write your HTML inside of it and call it by clicking on a fos-menu-item.\n\n\nNew components can be added later on.\n\n## Example\n\nLet's create fake operating system.  \n\nWe should start with a desktop.\n\n```html\n\u003cfos-desktop\u003e\n\u003c/fos-desktop\u003e\n```\n\nNice!\n\nNow we should create some icons. You don't need to stress about where each icon will be on the fos-desktop. They will be spread out across the screen automatically, from top-left to bottom-right.\n\n```html\n\u003cfos-desktop\u003e\n\n\t\u003cfos-icon\u003eF\u003c/fos-icon\u003e\n\t\u003cfos-icon\u003eO\u003c/fos-icon\u003e\n\t\u003cfos-icon\u003eS\u003c/fos-icon\u003e\n\n\u003c/fos-desktop\u003e\n```\n\nCool!\n\nNow the icons can be used to open windows. So we should crate some windows and then linking them to an icon. This can be done by setting a **name** attribute on a window and a **href** attribute on the icon.\n\n```html\n\u003cfos-desktop\u003e\n\n\t\u003cfos-icon href=\"w1\"\u003eF\u003c/fos-icon\u003e\n\t\u003cfos-icon href=\"w2\"\u003eO\u003c/fos-icon\u003e\n\t\u003cfos-icon href=\"w3\"\u003eS\u003c/fos-icon\u003e\n\n\t\u003cfos-window name=\"w1\" title=\"Window 1\"\u003e\u003c/fos-window\u003e\n\t\u003cfos-window name=\"w1\" title=\"Window 1\"\u003e\u003c/fos-window\u003e\n\t\u003cfos-window name=\"w1\" title=\"Window 1\"\u003e\u003c/fos-window\u003e\n\n\u003c/fos-desktop\u003e\n```\n\nThis is going really well. Now when we double click the icon (yes, yes I know - but I like double clicks) it will open a window.\n\nThe window can be dragged around by its top part. It also can be resized by it's bottom right corner. It can be maximized clicking on the **[]** button or closed clicking on the **X** button, both on the right top corner.\n\nOur fake os is kinda lame right now, but when can mess around with the sytle using CSS. You can add a nice background image to the desktop and create some nice images for the icons, instead of letters.\n\nWell, you can do that whenever you want. But for this tutorial, we should add a bar on the bottom of the screen and a Start menu. The Start menu will also control the windows.\n\n```html\n\u003cfos-desktop\u003e\n\n\t\u003cfos-icon href=\"w1\"\u003eF\u003c/fos-icon\u003e\n\t\u003cfos-icon href=\"w2\"\u003eO\u003c/fos-icon\u003e\n\t\u003cfos-icon href=\"w3\"\u003eS\u003c/fos-icon\u003e\n\n\t\u003cfos-window name=\"w1\" title=\"Window 1\"\u003e\n\t\t\u003ch2\u003eTest 1\u003c/h2\u003e\n\t\u003c/fos-window\u003e\n\t\n\t\u003cfos-window name=\"w2\" title=\"Window 2\"\u003e\n\t\t\u003ch1\u003eHello\u003c/h1\u003e\n\t\t\u003cp\u003eHow are you on this fine morning/afternoon/night?\u003c/p\u003e\n\t\t\u003cp\u003e\u003ca href=\"javascript:alert('hi');\"\u003eClick here to say hi\u003c/a\u003e\u003c/p\u003e\n\t\u003c/fos-window\u003e\n\t\n\t\u003cfos-window name=\"w3\" title=\"Window 3\"\u003e\n\t\t???\n\t\u003c/fos-window\u003e\n\n\t\u003cfos-bar\u003e\n\t\t\u003cfos-menu name=\"Start\"\u003e\n\t\t\t\u003cfos-menu-item href=\"w1\"\u003e\n\t\t\t\tWindow 1\n\t\t\t\u003c/fos-menu-item\u003e\n\t\t\t\u003cfos-menu-item href=\"w2\"\u003e\n\t\t\t\tWindow 2\n\t\t\t\u003c/fos-menu-item\u003e\n\t\t\t\u003cfos-menu-item href=\"w3\"\u003e\n\t\t\t\tWindow 3\n\t\t\t\u003c/fos-menu-item\u003e\n\t\t\u003c/fos-menu\u003e\n\t\u003c/fos-bar\u003e\n\n\u003c/fos-desktop\u003e\n```\n\nfos-widow can have html written direct into them, but if you want to separate your content you could use the same schema fos-bar -\u003e fos-menu -\u003e fos-menu-item controling a fos-pane. Let's see how simple it is to do just that:\n\n```html\n\u003cfos-desktop\u003e\n\n\t\u003cfos-icon href=\"w1\"\u003eF\u003c/fos-icon\u003e\n\t\u003cfos-icon href=\"w2\"\u003eO\u003c/fos-icon\u003e\n\t\u003cfos-icon href=\"w3\"\u003eS\u003c/fos-icon\u003e\n\n\t\u003cfos-window name=\"w1\" title=\"Window 1\"\u003e\n\t\t\u003ch2\u003eTest 1\u003c/h2\u003e\n\t\u003c/fos-window\u003e\n\t\n\t\u003cfos-window name=\"w2\" title=\"Window 2\"\u003e\n\t\t\u003ch1\u003eHello\u003c/h1\u003e\n\t\t\u003cp\u003eHow are you on this fine morning/afternoon/night?\u003c/p\u003e\n\t\t\u003cp\u003e\u003ca href=\"javascript:alert('hi');\"\u003eClick here to say hi\u003c/a\u003e\u003c/p\u003e\n\t\u003c/fos-window\u003e\n\t\n\t\u003cfos-window name=\"w3\" title=\"Window 2\"\u003e\n\t\t\u003cfos-bar position=\"top\"\u003e\n\t\t\t\u003cfos-menu name=\"File\"\u003e\n\t\t\t\t\u003cfos-menu-item href=\"file1\"\u003eFile 1\u003c/fos-menu-item\u003e\n\t\t\t\t\u003cfos-menu-item href=\"file2\"\u003eFile 2\u003c/fos-menu-item\u003e\n\t\t\t\u003c/fos-menu\u003e\n\t\t\u003c/fos-bar\u003e\n\t\t\u003cbr\u003e\n\t\t\u003cfos-panel name=\"file1\" selected\u003e\n\t\t\t\u003ch1\u003ePanel 1\u003c/h1\u003e\n\t\t\t\u003cp\u003eHi, this is the panel one.\u003c/p\u003e\n\t\t\u003c/fos-panel\u003e\n\t\t\u003cfos-panel name=\"file2\"\u003e\n\t\t\t\u003ch1\u003ePanel 2\u003c/h1\u003e\n\t\t\t\u003cp\u003eHello again, this is the panel two.\u003c/p\u003e\n\t\t\u003c/fos-panel\u003e\n\t\u003c/fos-window\u003e\n\n\t\u003cfos-bar\u003e\n\t\t\u003cfos-menu name=\"Start\"\u003e\n\t\t\t\u003cfos-menu-item href=\"w1\"\u003e\n\t\t\t\tWindow 1\n\t\t\t\u003c/fos-menu-item\u003e\n\t\t\t\u003cfos-menu-item href=\"w2\"\u003e\n\t\t\t\tWindow 2\n\t\t\t\u003c/fos-menu-item\u003e\n\t\t\t\u003cfos-menu-item href=\"w3\"\u003e\n\t\t\t\tWindow 3\n\t\t\t\u003c/fos-menu-item\u003e\n\t\t\u003c/fos-menu\u003e\n\t\u003c/fos-bar\u003e\n\n\u003c/fos-desktop\u003e\n```\n\nfos-bar can be placed on the top or the bottom of your fos-desktop / fos-window and the fos-menu inside it will behave accordingly: if it's on the bottom, the menu will open up; if it's on the top, the menu will drop down. Cool, right?! To place the fos-bar on top, just pass to the attribute **position** one of the values **top** or **bottom**.\n\n\"Wait! If the fos-bar can be placed on the top, it will be displayed over me icons.\"\n\nYou right. To address it, the fos-desktop have a special iconOffset to address this. The value passed to that attribute will move the icons. E.g.: 20px, 40px, 55px...\n\nWell, that's it. Hope you had fun creating a Fake OS web app.\n\n## Projects that uses FOS\n\n[Virtual Cybersecurity Escape Room](https://eloeffler.gitlab.io/eloeffler/proto-vcser/)  \n[JoeVlabs](http://joevlabs.com)  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorqribeiro%2Ffos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictorqribeiro%2Ffos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorqribeiro%2Ffos/lists"}