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.

Get started #

Set up locally #

  1. Install npm.
  2. Clone the repository:

$ git clone git@gitlab.gnome.org:Teams/Engagement/websites/general-website-resources.git

  1. Navigate to the repository folder:

$ cd general-website-resources

  1. Install dependencies:

$ npm install

  1. 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 #

The project 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.

  1. Clone the repository with all necessary submodules

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

  1. Install Hugo
  2. Copy the generated styles from the previous steps into the custom styles of the documentation:

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

  1. Run the documentation server:

$ hugo -s documentation serve

  1. Navigate to http://localhost:1313 in your browser to see it running.