General Website Resources (GNOME UI)

The GNOME UI is a web library built using Tailwind CSS 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.

For further reference concerning styling, check on Tailwind CSS' documentation.

The GNOME UI library uses Feather Icons by default.

The GNOME UI Documentation is developed using Hugo and Gitlab pages, and it uses a theme called hugo-book and is available here.

The project documentation is placed in the documentation folder.

Getting started

Set up locally

• Install the pre-requisites
  • NPM
  • Hugo
• Clone the repository

  git clone --recurse-submodules https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources.git

• Then go to the directory of the repository you cloned

  cd general-website-resources

• Install the dependencies

  npm ci

Generating (Building) the Styles

This Library uses Tailwind 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.

In order to generate the styles you need to run the following command.

npm run build

This command will output the following styles

├── dist/
│   ├── index.css
│   ├── index.css.map
│   ├── index.min.css

Generating Documentation

• You will need first to build the styles from the previous steps
• Then copy the generated styles from the previous steps into the custom styles of the documentation folder

  cp dist/index.min.css "documentation/static/gnomeui.min.css"

• Then you might either build Hugo or start the local development server with

  hugo -s documentation serve

• If you start the Hugo server, it will serve Hugo on the following path http://localhost:1313