GNOME HIG CSS Library issueshttps://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues2022-09-09T16:05:52Zhttps://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/51Lists2022-09-09T16:05:52ZPooja PatelLists# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Planet](#4-planet)
* [Discourse](#5-discourse)
* [Developer Center](#6-developer-...# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Planet](#4-planet)
* [Discourse](#5-discourse)
* [Developer Center](#6-developer-center)
* [Wiki](#7-wiki)
* [Apps](#8-apps)
* [Forty](#9-forty)
* [Os](#10-os)
* [Circle](#11-circle)
* [Release](#12-release)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/1)
### Recent News
![image](/uploads/b49deef312917a8dddaa70fa00453625/image.png)
**ul**
- margin: `15px 0 15px 20px`
- list-style: `none`
- padding: `0`
- border: `0`
- outline: `0`
**li**
- vertical-align: `baseline`
- font-family: `Source Sans Pro`
- font-size: `16px`
- display: `list-item`
- text-underline-offset: `3px`
- text-decoration: `underline`
- color: `#727272`
**Hover**
![image](/uploads/ee6eec130ba461ea630fdc51935929da/image.png)
- text-decoration: `underline 1px dotted #13aff0`
- color: `#4a86cf`
### Donate
![image](/uploads/26486ff13193bba186136dca1bb579ef/image.png)
**ul**
- margin: `15px 0 15px 20px`
- padding: `0`
- border: `0`
- outline: `0`
- display: `block`
- list-style-type: `disc`
**li**
- color: `#494949`
- font-family: `Source Sans Pro`
- font-size: `16px`
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/2)
### Extensions
![image](/uploads/97cf7bba7db80a590bf73968050733b6/image.png)
**ul**
- margin-top: `0`
- padding-left: `0`
- margin: `0.4em 0 1em`
- list-style: `square`
- display: `block`
**li**
- font-family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, sans-serif`
- font-size: `14px`
- line-height: `22.4px`
- color: `#000000`
- border-bottom: `1px solid #ccc`
- border-bottom-color: `rgba(0, 0, 0, 0.2)`
- margin-top: `10px`
**Hover**
![image](/uploads/2174f8df6514b134085f4d18347295c5/image.png)
- color: `#444455`
## [#3 - Events Portal](https://events.gnome.org/)
### Main event list
![image](/uploads/1b4782e5de450fa8e117fb63f826d4fe/image.png)
**ul**
- border-left: `1px solid #e6e6e6`
- border-right: `1px solid #e6e6e6`
- border-top: `1px solid #e6e6e6`
- border-radius: `4px`
- list-style-type: `none`
- padding: `0px`
- display: `block`
**li**
- transition: `color 0.25s ease-out`
- transition-property: `color`
- transition-duration: `0.25s`
- transition-timing-function: `ease-out`
- transition-delay: `0s`
- background: `#f2f2f2`
- line-height: `2.5em`
- color: `#b3b3b3`
- border-top: `1px solid #fafafa`
- border-bottom: `1px solid #e6e6e6`
- font-family: `Helvetica Neue", Helvetica, Verdana, Arial, sans-serif`
- font-size: `15.6px`
- line-height: `39px`
- color: `#4a86cf`
- background-color: `#f2f2f2`
**Hover**
![image](/uploads/28bfe4cbe7e6ebfe843891319996440e/image.png)
- color: `#00668d`
### Upcoming Events
![image](/uploads/7ff92220210b90de8d309cd810e07733/image.png)
**ul**
- list-style-type: `none`
- padding: `0`
- display: `block`
**li**
- margin-bottom: `0.5em`
- list-style-type: `none`
- display: list-item;
- font-family: `Helvetica Neue, Helvetica, Verdana, Arial, sans-serif`
- font-size: `13px`
- line-height: `18.5px`
- color: `#4a86cf`
- background-color: `#fafafa`
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/4)
No list element found.
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/5)
### All categories
![image](/uploads/ecf2119bcda005c9b90981b4f8741c43/image.png)
**ul**
- padding: `0.25em 1em`
- margin: `0`
- padding: `0`
**li**
- min-height: `1px`
- padding: `0.75em`
- font-size: `13px`
- line-height: `18.3px`
- font-family: `Source Sans Pro, Cantarell, droid sans, Ubuntu, DejaVu Sans, Arial, sans-serif`
- color: `#919191`
- background-color: `#d1f0ff`
**Hover**
![image](/uploads/e11185ac871595001004ed600c4868b3/image.png)
- color: `#919191`
- background-color: `#d1f0ff`
### Categories
![image](/uploads/2c8cb2ece7e570e69d5279d8b5cb0e7e/image.png)
**ul**
- margin-bottom: `10px`
- margin-left: `0`
- list-style: `none`
- margin: `0 0 9px 25px`
- padding: `0`
- display: `block`
**li**
- font-family: `Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial, sans-serif`
- font-size: `17.2px`
- line-height: `17.2px`
- color: `#222222`
- background-color: `#ffffff`
**Hover**
![image](/uploads/cc37eb4d6661d9b70cb883ec3f558b21/image.png)
- color: `#e45735`
- background-color: `#f7cdc2`
**Active**
![image](/uploads/731471cdb55db5aa7439494c866a05c4/image.png)
- color: `#ffffff`
- background-color: `#e45735`
### FAQ
![image](/uploads/da2743593d9c06dc82bcdc46294b4301/image.png)
**ul**
- list-style: `none`
- margin: `0`
- padding: `0`
- display: `block`
**li**
- display: `list-item`
- line-height: `21px`
- font-size: `15px`
- font-family: `Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial, sans-serif`
- color: `#222222`
**Hover**
![image](/uploads/6fa0fb8541c6feab14314d72de029af4/image.png)
- color: `#ffffa6`
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/6)
### HIG Sections
![image](/uploads/2c90907174c8fa7f219a5225f7388e9f/image.png)
**ul**
- line-height: `27px`
- list-style-type: `disc`
- margin-block-end: `54px`
- margin-block-start: `18px`
- margin-bottom: `54px`
- margin-inline-end: `18px`
- margin-inline-start: `18px`
- margin-left: `18px`
- margin-right: `18px`
- margin-top: `18px`
- padding-inline-start: `21.6px`
- padding-left: `21.6px`
**li**
- margin-bottom: `18px`
- margin-inline-end: `11.25px`
- text-align: `left`
- font-family: `"Inter var", sans-serif`
- font-size: `18px`
- font-weight: `400`
### Make it simple
![image](/uploads/8498eb4e89d5a05e4c19ea6f5bdf5f9e/image.png)
**ul**
- line-height: `27px`
- list-style-type: `disc`
- margin-block-end: `54px`
- margin-block-start: `18px`
- margin-bottom: `54px`
- margin-inline-end: `18px`
- margin-inline-start: `18px`
- margin-left: `18px`
- margin-right: `18px`
- margin-top: `18px`
- padding-inline-start: `21.6px`
- padding-left: `21.6px`
**li**
- margin-bottom: `18px`
- margin-inline-end: `11.25px`
- text-align: `left`
- font-family: `"Inter var", sans-serif`
- font-weight: `400`
- font-size: `18px`
- text-color: `#ffffffd9`
## [#7 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/8)
### Languages
![image](/uploads/fc00bcb22c100e01dbcf2dff61c45d75/image.png)
**ul**
- display: `block`
**li**
- list-style-type: `none`
- padding-bottom: `0.2em`
- display: `list-item`
- border-bottom: `1px dotted #888`
- font-family: `Source Sans Pro, sans-serif`
- line-height: `22.4px`
- font-size: `16px`
- color: `#3465a4`
- background-color: `#ffffff`
### Main Areas
![image](/uploads/b192a289d7a3d35fb2ab849eba6e996e/image.png)
**ul**
- display: `block`
- list-style-type: `disc`
**li**
- padding-bottom: `0.2em`
- display: `list-item`
- border-bottom: `1px dotted #888`
- font-family: `Source Sans Pro, sans-serif`
- font-size: `16px`
- line-height: `22.4px`
- color: `#000000`
- background-color: `#ffffff`
### Contents
![image](/uploads/0bbd45e7fbe31078ba4a00d7df077b37/image.png)
**ol**
- margin: `1em 0.5em 1em 1em`
- padding: `0`
- display: `block`
- list-style-type: `decimal`
**li**
- margin-left: `1em`
- display: `list-item`
- border-bottom: `1px dotted #888`
- font-family: `Source Sans Pro, sans-serif`
- font-size: `13.6px`
- line-height: `19px`
- color: `#000000`
- background-color: `#ffffff`
## [#8 - Apps](https://apps.gnome.org/)
### Get to know us
![image](/uploads/23ea53e4e898e06ce329c636283434d5/image.png)
**ul**
- padding: `8px 0 0`
- margin-inline-start: `2px`
- list-style-position: `outside`
- width: `139.65px`
**li**
- display: `flex`
- align-items: `flex-end`
- padding: `4px 0`
- font-family: `Cantarell, sans-serif`
- font-size: `17px`
- link-color: `#99C1F1`
**Hover**
![image](/uploads/6dfcc12c6deb3194732cf8bc224affc3/image.png)
- filter: `brightness(1.2)`
- transition: `0.3s filter`
- color: `#99c1f1`
### Features
![image](/uploads/ffa97149127887b96a1db6f430dfa095/image.png)
**ul**
- list-style-type: `disc`
- margin-block-end: `17px`
- margin-block-start: `17px`
- margin-inline-end: `0px`
- margin-inline-start: `0px`
- padding-inline-start: `40px`
**li**
- font-family: `Cantarell, sans-serif`
- font-size: `17px`
- text-color: `#deddda`
## [#9 - Forty](https://forty.gnome.org/)
None
## [#10 - Os](https://os.gnome.org/)
None
## [#11 - Circle](https://circle.gnome.org/)
### Benefits
![image](/uploads/68a752ff1daea6941513028dd823800b/image.png)
**ul**
- display: `block`
- box-sizing: `border-box`
- list-style-type: `disc`
- margin-block-start: `1em`
- margin-block-end: `1em`
- margin-inline-start: `0px`
- margin-inline-end: `0px`
- padding-inline-start: `40px`
**li**
- color: `#f6f5f4`
- font-size: `18px`
- font-family: `"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif`
- font-weight: `400`
- line-height: `1.6`
- letter-spacing: `-0.01em`
- word-spacing: `-0.01em`
## [#12 - Release](https://release.gnome.org/)
### Keyboard shortcuts
![image](/uploads/481e3b8491deba0ce55a862f9d97157e/image.png)
**ul**
- display: `grid`
- padding: `0`
- grid-template-columns: `repeat(auto-fill, minmax(300px, 1fr))`
- margin: `1rem 0 0`
- grid-column: `main`
**li**
- margin-bottom: `18px`
- margin-inline-end: `11.25px`
- text-align: `left`
- font-family: `"Inter var", sans-serif`
- font-size: `18px`
- font-weight: `400`
- box-sizing: `border-box`
- line-height: `1.6`
- color: `#ffffff`
### Performance improvements
![image](/uploads/f6ede13842b17bfa3f2f4b4c18bf9e88/image.png)
**ul**
- grid-column: `main`
- box-sizing: `border-box`
- margin-block-end: `18px`
- margin-block-start: `18px`
- margin-inline-end: `0px`
- margin-inline-start: `0px`
- padding-inline-start: `40px`
- list-style-type: `disc`
**li**
- margin-inline-end: `1ch`
- margin-bottom: `1rem`
- font-family: `"Inter var", sans-serif`
- font-weight: `400`
- line-height: `1.6`
- color: `#ffffff`
- font-size: `18px`
# Mockups
## Vertical List without Bullets
![image](/uploads/51eb9b56376d0f773bbf8c84412306e4/image.png)
## Bulleted Vertical List
![image](/uploads/2156153eae866685e187b17382d137a6/image.png)
## Numbered Vertical List
![image](/uploads/2dd29574f82b2e53ed9e63c1655d2bac/image.png)
## Two Line List
![image](/uploads/d250d59cc0629482a05de153835e86b7/image.png)
## Horizontal List without Bullets
![image](/uploads/5ae6b826b5bb73f2bf66b6f0d073a5ba/image.png)
# Updated Mockups
![Lists_V2](/uploads/53f0f0b55aba1e013738b7355324d5ea/Lists_V2.png)Pooja PatelPooja Patelhttps://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/14Inputs2021-03-19T13:14:43ZClarissa Lima BorgesInputs# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Discourse](#5-discourse)
* [Developer Center](#6-developer-center)
* [Surveys](#7...# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Discourse](#5-discourse)
* [Developer Center](#6-developer-center)
* [Surveys](#7-surveys)
* [Wiki](#8-wiki)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/1)
### Search
![image](/uploads/757e0f9f87d8a5b477af27dba47bcc0e/image.png)
* Background color: `transparent`
* Text color: `#fff`
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/2)
### Search
![image](/uploads/f59791190349485a09dcda936b4a80e5/image.png)
* Placeholder color: `#999`
* Text color: `#555`
* Background color: `#fff`
* Border: `1px solid #ccc`
* Box shadow: `inset 0 1px 1px rgba(0, 0, 0, .075)`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
### Email and password
![image](/uploads/754b8232078ba2e4ba905e9bc4d4f310/image.png)
* Border: `1px solid #ccc`
* Placeholder color: `#999`
* Text color: `#555`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
* Label: `bold
## [#3 - Events Portal](https://events.gnome.org/)
### Text
![image](/uploads/54b1d5a160c8e43a69dd7eb250b60985/image.png)
* Border: `1px solid #dfdfdf`
* Text color: `#555`
* Font family: `Liberation Sans`
### Radio buttons
![image](/uploads/057f6fd51a8c845d79c948ab08de3361/image.png)
### Select
![image](/uploads/f80b5fc7fa2be3175737787ed63e2725/image.png)
![image](/uploads/9af882d1eb4285b500d7fc682d8a309e/image.png)
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/5)
### Search
![image](/uploads/68f40d69efcff87543a71f9dd138fe2d/image.png)
* Text color: `#222`
* Background color: `#fff`
* Border: `1px solid #919191`
#### Active
* Border color: `#08c`
* Box shadow: `0 0 6px 0 #08c`
### Text
![image](/uploads/b9f92dc3159e25fc8b17413c92c16ac8/image.png)
* Text color: `#222`
### Select
![image](/uploads/cdae70c71e6c124af3bd2ebd0b028767/image.png)
* Text color: `#222`
### Number
![image](/uploads/7c074d7b14152f7b1be0b75b7d4102fe/image.png)
### Radio button
![image](/uploads/5393ac24e5831477eed30506ccb1e22a/image.png)
### Text area (actually a small text editor)
![image](/uploads/bb17912ed2ebfc49ae3f48456fdbc7d3/image.png)
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/6)
### Search
![image](/uploads/3bc965d8f2d258edc5836e92e6009c5f/image.png)
* Background: `transparent url(../img/search-icon.png) 8px center no-repeat`
## [#7 - Surveys](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/7)
### Text
![image](/uploads/afa129e59ee1cf96eb0bab01683ff443/image.png)
* Text color: `#555`
* Background color: `#fff`
* Border: `1px solid #ccc`
* Font family: `"Helvetica Neue", Helvetica, Arial`
### Radio
![image](/uploads/b6ac7997e853f126ea4e34470c4d9066/image.png)
### Checkbox
![image](/uploads/4f47962271f49ef1ef144aead9ec6dd3/image.png)
### Text area
![image](/uploads/4370cf595586b9334a2c051e878bfb9f/image.png)
## [#8 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/8)
### Text
![image](/uploads/681b8e605782f341fce4e924c69adcf5/image.png)
* Font family: `'Source Sans Pro'`
* Text color: `#000`
# Mockups
## Form
![image](/uploads/6a9a961485479de29776d63e08d22d54/image.png)
## Search
![Peek_2020-08-19_23-35](/uploads/d506ebdd879e972cd21eba33d6a697ba/Peek_2020-08-19_23-35.gif)Clarissa Lima BorgesClarissa Lima Borgeshttps://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/13Buttons2021-03-13T00:03:42ZClarissa Lima BorgesButtons# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Planet](#4-planet)
* [Discourse](#5-discourse)
* [Surveys](#7-surveys)
* [Wiki]...# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Planet](#4-planet)
* [Discourse](#5-discourse)
* [Surveys](#7-surveys)
* [Wiki](#8-wiki)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/1)
* Includes buttons that actually are not using the HTML tag "button" but behave like as they were
* Also, the buttons were named after their classes
### Default button
![Clipboard_2020-06-18-14-28-42](/uploads/ed82bb5ea380263256982a913f0d592d/Clipboard_2020-06-18-14-28-42.png)
![Clipboard_2020-06-18-14-29-02](/uploads/8486fe48e81ae8a4578e3cf59f606761/Clipboard_2020-06-18-14-29-02.png)
![Clipboard_2020-06-18-14-29-39](/uploads/c69446ccc65956b8cc246f7f23b740da/Clipboard_2020-06-18-14-29-39.png)
* Text color: `#333`
* Background color: `#fff`
* Border color: `#ccc`
* Border radius: `6px`
* Padding: `6px 30px`
* Font size: `14px`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
#### Hover
![Clipboard_2020-06-18-14-31-15](/uploads/2ec649ac858a31d8da53ff0e02c63cc7/Clipboard_2020-06-18-14-31-15.png)
* Background color: `#e6e6e6`
* Border color: `#adadad`
#### Active
![Clipboard_2020-06-18-15-46-06](/uploads/972407e5a5a4c44fd03d3dd795a96094/Clipboard_2020-06-18-15-46-06.png)
* Background color: `#e6e6e6`
* Border color: `#adadad`
* Box shadow: `inset 0 3px 5px rgba(0,0,0,.125)`
#### Focus
![Clipboard_2020-06-18-15-48-39](/uploads/bfd2533d9e501a20c72521234904a7f9/Clipboard_2020-06-18-15-48-39.png)
* Background color: `#e6e6e6`
* Border color: `#8c8c8c`
* Outline: `thin dotted`
* Outline offset: `-2px`
#### Visited
![Clipboard_2020-06-18-16-03-10](/uploads/6639bfda37b4816d2ab75953cfe96cca/Clipboard_2020-06-18-16-03-10.png)
* Text color: `#5d396e`
### Hamburger button
![Clipboard_2020-06-18-16-13-17](/uploads/39a03260524fcc75ba6bc9db93f02c2d/Clipboard_2020-06-18-16-13-17.png)
### Close button
![Clipboard_2020-06-18-16-18-37](/uploads/394d0673cd3833d912d79af7ab182542/Clipboard_2020-06-18-16-18-37.png)
### Primary button
![Clipboard_2020-06-18-16-34-14](/uploads/1dcfbd6cdf8eb8932b2c849ac25aeee6/Clipboard_2020-06-18-16-34-14.png)
![Clipboard_2020-06-18-16-34-27](/uploads/41ec920ec1c4b73f9862e571dc81a3ea/Clipboard_2020-06-18-16-34-27.png)
* Text color: `#fff`
* Background color: `#337ab7`
* Border color: `#2e6da4`
* Border radius: `6px`
* Padding: `6px 30px`
* Font size: `14px`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
#### Hover
* Background color: `#286090`
* Border color: `#204d74`
#### Active
* Background color: `#286090`
* Border color: `#204d74`
* Box shadow: `inset 0 3px 5px rgba(0,0,0,.125)`
#### Focus
* Background color: `#286090`
* Border color: `#122b40`
* Outline: `thin dotted`
* Outline offset: `-2px`
### Success button
![Clipboard_2020-06-18-17-38-48](/uploads/dd52a0f6932803679d6e60d23084e04c/Clipboard_2020-06-18-17-38-48.png)
![Clipboard_2020-06-18-17-39-02](/uploads/ee5b48ee26f5e0a3649d3c6b98d88daa/Clipboard_2020-06-18-17-39-02.png)
* Text color: `#fff`
* Background color: `#4e9a06`
* Border color: `#4cae4c`
* Padding: `15px`
* Font size (title): `23px`
* Font size (body): `14px`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
#### Active
![image](/uploads/f2bb2ed9263ecb25e5e65e314a100d7f/image.png)
* Background color: `#449d44`
* Border color: `#398439`
* Box shadow: `inset 0 3px 5px rgba(0,0,0,.125)`
#### Focus
![image](/uploads/edd0916b8e75ad5f7014ffa0372e3c85/image.png)
* Background color: `#449d44`
* Border color: `#255625`
* Outline: `thin dotted`
* Outline offset: `-2px`
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/2)
### Default button
![Clipboard_2020-06-22-15-32-35](/uploads/5d328977f5a7ae9df2029b97748648e0/Clipboard_2020-06-22-15-32-35.png)
![Clipboard_2020-06-22-15-33-06](/uploads/8f0b9cd68ee0c365a6fefec45a358012/Clipboard_2020-06-22-15-33-06.png)
* Text color: `#333`
* Background color: `#fff`
* Border: `1px solid #ccc`
* Padding: `3px`
* Width: `100%`
* Font size (body): `14px`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
#### Hover
* Background color: `#e6e6e6`
#### Active
* Box shadow: `inset 0 3px 5px rgba(0, 0, 0, .125)`
* Background color: `#e6e6e6`
#### Focus
* Background color: `#e6e6e6`
* Border color: `#66afe9`
* Outline offset: `-2px`
### Primary button
![Clipboard_2020-06-22-15-44-25](/uploads/729cfa63515d5e9ba6c397bc56d2a24c/Clipboard_2020-06-22-15-44-25.png)
* Text color: `#fff`
* Background color: `#286090`
* Border: `1px solid #ccc`
* Padding: `3px`
* Width: `100%`
* Font size (body): `14px`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
#### Hover
* Background color: `#286090`
#### Active
* Box shadow: `inset 0 3px 5px rgba(0, 0, 0, .125)`
* Background color: `#286090`
#### Focus
* Background color: `#286090`
* Border color: `#66afe9`
* Outline offset: `-2px`
### Success button
![Clipboard_2020-06-22-15-57-41](/uploads/fac4f282ee48a2332ebff37e755784bc/Clipboard_2020-06-22-15-57-41.png)
* Text color: `#fff`
* Background color: `#286090`
* Border color: `#4cae4c`
* Padding: `6px 12px`
* Font size (body): `14px`
* Font family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
#### Hover
* Background color: `#449d44`
* Border color: `#398439`
#### Active
* Box shadow: `inset 0 3px 5px rgba(0, 0, 0, .125)`
* Background color: `#449d44`
* Border color: `#398439`
#### Focus
* Background color: `#449d44`
* Border color: `#255625`
* Outline offset: `-2px`
### Hamburguer button
![Clipboard_2020-06-22-15-30-59](/uploads/3af3e0a96f0bd1a9d2950df06f326560/Clipboard_2020-06-22-15-30-59.png)
### User options button
![Clipboard_2020-06-22-15-31-18](/uploads/2ee36a0ec8567ac62e19c8c176d25797/Clipboard_2020-06-22-15-31-18.png)
### Configure button
![Clipboard_2020-06-22-15-28-30](/uploads/e1dedd2edd40e84aa70ad80eda09d239/Clipboard_2020-06-22-15-28-30.png)
### Remove button
![Clipboard_2020-06-22-15-29-06](/uploads/b1957875604aba0710219c1ca2ce4908/Clipboard_2020-06-22-15-29-06.png)
### Upgrade button
![Clipboard_2020-06-22-15-27-02](/uploads/e4c981c3449d9735d1c727e3eabad6d0/Clipboard_2020-06-22-15-27-02.png)
## [#3 - Events Portal](https://events.gnome.org/)
### Default button
![image](/uploads/85a5b32253ca40684d37bcb99c546ab3/image.png)
* Text color: `#333`
* Background color: `#fff`
* Border color: `#ccc`
* Padding: `0.2em 0.7em 0.1em 0.7em`
* Font size: `13px`
* Font family: `'Helvetica Neue', Helvetica, Verdana, Arial, Sans`
#### Hover
![image](/uploads/b6eaf2d2308de4b683164de7fd8e6b79/image.png)
* Background color: `#e6e6e6`
* Border color: `#adadad`
#### Active
![image](/uploads/70f01351c4bb0f26f9a5b05a56b8d79f/image.png)
* Text color: `#fff`
* Box shadow: `1px 1px 4px rgba(20, 20, 20, 0.1) inset`
* Background color: `#0086b3`
* Border color: `#007cac`
* Background gradient: `linear-gradient(to bottom, #0086b3, #09c)`
### Grey button
![image](/uploads/3185cd12c85ac253dabf893e896d63a6/image.png)
* Text color: `#777`
* Background color: `#ececec`
* Border color: `#dfdfdf`
* Padding: `0.2em 0.7em 0.1em 0.7em`
* Font size: `13px`
* Font family: `'Helvetica Neue', Helvetica, Verdana, Arial, Sans`
#### Hover
![image](/uploads/7d9bc1a04cc819bbe0cd94bd15fc04c6/image.png)
* Text color: `#555`
* Background color: `#ececec`
* Background gradient: `linear-gradient(to bottom, #ececec, #e0e0e0)`
* Border color: `#bbb`
* Box shadow: `1px 1px 4px rgba(20, 20, 20, 0.1)`
#### Active
![image](/uploads/9c75091c1919956caa99271cd6cb6e98/image.png)
* Box shadow: `1px 1px 4px rgba(20, 20, 20, 0.1) inset`
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/4)
### Green button
![image](/uploads/6708a77eafcba1911513bf04a1fc7289/image.png)
* Text color: `#fff`
* Background color: `linear-gradient(to bottom, #73d216 0%, #4cae4c 100%)`
* Border: `1px solid #555753`
* Font family: `Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial`
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/5)
### Default
![image](/uploads/ef90c34bcd996d94590edd38919987ea/image.png)
![image](/uploads/0350a4dc3273c1f93e2338ad60600dc2/image.png)
![image](/uploads/46b9cdad33ed132b9283114198f8655c/image.png)
![image](/uploads/98c353f820d0cc588063e5a2df9e0709/image.png)
* Icon
* Background color: `#e9e9e9`
* Text color: `#333`
* Font family: `Source Sans Pro, Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial`
#### Hover
* Background color: `#919191`
* Text color: `#fff`
#### Active
* Background color: `#bababa`
* Background gradient: `linear-gradient(to bottom, #bababa, #e9e9e9)`
### Flat
![image](/uploads/e4024a5e831b03f482f908c3ad673b52/image.png)
* Icon
* Background color: `transparent`
## [#7 - Surveys](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/7)
### Primary
![image](/uploads/21f99eb6bb18aa584488a87453e5995b/image.png)
* Background color: `#4a86cf`
* Border color: `#306CB5`
* Text color: `#fff`
* Font family: `Helvetica Neue, Helvetica, Arial`
#### Hover
* Background color: `#286090`
* Border color: `#204d74`
### Default
![image](/uploads/7f6a694f43d5acc9dced6c15adbb79d8/image.png)
* Background color: `#fff`
* Border color: `#ccc`
* Text color: `#333`
* Font family: `Helvetica Neue, Helvetica, Arial`
#### Hover
* Background color: `#e6e6e6`
* Border color: `#adadad`
## [#8 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/8)
### White
![image](/uploads/b71fe892730cdb276f9d607d485c62d0/image.png)
* Background color: `#eee`
* Text color: `#333`
* Border color: `1px solid #d5d0d0`
* Font family: `Source Sans Pro`
# Mockups
Buttons are used for actions in the websites. The primary buttons should use the default buttons type, in GNOME Blue. There are many other variations, such as colors, sizes, and shapes that can be combined and used as secondaries, tertiaries... etc. Some colors can be used to draw user's attention (such as red for danger, orange or yellow for warning and green for success).
[Sample page](https://teams.pages.gitlab.gnome.org/Engagement/websites/general-website-resources/samples/buttons/)
## Default
![image](/uploads/bec09b64cc184250c14a0dc104cf429e/image.png)
## Outline
![image](/uploads/6d6427aa62f7c3ecdd2643f665dc336b/image.png)
## Squared
![image](/uploads/a72ffc36d775cd8a7679c2c94cf9c4d9/image.png)
## Other sizes
![image](/uploads/6d828e33149a77e17426a69ce5b23fa2/image.png)
## Disabled
![image](/uploads/28c347ce399b28ff77c206e6470a8a14/image.png)
## Links & text
![image](/uploads/ec9795c99e7da6285d6d926cc4eb01ce/image.png)
## Customized width
When the buttons are placed in row direction, they need to be in the same width. It also happens if you want to align your button with an input or any other element above your button.
![image](/uploads/a1921e96d85424bac2fe511d270e9121/image.png)Clarissa Lima BorgesClarissa Lima Borgeshttps://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/15Decide on which library the project will extend from2020-07-28T12:31:50ZClarissa Lima BorgesDecide on which library the project will extend fromThe goal of this assessment is to research and include the pros and cons of some libraries that we can use to build the GNOME UI library. Using vanilla CSS is also an option being considered :)
# Requirements
To get started with the pr...The goal of this assessment is to research and include the pros and cons of some libraries that we can use to build the GNOME UI library. Using vanilla CSS is also an option being considered :)
# Requirements
To get started with the project, we need to choose a library that helps us to develop GNOME's websites UI library. The library the project is going to extend from needs to meet the following requirements:
* **Customizable**: the developers need to be able to build elements and components fast and not to take too much work each of them while trying to make them look like our mockups. Considering this requirement, by choosing a library that already has elements and components, it's important to evaluate how close they are to how the GNOME UI library needs to look like, assuming this would take less time and work to adapt it.
* **Easy to learn**: make sure that contributors responsible for the GNOME websites don't need to make a huge effort to be able to use it. As a consequence of this, the adherence of the project will be improved.
* **Keeps GNOME web ecosystem looking consistent**: the library needs to provide possibilities for the project to set defaults up so that every website uses the same standards.
* **Extensible**: if some website needs an element or component that wasn't built in the library, the maintainer or some contributor can easily build on their own the component.
Other qualities that may influence the decision:
* Future-proof
* Modernity
* Documentation
* Being lightweight
# Using a Library vs. Working with Vanilla CSS
Using a library saves a lot of time when it comes to styling. Many libraries provide a good set of predefined elements and components that can **ease the development**. The con to using a library can be that if the library diverges too much on what we want the GNOME UI library to look like, it will require a great effort to override existing components and elements to style them (maybe even more than just starting them from scratch).
Meanwhile, building a library from scratch allows you to build your design and define your style sheet as you wish, **keeping the markup clean**. It gives you full control of your code, and your project doesn't have unnecessary code. But as mentioned, it means having to build everything from scratch, and it's really difficult to build everything that is needed for a library in this way.
# Libraries
I considered some libraries that I heard of recently and that I think are very popular, feel free to ask me to include some you think I should study and place here as well.
* [Bootstrap](#bootstrap)
* [Materialize CSS](#materialize-css)
* [PureCSS](#purecss)
* [Tailwind](#tailwind)
* [UIKit](#uikit)
## [Bootstrap](https://getbootstrap.com/)
Bootstrap is the most popular UI library, it's very easy to use and a lot of websites use it. It has lots of components ready to be used, which means you just have to add the classes to your HTML, and you are done. There are lots of themes that can be used to customize Bootstrap, this helps to find a better approach to start the GNOME UI library from, by choosing a theme that is closer to what we want the GNOME UI library to look like. On the other hand, when you need to customize it, it can be very painful.
## [Materialize CSS](https://materializecss.com/)
Materialize is a library based on Google's Materialize Design. According to its website, the library speeds up the development by providing default stylings that incorporate its custom components, is user experienced focused, and easy to work with as they provide good documentation and support. Like Bootstrap, Materialize allows you to use themes to help to build designs that look different from others. As Bootstrap, when you need to customize it, it can take a lot of work.
## [PureCSS](https://purecss.io/)
PureCSS is a set of small and responsive CSS modules that can be used in web projects. Pure is said to be extremely extensible by including Pure and writing some CSS on top of it, making sure that it works across browsers. You can import individual modules and start building the library just from the ones you need (like base or grids). Plus, Pure is very lightweight.
## [Tailwind](https://tailwindcss.com/)
It's a utility-first CSS framework that doesn't provide pre-styled components like buttons, cards, and so on. Instead, it gives us low-level utility classes that add shadows, colors in a certain way that we can build components with the help of these utility classes. This means having to write less CSS and being able to use Tailwind combined with our styles.
It's hard to ensure consistency on every website if they eventually need an element or component that is not defined in the original UI library (which would be GNOME's), even using Tailwind. However, building components with Tailwind is very easy, because the naming of the classes is very consistent. Plus, as soon as someone builds a new component (even on their HTML), they can easily extract their code and submit a Merge Request for the GNOME UI library to include the new component. Anything can be easily changed.
## [UIKit](https://getuikit.com/)
UIKit is a lightweight and modular framework for developing web interfaces, just like PureCSS, but it is more complete. Its very basic style can be extended with themes and is easy to create designs using it.
# Conclusion
In the end, Tailwind stays somewhere in the middle of using vanilla CSS and some other library: it's different from using a library that contains pre-built components, giving you the freedom to style yours, but it has utility classes that prevent you from spending too much time writing the base and also from struggling with accessibility classes, building a grid system, handling responsivity, etc. Compared to PureCSS and UIKit, it is a better approach to build a library because a complete CSS framework can be generated simply based on a configuration file that defines all the elements from the project. **Tailwind is the best use case for a complete custom design**.