index.md 2.11 KB
Newer Older
1
---
2
layout: home
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
description: "The GNOME UI is a web library built using [Tailwind CSS](https://tailwindcss.com/) to be used on GNOME's websites. It eases the styling process of the websites and enables better consistency between them, while maintaining a GNOMEish look."
permalink: /
---
# GNOME UI
The GNOME UI is a web library built using [Tailwind CSS](https://tailwindcss.com/) to be used on GNOME's websites. It eases the styling process of the websites and enables better consistency between them while keeping a beautiful and GNOMEish look.

<br>

For further reference concerning styling, check on [Tailwind CSS' documentation](https://tailwindcss.com/).

<br>

The GNOME UI library uses [Feather Icons](https://feathericons.com/) by default.

## Get started
### Set up locally

1. [Install npm](https://www.npmjs.com/get-npm).
2. Clone the repository:
22
> `$ git clone git@gitlab.gnome.org:Teams/Engagement/websites/gnome-websites-framework.git`
23
3. Navigate to the repository folder:
24
> `$ cd gnome-websites-framework`
25
26
27
28
29
30
31
32
33
34
35
36
37
38
4. Install dependencies:
> $ npm install
5. Generate a build:
> $ npm run build

It will then generate the following files using the created styles:
```
├── dist/
│   ├── index.css
│   ├── index.css.map
│   ├── index.min.css
```

### Documentation
39
The project documentation is developed using Jekyll and Gitlab pages, and it uses a theme called Just-the-docs. and is available [here](https://teams.pages.gitlab.gnome.org/Engagement/websites/gnome-websites-framework/). The project documentation is placed in the `documentation` folder.
40
41
42
43

1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/).
2. Install dependencies:
> $ bundle install
44
45
46
3. Copy the **generated styles from the previous steps** into the custom styles of the documentation: # Only needed in the first time
> $ mkdir documentation/_sass/custom/ 

47
48
49
> $ cp dist/index.css "documentation/_sass/custom/custom.scss"
4. Run the documentation server:
> $ bundle exec jekyll build -s documentation/
50
5. Navigate to http://127.0.0.1:4000/Engagement/websites/gnome-websites-framework/ in your browser to see it running.