{"id":18006323,"url":"https://github.com/lukakerr/ion","last_synced_at":"2025-03-26T11:34:30.656Z","repository":{"id":60219041,"uuid":"95864418","full_name":"lukakerr/ion","owner":"lukakerr","description":"A lightweight CSS framework that brings MacOS styled elements to Electron","archived":false,"fork":false,"pushed_at":"2017-11-26T01:21:21.000Z","size":66,"stargazers_count":150,"open_issues_count":1,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-21T18:21:16.708Z","etag":null,"topics":["css","css-framework","electron","html","ion"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukakerr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-30T07:59:39.000Z","updated_at":"2024-12-10T08:48:44.000Z","dependencies_parsed_at":"2022-09-26T21:51:40.999Z","dependency_job_id":null,"html_url":"https://github.com/lukakerr/ion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Fion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Fion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Fion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Fion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukakerr","download_url":"https://codeload.github.com/lukakerr/ion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245644898,"owners_count":20649279,"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":["css","css-framework","electron","html","ion"],"created_at":"2024-10-30T01:07:57.337Z","updated_at":"2025-03-26T11:34:27.937Z","avatar_url":"https://github.com/lukakerr.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ion \n\nA lightweight CSS framework that brings MacOS styled elements to Electron.\n\n### About\n\nIon was developed with the aim of bringing native MacOS elements and components, such as buttons, sidebars, search inputs, tabs, tables, icons, and toolbars, to HTML and CSS. \n\nIon is designed to be used specifically within an [Electron](https://github.com/electron/electron) application.\n\n### Getting Started\n\n```\ngit clone https://github.com/lukakerr/ion.git\n```\n\n### Folder Structure\n\n```\nion/\n├── README.md\n├── index.html\n├── dist/\n│   ├── ion.min.css\n│   └── fonts/\n│   └── img/\n├── src/\n│   ├── ion.css\n│   └── fonts/\n│   └── img/\n```\n\n### Demo\n\n\u003cdiv style=\"text-align:center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/xfCOLmH.gif\" alt=\"ion\"\u003e\n\u003c/div\u003e\n\n# Documentation\n\n### Title Bar\n\nA title bar can either be `normal`, `tall`, `inset`, or all three combined. The title bar is used to drag the application.\n\nInside the `bar` div, there are 3 other main elements:\n\n- The `buttons` div which is the traffic light buttons in every application\n- The `title` div, which is the title of your application shown in the title bar\n- The `search` element, which is the search input\n\n```html\n\u003cdiv class=\"bar tall inset\"\u003e\n  \u003cdiv class=\"buttons\"\u003e\n    \u003cbutton\u003e\u003c/button\u003e\n    \u003cbutton\u003e\u003c/button\u003e\n    \u003cbutton\u003e\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"title\"\u003eion\u003c/div\u003e\n  \u003cinput class=\"search\" placeholder=\"Search\"\u003e\n\u003c/div\u003e\n```\n\n### Buttons\n\nButtons are commonly used in the `bar tall` div. Each button is located within a div with the class `bar-buttons`.\n\nThe `bar-buttons` div, lets you add as many buttons as you want to the title bar. These buttons must have the `btn` class, as well as another class to show an icon. Note: the `left-open-big` and `right-open-big` icons go next to each other, as back and forward buttons.\n\nThe `bar-buttons` div also has `active` and `disabled` classes which make a button active or disabled.\n\nTo have a space between buttons, simply add the `space` class to a button.\n\nTo have a dropdown icon, add the `dropdown` class to a button.\n\n```html\n\u003cdiv class=\"bar-buttons\"\u003e\n  \u003cbutton class=\"btn left-open-big\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn right-open-big\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn cog\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn folder disabled\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn info space\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn reply active\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn download\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn login\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn home\"\u003e\u003c/button\u003e\n\u003c/div\u003e\n```\n\nYou can also group buttons together, by putting them in a `btn-group` class, which goes inside the `bar-buttons` class. \n\n```html\n\u003cdiv class=\"btn-group\"\u003e\n  \u003cbutton class=\"btn download\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn login\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn cog\"\u003e\u003c/button\u003e\n  \u003cbutton class=\"btn folder disabled\"\u003e\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Tabs\n\nTo get a tab interface, place the following `\u003cdiv\u003e` inside the `bar` class. To add more tabs, simply add another `\u003cdiv\u003e` with the class `tab` inside the `tabs` class.\n\n```html\n\u003cdiv class=\"tabs\"\u003e\n  \u003cdiv class=\"tab active\"\u003e\n    \u003cspan class=\"close\"\u003e\u003c/span\u003e\n    Documents\n  \u003c/div\u003e\n  \u003cdiv class=\"tab\"\u003e\n    \u003cspan class=\"close\"\u003e\u003c/span\u003e\n    Ion\n  \u003c/div\u003e\n  \u003cdiv class=\"tab\"\u003e\n    \u003cspan class=\"close\"\u003e\u003c/span\u003e\n    School\n  \u003c/div\u003e\n  \u003cdiv class=\"tab\"\u003e\n    \u003cspan class=\"close\"\u003e\u003c/span\u003e\n    Work\n  \u003c/div\u003e\n  \u003cdiv class=\"add\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Sidebar\n\nThe `sidebar` div gets shown on the left side of the window. This is used to display a list of elements, similar to the Finder\n\nA `heading` div will put a heading above a bunch of items\n\nEach `item` div inside the `items` div, must have the class `item`, as well as another class that determines what icon is shown next to it. Below are all the possible items you can use (this includes coloured tags)\n\n```html\n\u003cdiv class=\"sidebar\"\u003e\n  \u003cdiv class=\"heading\"\u003e\n    Favourites\n  \u003c/div\u003e\n  \u003cdiv class=\"items\"\u003e\n    \u003cdiv class=\"item allmyfiles\"\u003e\n      All My Files\n    \u003c/div\u003e\n    \u003cdiv class=\"item icloud\"\u003e\n      iCloud Drive\n    \u003c/div\u003e\n    \u003cdiv class=\"item airdrop\"\u003e\n      AirDrop\n    \u003c/div\u003e\n    \u003cdiv class=\"item applications\"\u003e\n      Applications\n    \u003c/div\u003e\n    \u003cdiv class=\"item desktop\"\u003e\n      Desktop\n    \u003c/div\u003e\n    \u003cdiv class=\"item documents\"\u003e\n      Documents\n    \u003c/div\u003e\n    \u003cdiv class=\"item downloads\"\u003e\n      Downloads\n    \u003c/div\u003e\n    \u003cdiv class=\"item movies\"\u003e\n      Movies\n    \u003c/div\u003e\n    \u003cdiv class=\"item music\"\u003e\n      Music\n    \u003c/div\u003e\n    \u003cdiv class=\"item pictures\"\u003e\n      Pictures\n    \u003c/div\u003e\n    \u003cdiv class=\"item home\"\u003e\n      Luka\n    \u003c/div\u003e\n    \u003cdiv class=\"item laptop\"\u003e\n      Luka\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \n  \u003cdiv class=\"heading\"\u003e\n    Files\n  \u003c/div\u003e\n  \u003cdiv class=\"items\"\u003e\n    \u003cdiv class=\"item folder\"\u003e\n      Folder\n    \u003c/div\u003e\n    \u003cdiv class=\"item file\"\u003e\n      File\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"heading\"\u003e\n    Tags\n  \u003c/div\u003e\n  \u003cdiv class=\"items\"\u003e\n    \u003cdiv class=\"item red\"\u003e\n      Red\n    \u003c/div\u003e\n    \u003cdiv class=\"item orange\"\u003e\n      Orange\n    \u003c/div\u003e\n    \u003cdiv class=\"item yellow\"\u003e\n      Yellow\n    \u003c/div\u003e\n    \u003cdiv class=\"item green\"\u003e\n      Green\n    \u003c/div\u003e\n    \u003cdiv class=\"item blue\"\u003e\n      Blue\n    \u003c/div\u003e\n    \u003cdiv class=\"item purple\"\u003e\n      Purple\n    \u003c/div\u003e\n    \u003cdiv class=\"item gray\"\u003e\n      Gray\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Table\n\nA table can be displayed by using the HTML `table` element with the class `table`. If you want each row to have alternating background colours, add the `alt` class as shown below.\n\nYou can also have `disabled` rows, and `active` rows as shown below\n\n```html\n\u003ctable class=\"table alt\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eDate Modified\u003c/th\u003e\n    \u003cth\u003eSize\u003c/th\u003e\n    \u003cth\u003eKind\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eion.css\u003c/td\u003e\n    \u003ctd\u003eToday 3:33 pm\u003c/td\u003e\n    \u003ctd\u003e100 KB\u003c/td\u003e\n    \u003ctd\u003eCSS\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr class=\"disabled\"\u003e\n    \u003ctd\u003eControllers\u003c/td\u003e\n    \u003ctd\u003e8 April 2017, 8:45 am\u003c/td\u003e\n    \u003ctd\u003e--\u003c/td\u003e\n    \u003ctd\u003eFolder\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr class=\"active\"\u003e\n    \u003ctd\u003eHoliday.png\u003c/td\u003e\n    \u003ctd\u003e23 June 2017, 6:50 pm\u003c/td\u003e\n    \u003ctd\u003e2 GB\u003c/td\u003e\n    \u003ctd\u003ePNG Image\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003euser.rb\u003c/td\u003e\n    \u003ctd\u003eToday 1:44 pm\u003c/td\u003e\n    \u003ctd\u003e5.1 MB\u003c/td\u003e\n    \u003ctd\u003eRuby Source\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### Path\n\nTo get a breadcrumb style path at the bottom of the window, use a `\u003cdiv\u003e` with the class of `path`. This is shown below\n\n```html\n\u003cdiv class=\"path\"\u003e\n  \u003cspan class=\"item laptop\"\u003eMacintosh HD\u003c/span\u003e\n  \u003cspan class=\"item folder\"\u003eUsers\u003c/span\u003e\n  \u003cspan class=\"item home\"\u003eLuka\u003c/span\u003e\n  \u003cspan class=\"item documents\"\u003eDocuments\u003c/span\u003e\n\u003c/div\u003e\n```\n\n### Full Page Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\n  \u003ctitle\u003eIon\u003c/title\u003e\n  \u003clink href=\"dist/ion.min.css\" rel=\"stylesheet\"\u003e\n\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003cdiv class=\"bar tall\"\u003e\n    \u003cdiv class=\"buttons\"\u003e\n      \u003cbutton\u003e\u003c/button\u003e\n      \u003cbutton\u003e\u003c/button\u003e\n      \u003cbutton\u003e\u003c/button\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"title\"\u003eIon\u003c/div\u003e\n\n    \u003cdiv class=\"bar-buttons\"\u003e\n      \u003cbutton class=\"btn left-open-big\"\u003e\u003c/button\u003e\n      \u003cbutton class=\"btn right-open-big\"\u003e\u003c/button\u003e\n\n      \u003cdiv class=\"btn-group\"\u003e\n        \u003cbutton class=\"btn layout\"\u003e\u003c/button\u003e\n        \u003cbutton class=\"btn menu active\"\u003e\u003c/button\u003e\n        \u003cbutton class=\"btn window\"\u003e\u003c/button\u003e\n        \u003cbutton class=\"btn list\"\u003e\u003c/button\u003e\n      \u003c/div\u003e\n\n      \u003cbutton class=\"btn list-add space dropdown\"\u003e\u003c/button\u003e\n      \u003cbutton class=\"btn dot-3 dropdown\"\u003e\u003c/button\u003e\n      \u003cbutton class=\"btn cog dropdown\"\u003e\u003c/button\u003e\n      \u003cbutton class=\"btn download space\"\u003e\u003c/button\u003e\n      \u003cbutton class=\"btn tag\"\u003e\u003c/button\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tabs\"\u003e\n      \u003cdiv class=\"tab active\"\u003e\n        \u003cspan class=\"close\"\u003e\u003c/span\u003e\n        Documents\n      \u003c/div\u003e\n      \u003cdiv class=\"tab\"\u003e\n        \u003cspan class=\"close\"\u003e\u003c/span\u003e\n        Ion\n      \u003c/div\u003e\n      \u003cdiv class=\"tab\"\u003e\n        \u003cspan class=\"close\"\u003e\u003c/span\u003e\n        School\n      \u003c/div\u003e\n      \u003cdiv class=\"tab\"\u003e\n        \u003cspan class=\"close\"\u003e\u003c/span\u003e\n        Work\n      \u003c/div\u003e\n      \u003cdiv class=\"add\"\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cinput class=\"search\" placeholder=\"Search\"\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"sidebar\"\u003e\n    \u003cdiv class=\"heading\"\u003e\n      Favourites\n    \u003c/div\u003e\n    \u003cdiv class=\"items\"\u003e\n      \u003cdiv class=\"item allmyfiles\"\u003e\n        All My Files\n      \u003c/div\u003e\n      \u003cdiv class=\"item icloud\"\u003e\n        iCloud Drive\n      \u003c/div\u003e\n      \u003cdiv class=\"item airdrop\"\u003e\n        AirDrop\n      \u003c/div\u003e\n      \u003cdiv class=\"item applications\"\u003e\n        Applications\n      \u003c/div\u003e\n      \u003cdiv class=\"item desktop\"\u003e\n        Desktop\n      \u003c/div\u003e\n      \u003cdiv class=\"item documents active\"\u003e\n        Documents\n      \u003c/div\u003e\n      \u003cdiv class=\"item downloads\"\u003e\n        Downloads\n      \u003c/div\u003e\n      \u003cdiv class=\"item movies\"\u003e\n        Movies\n      \u003c/div\u003e\n      \u003cdiv class=\"item music\"\u003e\n        Music\n      \u003c/div\u003e\n      \u003cdiv class=\"item pictures\"\u003e\n        Pictures\n      \u003c/div\u003e\n      \u003cdiv class=\"item home\"\u003e\n        Luka\n      \u003c/div\u003e\n      \u003cdiv class=\"item laptop\"\u003e\n        Luka\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv class=\"heading\"\u003e\n      Files\n    \u003c/div\u003e\n    \u003cdiv class=\"items\"\u003e\n      \u003cdiv class=\"item folder\"\u003e\n        Folder\n      \u003c/div\u003e\n      \u003cdiv class=\"item file\"\u003e\n        File\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"heading\"\u003e\n      Tags\n    \u003c/div\u003e\n    \u003cdiv class=\"items\"\u003e\n      \u003cdiv class=\"item red\"\u003e\n        Red\n      \u003c/div\u003e\n      \u003cdiv class=\"item orange\"\u003e\n        Orange\n      \u003c/div\u003e\n      \u003cdiv class=\"item yellow\"\u003e\n        Yellow\n      \u003c/div\u003e\n      \u003cdiv class=\"item green\"\u003e\n        Green\n      \u003c/div\u003e\n      \u003cdiv class=\"item blue\"\u003e\n        Blue\n      \u003c/div\u003e\n      \u003cdiv class=\"item purple\"\u003e\n        Purple\n      \u003c/div\u003e\n      \u003cdiv class=\"item gray\"\u003e\n        Gray\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003ctable class=\"table alt\"\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eDate Modified\u003c/th\u003e\n      \u003cth\u003eSize\u003c/th\u003e\n      \u003cth\u003eKind\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eion.min.css\u003c/td\u003e\n      \u003ctd\u003eToday 3:33 pm\u003c/td\u003e\n      \u003ctd\u003e100 KB\u003c/td\u003e\n      \u003ctd\u003eCSS\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"disabled\"\u003e\n      \u003ctd\u003eControllers\u003c/td\u003e\n      \u003ctd\u003e8 April 2017, 8:45 am\u003c/td\u003e\n      \u003ctd\u003e--\u003c/td\u003e\n      \u003ctd\u003eFolder\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"active\"\u003e\n      \u003ctd\u003eHoliday.png\u003c/td\u003e\n      \u003ctd\u003e23 June 2017, 6:50 pm\u003c/td\u003e\n      \u003ctd\u003e2 GB\u003c/td\u003e\n      \u003ctd\u003ePNG Image\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003euser.rb\u003c/td\u003e\n      \u003ctd\u003eToday 1:44 pm\u003c/td\u003e\n      \u003ctd\u003e5.1 MB\u003c/td\u003e\n      \u003ctd\u003eRuby Source\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n  \u003cdiv class=\"path\"\u003e\n    \u003cspan class=\"item laptop\"\u003eMacintosh HD\u003c/span\u003e\n    \u003cspan class=\"item folder\"\u003eUsers\u003c/span\u003e\n    \u003cspan class=\"item home\"\u003eLuka\u003c/span\u003e\n    \u003cspan class=\"item documents\"\u003eDocuments\u003c/span\u003e\n  \u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukakerr%2Fion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukakerr%2Fion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukakerr%2Fion/lists"}