README.md 3.46 KB
Newer Older
1
2
3
4
5
6
7
---
layout: home
title: Home
permalink: /
nav_order: 1
---

Claudio Wunder's avatar
Claudio Wunder committed
8
# GNOME Websites Framework
9

Claudio Wunder's avatar
Claudio Wunder committed
10
The GNOME Websites Framework is a CSS library built using [Tailwind CSS](https://tailwindcss.com/) to be used to craft and style Websites following GNOME's own visual identity. It eases the styling process of the websites and enables better consistency between them while keeping a beautiful and GNOMEish look.
11
12
13
14
15

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

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

16
The GNOME UI Documentation is developed using [Jekyll](https://jekyllrb.com/) and Gitlab pages, and it uses a theme called [Just The Docs](https://pmarsceill.github.io/just-the-docs/) and is available [here](https://teams.pages.gitlab.gnome.org/Engagement/websites/gnome-websites-framework/). 
Claudio Wunder's avatar
Claudio Wunder committed
17
18
19
20

The project documentation is placed in the `documentation` folder.

## Getting started
21

Claudio Wunder's avatar
Claudio Wunder committed
22
23
24
The steps below will provide you guidance in how to setup the dependencies and how to build the components of this repository.

### Setting up Dependencies
25

Claudio Wunder's avatar
Claudio Wunder committed
26
27
- Install the pre-requisites
  - [NPM](https://www.npmjs.com/get-npm)
28
  - [Ruby](https://www.ruby-lang.org/en/downloads/)
Claudio Wunder's avatar
Claudio Wunder committed
29
30
- Clone the repository
    ```sh
31
    git clone https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework.git
Claudio Wunder's avatar
Claudio Wunder committed
32
    ```
33
34
- Then go to the directory of the repository you cloned
    ```sh
35
    cd gnome-websites-framework
36
    ```
37
- Install the Node.js (Library) dependencies
Claudio Wunder's avatar
Claudio Wunder committed
38
39
40
    ```sh
    npm ci
    ```
41
42
43
44
- Install the Documentation (Jekyll) dependencies
    ```sh
    gem install bundler:2.2.11
    ```
Claudio Wunder's avatar
Claudio Wunder committed
45

Claudio Wunder's avatar
Claudio Wunder committed
46
### Building the Library (CSS/Tailwind)
Claudio Wunder's avatar
Claudio Wunder committed
47
48

This Library uses [Tailwind](https://tailwindcss.com/) as a base framework and this repositoriy extends Tailwind's functionalities. In order to generate the styles that can be used for production (other websites) you need to build the styles.
49

Claudio Wunder's avatar
Claudio Wunder committed
50
51
52
53
In order to generate the styles you need to run the following command.

```sh
npm run build
54
```
Claudio Wunder's avatar
Claudio Wunder committed
55
56

This command will output the following styles
57

58
59
60
61
62
```
├── dist/
│   ├── index.css
│   ├── index.css.map
│   ├── index.min.css
63
│   ├── index.min.css.map
64
65
```

66
67
68
69
70
71
72
73
74
75
76
77
### Copying the Built Library to the Docs folder

- Before building the Documentation you need to copy the Library CSS file
- For the first time you need to create the following directory:
    ```sh
    mkdir documentation/_sass/custom/
    ```
- Every time you change the Library and rebuild it you need to copy the CSS file
    ```sh
    cp dist/index.min.css documentation/_sass/custom/custom.scss
    ```

78
### Building the Docs (Jekyll)
Claudio Wunder's avatar
Claudio Wunder committed
79

80
- Install the Bundler dependencies (first-time)
81
    ```sh
82
83
    cd documentation/
    bundle install
Claudio Wunder's avatar
Claudio Wunder committed
84
    ```
85
86
87
- You also need to copy the README.md file that is used as the Index page (Usually only needed once)
    ```sh
    cp ../README.md ./index.md
88
    ```
89
90
- Run the documentation server:
    ```sh
91
    bundle exec jekyll serve --watch
Claudio Wunder's avatar
Claudio Wunder committed
92
    ```
93
- Navigate to `http://localhost:4000/Engagement/websites/gnome-websites-framework/` in your browser to see it running.
94
95

## Contributing
96

97
98
To contribute, open merge requests at https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources.

99
Commit messages should follow the [GNOME commit message guidelines](https://wiki.gnome.org/Git/CommitMessages).
100

Claudio Wunder's avatar
Claudio Wunder committed
101
Join our conversations on [Matrix or IRC](https://wiki.gnome.org/Community/GettingInTouch/IRC). You can find us at the #engagement:gnome.org channel.