Link Search Menu Expand Document

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.

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

  3. Navigate to the repository folder:

    $ cd general-website-resources

  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

The project documentation is developed using Jekyll and Gitlab pages, and it uses a theme called Just-the-docs. and is available here. The project documentation is placed in the documentation folder.

  1. Install a full Ruby development environment.
  2. Install dependencies:

    $ bundle install

  3. Copy the generated styles from the previous steps into the custom styles of the documentation:

    $ mkdir documentation/_sass/custom/ # Only needed in the first time $ cp dist/index.css “documentation/_sass/custom/custom.scss”

  4. Run the documentation server:

    $ bundle exec jekyll build -s documentation/

  5. Navigate to http://127.0.0.1:4000/ in your browser to see it running.