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.
To learn more about the project and how you can get started contributing, check out the Wiki.
For further reference concerning styling, check on Tailwind CSS’ documentation.
The GNOME UI library uses Feather Icons by default.
The project documentation is placed in the
You might check the current status of the project regarding backlog, evaluation and implementation of its main components here.
The steps below will provide you guidance in how to setup the dependencies and how to build the components of this repository.
- Install the pre-requisites
- Clone the repository
git clone https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework.git
- Then go to the directory of the repository you cloned
- Install the Node.js (Library) dependencies
- Install the Documentation (Jekyll) dependencies
gem install bundler:2.2.15
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/ │ ├── gnome-hig-library.css │ ├── gnome-hig-library.css.map │ ├── gnome-hig-library.min.css │ ├── gnome-hig-library.min.css.map
- Install the Bundler dependencies (first-time)
cd documentation/ bundle install
- Copy the generated Docs from the build command
npm run copy
- Run the documentation server:
bundle exec jekyll serve --watch
- Navigate to
http://localhost:4000/Engagement/websites/gnome-css-library/in your browser to see it running.
To contribute, open merge requests at https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources.
Commit messages should follow the GNOME commit message guidelines.
Join our conversations on Matrix or IRC. You can find us at the #engagement:gnome.org channel.
If you’re a GSoC Student please give a read to the GSoC FAQ