Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukakerr/ion
A lightweight CSS framework that brings MacOS styled elements to Electron
https://github.com/lukakerr/ion
css css-framework electron html ion
Last synced: 2 months ago
JSON representation
A lightweight CSS framework that brings MacOS styled elements to Electron
- Host: GitHub
- URL: https://github.com/lukakerr/ion
- Owner: lukakerr
- Created: 2017-06-30T07:59:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-26T01:21:21.000Z (about 7 years ago)
- Last Synced: 2023-11-07T18:24:38.146Z (about 1 year ago)
- Topics: css, css-framework, electron, html, ion
- Language: CSS
- Size: 64.5 KB
- Stars: 142
- Watchers: 3
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ion
A lightweight CSS framework that brings MacOS styled elements to Electron.
### About
Ion 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.
Ion is designed to be used specifically within an [Electron](https://github.com/electron/electron) application.
### Getting Started
```
git clone https://github.com/lukakerr/ion.git
```
### Folder Structure
```
ion/
├── README.md
├── index.html
├── dist/
│ ├── ion.min.css
│ └── fonts/
│ └── img/
├── src/
│ ├── ion.css
│ └── fonts/
│ └── img/
```
### Demo
# Documentation
### Title Bar
A title bar can either be `normal`, `tall`, `inset`, or all three combined. The title bar is used to drag the application.
Inside the `bar` div, there are 3 other main elements:
- The `buttons` div which is the traffic light buttons in every application
- The `title` div, which is the title of your application shown in the title bar
- The `search` element, which is the search input
```html
```
### Buttons
Buttons are commonly used in the `bar tall` div. Each button is located within a div with the class `bar-buttons`.
The `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.
The `bar-buttons` div also has `active` and `disabled` classes which make a button active or disabled.
To have a space between buttons, simply add the `space` class to a button.
To have a dropdown icon, add the `dropdown` class to a button.
```html
```
You can also group buttons together, by putting them in a `btn-group` class, which goes inside the `bar-buttons` class.
```html
```
### Tabs
To get a tab interface, place the following `
` inside the `bar` class. To add more tabs, simply add another `` with the class `tab` inside the `tabs` class.
```html
Documents
Ion
School
Work
```
### Sidebar
The `sidebar` div gets shown on the left side of the window. This is used to display a list of elements, similar to the Finder
A `heading` div will put a heading above a bunch of items
Each `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)
```html
```
### Table
A 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.
You can also have `disabled` rows, and `active` rows as shown below
```html
Name
Date Modified
Size
Kind
ion.css
Today 3:33 pm
100 KB
CSS
Controllers
8 April 2017, 8:45 am
--
Folder
Holiday.png
23 June 2017, 6:50 pm
2 GB
PNG Image
user.rb
Today 1:44 pm
5.1 MB
Ruby Source
```
### Path
To get a breadcrumb style path at the bottom of the window, use a `
` with the class of `path`. This is shown below
```html
Macintosh HD
Users
Luka
Documents
```
### Full Page Example
```html
Ion
Name
Date Modified
Size
Kind
ion.min.css
Today 3:33 pm
100 KB
CSS
Controllers
8 April 2017, 8:45 am
--
Folder
Holiday.png
23 June 2017, 6:50 pm
2 GB
PNG Image
user.rb
Today 1:44 pm
5.1 MB
Ruby Source
Macintosh HD
Users
Luka
Documents
```