Link Search Menu Expand Document

GNOME Websites Framework

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

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

You might check the current status of the project regarding backlog, evaluation and implementation of its main components here.

Getting started

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

  • Install the pre-requisites
  • Clone the repository
      git clone
  • Then go to the directory of the repository you cloned
      cd gnome-websites-framework
  • Install the Node.js (Library) dependencies
      npm ci
  • Install the Documentation (Jekyll) dependencies
      gem install bundler:2.2.15

Building the Library (CSS/Tailwind)

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.min.css
│   ├──

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:
      mkdir documentation/_sass/custom/
  • Every time you change the Library and rebuild it you need to copy the CSS file
      cp dist/index.min.css documentation/_sass/custom/custom.scss

Building the Docs (Jekyll)

  • Install the Bundler dependencies (first-time)
      cd documentation/
      bundle install
  • You also need to copy the file that is used as the Index page (Usually only needed once)
      cp ../ ./
  • Run the documentation server:
      bundle exec jekyll serve --watch
  • Navigate to http://localhost:4000/Engagement/websites/gnome-websites-framework/ in your browser to see it running.


To contribute, open merge requests at

Commit messages should follow the GNOME commit message guidelines.

Join our conversations on Matrix or IRC. You can find us at the channel.

If you’re a GSoC Student please give a read to the GSoC FAQ