GNOME HIG CSS Library issues
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues
2023-03-27T14:52:30Z
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/56
Code Tag
2023-03-27T14:52:30Z
Arijit Kundu
Code Tag
# 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)
None
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/2)
### Screenshot 1
![image](/uploads/0acbf34e65641bf80806d7d4995e5323/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-size: `90%`;
- font-family: `Menlo, Monaco, Consolas, "Courier New", monospace`;
#### Color:
- background: `rgba(0,0,0,0.1)`;
- color: `#c7254e`;
#### Spacing:
- padding: `1px`;
- border-radius: `4px`;
- padding: `1px`;
- line-height: `1.6`;
## [#3 - Events Portal](https://events.gnome.org/)
None
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/4)!
### Screenshot 1
![image](/uploads/5c796833b229e08031120ecc8386dc72/image.png)
### Elements used:
* `<pre>`
* `<code>`
# **`<pre>`**
#### Typography:
- font-size: `13px`;
- font-family: `Source Code Pro, Monaco, Bitstream Vera Sans Mono, Lucida Console, monospace`;
#### Color:
- color: `#777`;
- background-color: `#f5f5f5`;
#### Spacing:
- margin: `auto 1em auto 1em`;
- padding-left: `1em`;
- padding: `9.5px`;
- display: `block`;
- line-height: `1.42857`;
#### Other CSS:
- word-break: `break-all`;
- word-wrap: `break-word`;
#### Border:
- border: `1px solid #ccc`;
- border-left: `5px solid #ddd`;
- border-radius: `2px`;
# **`<code>`**
#### Typography:
- font-size: `inherit`;
#### Color:
- color: `inherit`;
- background-color: `transparent`;
#### Spacing:
- padding: `0`;
#### Other CSS:
- white-space: `pre-wrap`;
#### Border:
- border-radius: `0`;
<hr>
### Screenshot 2
![image](/uploads/cd62be219dc6ed63e0493b400bc7ff01/image.png)
### Elements used:
* `<blockquote>`
* `<code>`
# **`<blockquote>`**
#### Typography:
- font-size: `17.5px`;
#### Color:
- color: `#777`;
- background-color: `#d9edf7`;
#### Spacing:
- margin: `auto 1em auto 1em`;
- padding-left: `1em`;
- padding: `15px`;
#### Border:
- border: `1px solid transparent`;
- border-left: `5px solid #ddd`;
- border-radius: `2px`;
- border-color: `#bce8f1`;
# **`<code>`**
#### Typography:
- font-size: `90%`;
- font-family: `Source Code Pro, Monaco, Bitstream Vera Sans Mono, Lucida Console, monospace`;
#### Color:
- color: `#c7254e`;
- background-color: `#f9f2f4`;
#### Spacing:
- padding: `2px 4px`;
#### Border:
- border-radius: `2px`;
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/5)
### Screenshot 1
![image](/uploads/9b77114be655db53e6a7ebfff3ab9a15/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-size: `1em/15.008px`;
- font-family: `Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace`;
#### Color:
- color: `#c7c7c7`;
- background: `#333`;
#### Spacing:
- line-height: `1.4`;
### Screenshot 2
![image](/uploads/d366627c2fe1238323c8e79274fdcb32/image.png)
### Elements used:
* `<pre>`
* `<code>`
# **`<pre>`**
#### Typography:
- font-family: `Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace`;
- font-size: `1em/15.008px`;
#### Spacing:
- margin: `1em 0px`;
- line-height-large: `1.4`;
- width: `690px`;
# **`<code>`**
#### Color:
- color: `#c7c7c7`;
- background: `#3c3c3c`;
#### Spacing:
- padding: `0.5em/7.504px`;
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/6)
### Screenshot 1
![image](/uploads/ff44c4e2cdc24c8ca77c62cf65ca8daa/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-stack--monospace: `"SFMono-Regular",Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace`;
- font-weight: `400`;
- font-size--small--2: `81.25%`;
#### Color:
- background: `#1a1c1e`;
- color: `rgb(255 255 255 / 80%)`;
- border-color: `#303335`;
#### Spacing:
- border-radius: `0.2em`;
- border: `1px solid`;
- padding: `0.1em 0.2em`;
- line-height: `1.5`;
### Screenshot 2
![image](/uploads/82244128d4f677a9ba10aee525938c3d/image.png)
### Elements used:
* `<pre>`
# **`<pre>`**
#### Typography:
- font-stack--monospace: `"SFMono-Regular",Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace`;
- font-size--small--2: `81.25%`;
- font-weight: `400`;
#### Color:
- background: `#202020`;
- color: `#d0d0d0`;
#### Spacing:
- line-height: `1.5`;
- width: `720px`;
- padding: `0.625rem 0.875rem`;
## [#7 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/8)
None
## [#8 - Apps](https://apps.gnome.org/)
None
## [#9 - Forty](https://forty.gnome.org/)
None
## [#10 - Os](https://os.gnome.org/)
None
## [#11 - Circle](https://circle.gnome.org/)
None
## [#12 - Release](https://release.gnome.org/)
### Screenshot 1
![image](/uploads/2375a1829a6ec886589745b3fe0d7cf2/image.png)
### Elements used:
* `<kbd>`
# **`<kbd>`**
#### Typography:
- font-family: `monospace`;
- font-size: `70%/12.6px`;
- font-weight: `400`;
#### Color:
- background-color: `rgb(0 0 0 / 30%)`;
- color: `#ffffff`;
#### Spacing:
- padding: `0.2rem 0.4rem/3.6px 7.2px`;
- border-radius: `2px`;
- line-height: `1.6`;
### Screenshot 2
![image](/uploads/cc32502a84dee042a249bb68a848241f/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-family: `monospace`;
- font-size: `18px`;
- font-weight: `400`;
#### Color:
- color: `#ffffff`;
#### Spacing:
- line-height: `1.6`;
- width: `auto`;
# Mockups
![image](/uploads/77d90cc0935e7cd7ae7c74abfed1442c/image.png)
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/39
Tables
2022-11-18T09:58:41Z
Pranjay Pathak
pranjaypathak411@gmail.com
Tables
# 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)
* [Surveys](#7-surveys)
* [Wiki](#8-wiki)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/1)
NONE
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/2)
NONE
## [#3 - Events Portal](https://events.gnome.org/)
NONE
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/4)
NONE
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/5)
### Screenshots
![t4.2](/uploads/ae7b1728829b0ac333efdd8c2eadb875/t4.2.png)
![t4.3](/uploads/e9e5507d17c30434ddf30869e55b7635/t4.3.png)
![t4.1](/uploads/52376b53fa3b62459cd8a417c6cf87a2/t4.1.png)
### Attributes
1. Table `<table>`
- margin: 0.5em 0
2. Table-header `<thead>`
- Table-row `<tr> <td>`
- color : `#333`
- background : `#fff`
- padding : 4px
3. Table-body `<tbody>`
- Table-row 0th-position `<tr> <td>`
- color : `#333`
- background : `#fff`
- padding : 4px
- Table-row odd-position `<tr> <td>`
- background : `#f9f9f9`
- padding :0.25em
- border-bottom: 1px solid `#e9e9e9`
- Table-row even-position `<tr> <td>`
- background : `#fff`
- padding :0.25em
- border-bottom: 1px solid `#e9e9e9`
4. Table-footer `<tfoot>`: nil
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/6)
NONE
## [#7 - Surveys](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/7)
NONE
## [#8 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/8)
### Screenshot
![Screenshot_from_2021-03-28_11-23-31](/uploads/ae7941ab73d3f1e56031bed206d3e2d0/Screenshot_from_2021-03-28_11-23-31.png)
### Attribute
1. Table `<table>`
* margin: 0.5em 0
2. Table-header `<thead>` : nil
3. Table-body `<tbody>`
* Table-row 0th-position `<tr> 0th <td>`
- color : `#333`
- background : `#fff`
- padding : 4px
* Table-row odd position `<tr> <td>`
- background : `#f9f9f9`
- padding :0.25em
- border-bottom: 1px solid `#e9e9e9`
* Table-row even-position `<tr> <td>`
- background : `#fff`
- padding :0.25em
- border-bottom: 1px solid `#e9e9e9`
4. Table-footer `<tfoot>`: nil
### Screenshot
![Screenshot_from_2021-03-28_11-35-09](/uploads/1dda5876a7520d7b2255105f246836c4/Screenshot_from_2021-03-28_11-35-09.png)
### Attributes
1. Table `<table>`
- margin : 0.5em
2. Table-header `<thead>` : nil
3. Table-body `<tbody>`
- Table-row 0th-Position`<tr> <td>`
- color : `#333`
- background : `#fff`
- padding : 4px
- Table-row odd-Position `<tr> <td>`
- background : `#f9f9f9`
- padding : 0.25em
- Table-row even-Position`<tr> <td>`
- background : `#fff`
- padding : 0.25em
- Table cell
- background-colors : `#9db8d2` , `#c5d2c8`
4. Table-footer `<tfoot>`: nil
### Screenshot
![Screenshot_from_2021-03-27_13-00-44](/uploads/48020ab1a36c589731313a86f009d014/Screenshot_from_2021-03-27_13-00-44.png)
### Attributes
1. Table `<table>`
2. Table-header `<thead>` : nil
3. Table-body `<tbody>`
- Table-row 0th Index `<tr> <td>`
- color : `#333`
- background : `#fff`
- padding : 4px
- Table-row Odd Index `<tr> <td>`
- background : `#f9f9f9`
- Table-row Even Index `<tr> <td>`
- background : `#fff`
- table cell
- background-colors: `#ff8080`
4. Table-footer `<tfoot>`: nil ;
# Table structure
1. Table `<table>`
2. Table-header `<thead>`
- Table-row `<tr>`
- Header-cell `<th>`
3. Table-body `<tbody>`
- Table-row `<tr>`
- Data-cell `<td>`
4. Table-footer `<tfoot>`
- Table-row `<tr>`
- Data-cell `<td>`
# Mockups
1. ![Screenshot_from_2021-04-12_02-25-58](/uploads/a916d02e27d5e600a94b949d7cdfa77e/Screenshot_from_2021-04-12_02-25-58.png)
* body{
font-family: Source Sans Pro;
}
* `Table`
table{
- margin: 50px;
- box-shadow: 0px 0px 2px `rgba( 0, 0, 0, 0.5 )`;
- font-weight: normal;
- border-collapse: collapse;
- background-color: `#fff`;
}
* `Table header`
thead{
border-bottom: 2px solid `rgba(0,0,0,0.2)`;
}
* `Table-header-cell`
th {
- color:`#333`;
- margin:0px;
- padding:14px 18px;
- font-size: 15px;
- text-align: center;
}
* `Table-body-cell`
td {
- color: `rgba(0,0,0,0.7)`;
- margin:0px;
- padding:12px 18px;
- font-size: 14px;
- border-bottom:1px solid `rgba(0,0,0,0.1)`;
- text-align:center;
}
2.![Screenshot_from_2021-04-12_02-33-30](/uploads/fc11a625a081ef4c4645643bddd3b5e7/Screenshot_from_2021-04-12_02-33-30.png)
- table tr:nth-child(even)
- background: `#F2F2F2`;
3.![Screenshot_from_2021-04-12_02-46-14](/uploads/c81ad808fff7489429cba7647689190c/Screenshot_from_2021-04-12_02-46-14.png)
- table tr:nth-child(2)
- background: `#d9d9d9`; grey-200
- table tr:nth-child(3)
- background: `#c3ddf4`; gnome-blue-200
- table tr:nth-child(4)
- background: `#ffc2c2`; red-200
- table tr:nth-child(5)
- background: `#ffe5a8`; yellow-200
Pranjay Pathak
pranjaypathak411@gmail.com
Pranjay Pathak
pranjaypathak411@gmail.com
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/10
Footers
2022-11-07T15:11:40Z
Clarissa Lima Borges
Footers
# 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/general-website-resources/-/issues/1)
### Screenshot
![image](/uploads/db41bb8e91f709fa33162154df86a5dc/image.png)
### Elements
* Lists
* Anchors
* Icons
### Typography
* Font-family: `Cantarell, 'Droid Sans', ubuntu, 'DejaVu Sans', Arial, Source Sans Pro`
### Colors
* Text: `#ffffff`
* Background: `#1b1b1b`
### Spacing
* Padding (footer): `30px 0px 30px 0px`
* Padding (links): `0 15px`
* Padding (footer box): `0 15px 0 15px`
* Padding (footer bottom): `20px 0px 20px 0px`
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/2)
### Screenshot
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/511ff62f08260134e4ed414b7882a868/image.png)
### Elements
* Lists
* Anchors
### Typography
* Font-family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
### Colors
* Text: `#e7e7e7`
* Background: `#919191`
### Spacing
* Padding (footer): `30px 10px 10px 10px`
* Padding (links): `0 15px`
* Margin (menu columns): `0 10px 0px 80px`
* Margin (menu items): `6px 0`
* Margin (footnotes): `10px 28px`
## [#3 - Events Portal](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/3)
### Screenshot
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/2d0fa4b4abef572ea8352b28fbdc9745/image.png)
### Elements
* Lists
* Anchors
### Typography
* Font-family: `Cantarell, 'Droid Sans', ubuntu, 'DejaVu Sans', Arial`
* Font-family (footnotes): `'Liberation Sans'`
### Colors
* Text: `#919191`
* Background: `#111111`
### Spacing
* Margin-top (footer): `80px`
* Padding (footer): `40px 20px 20px 20px`
* Padding (links): `0 15px`
* Margin (menu columns): `0 10px 5px 40px`
* Margin (menu items): `6px 0`
* Margin-top (footnotes): `20px`
* Padding (footnotes): `0 15px`
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/4)
### Screenshot
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/502a501a2d7ab25e5c3c2d2c58c77442/image.png)
### Elements
* Lists
* Anchors
* Paragraphs
* Headings
### Typography
* Font-family: `'Source Sans Pro', Cantarell, Droid Sans, Ubuntu, 'DejaVu Sans', Arial`
* Font-family (footer): `'Liberation Sans'`
### Colors
* Text: `#919191`
* Text (links): `#fff`
* Background: `#000`
### Spacing
* Padding (footer): `40px 20px 0 0`
* Padding (footer container): `0 15px`
* Margin (footer container): `auto`
* Margin (headings): `20px 10px 0 0`
* Margin-bottom (paragraphs): `10px`
* Margin (anchors): `6px 0`
* Margin-top (footnotes): `20px`
* Padding (footnotes): `0 15px`
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/5)
None
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/6)
### Screenshot
![image](/uploads/2ec48227658a96e6552f6d4ecc869763/image.png)
### Elements
* Lists
* Anchors
### Typography
* Font-family: `'Source Sans Pro', Cantarell, Droid Sans, Ubuntu, 'DejaVu Sans', Arial`
* Font-family (footer): `'Liberation Sans'`
### Colors
* Text: `#ffffff`
* Background: `#000000`
## [#7 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/8)
### Screenshot
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/1087a0dde135332f1ac31136bd0f9e02/image.png)
### Elements
* Anchors
* Input
* Buttons
### Typography
* Form: `Cantarell`
* Copyright: `Source Sans Pro`
### Colors
* Background: `#000`
* Text (copyright): `#fff`
* Text (form): `#000`
### Spacing
* Padding: `16px`
* Margin (content): `auto`
* Margin-top (copyright): `26px`
* Margin-right (form elements): `6px`
* Padding (input): `1px`
* Padding (buttons): `2px 8px`
## [#8 - Apps](https://apps.gnome.org/en-GB/)
### Screenshot
![image](/uploads/4d06cfd8733689a91cf1c7a6393136cb/image.png)
### Elements
* Lists
* Anchors
### Typography
* Font-family: `'Source Sans Pro', Cantarell, Droid Sans, Ubuntu, 'DejaVu Sans', Arial`
* Font-family (footer): `'Liberation Sans'`
### Colors
* Text: `#deddda`
* Background: `#000000`
### Spacing
* Padding-top-bottom: `15px`
* Margin-top-bottom (content): `10px`
* Padding-top-bottom (copyright): `7px`
* margin-let-right: `249px`
### On Hover
![image](/uploads/de9d0e158d6207df0c6572d9e29c104d/image.png)
* Text: `#99c1f1`
## [#9 - Forty](https://forty.gnome.org/)
### Screenshot
![image](/uploads/28dc8979dde2fc2d068d097b3d312075/image.png)
### Elements
* Lists
* Anchors
### Typography
* Font-family: `Cantarell, sans-serif`
### Colors
* Text: `#deddda`
* Background: `#000000`
## [#10 - Os](https://os.gnome.org/)
### Screenshot
![image](/uploads/a91b15962ffd05275fe0f89750aef387/image.png)
### Elements
* Lists
* Anchors
### Typography
* Font-family: `"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif`
* Font-family (footer): `'Liberation Sans'`
### Colors
* Text: `#ffffff`
* Background: `#1a1622`
## [#11 - Circle](https://circle.gnome.org/)
### Screenshot
![image](/uploads/3f7c6655fd7ae334b44b2f504e543a65/image.png)
### Elements
* Lists
* Anchors
### Typography
* Font-family: `"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif;
font-weight: 400;`
* Font-size: `14.4px`
### Colors
* Text: `#ffffff`,`#8ff0a4`
* Background: `#000000`
## [#12 - Release](https://release.gnome.org/)
None
# Mockups
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/9
Headers
2022-11-07T15:11:38Z
Clarissa Lima Borges
Headers
# 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/general-website-resources/-/issues/1)
### Screenshot
![image](/uploads/060020eb2142e4ae51045941ad18a444/image.png)
### Elements
* [Image](https://www.gnome.org/wp-content/themes/gnome-grass/images/gnome-logo.svg)
* Lists
* Anchor
* Input
### Typography
* Font-family: `Cantarell, Droid Sans, Ubuntu, DejaVu Sans, Arial, Source Sans Pro`
### Colors
* Background: `#4a86cf`
* Border: `#3968a1`
* Text: `#fff`
### Hover
![image](/uploads/14f3ad615d309f83147f3e29ddfbb077/image.png)
* color: `#8ed5ff`
* background: `#4a86cf`
### Active
![image](/uploads/c5157e5c4726d33b43fcb30883a4b53b/image.png)
* color: `#ffffff`
* fill-color: `#6797ce`
* background: `#4a86cf`
### Spacing
* Padding menu items: `15px`
* Header margin: `160px`
* font-size: `18px`
### Media (smaller screens)
* Menu icon (button)
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/2)
### Screenshot
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/d05a753089108b27b934c1d1f3124c68/image.png)
### Elements
* [Image](https://extensions.gnome.org/static/images/gnome-extensions.2635f103c955.svg) and locker icon
* Lists
* Anchor
* Buttons
### Typography
* Font-family: `Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial`
### Colors
* Background: `#4a86cf`
* Border: `#3968a1`
* Text: `#fff`
### Spacing
* Margin left logo: `7px`
* Padding logo: `6px`
* Padding menu items: `15px`
### Media (smaller screens)
* Menu icon (button)
* User icon (anchor)
## [#3 - Events Portal](https://events.gnome.org/)
### Screenshots
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/1df896f4e89f735807478ce277d0630f/image.png)
#### Event view
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/d507fa0e5ad26d611382bcbd08459f4c/image.png)
### Elements
* [Image](https://events.gnome.org/static/custom/files/logo.png) and locker icon
* Lists
* Anchor
* Buttons
### Typography
* Font-family (menu items): `"Roboto Light"`
* Font-size (menu items): `14px`
* Font-family (buttons): `"Roboto"`
* Font-size (buttons): `13px`
### Colors
* Background: `#4a86cf`
* Text: `#fff`
### Spacing
* Margin logo: `6px 6px 0 40px`
* Margin buttons container: `0.5em 0.5em 0 0`
* Padding global menu: `3px 20px 0 20px`
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/4)
### Screenshot
![image](/uploads/d1b58d976ca9a80ba14c8317b9587993/image.png)
### Elements
* [Image](https://planet.gnome.org/img/gnome-logo.svg) and locker icon
* List
* Anchor
* Button
* Link
### Typography
* Font-family: `Source Sans Pro, Cantarell, Droid Sans, Ubuntu,DejaVu Sans, Arial`
* Font-size: `15px`
### Colors
* Background: `#4a86cf`
* Background (donation banner): `#4cae4c`
* Text: `#fff`
### Spacing
* Padding logo: `6px`
* Padding items: `15px`
### Media (smaller screens)
* Menu button
* Padding (menu icon): `9px 10px`
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/5)
### Screenshots
![image](/uploads/1cdddac2f9e3bafa57d4ac2e38a92492/image.png)
### Elements
* [Image](https://discourse.gnome.org/uploads/default/original/1X/dc9ca5f6a714c30e8c9c573dab03a6dc0cc79a89.png) and user avatar
* Svg
* User icon
* Search icon
* Menu icon
* Lists
* Anchor
* Input
### Typography
* Font-family: `Source Sans Pro, Cantarell, Droid Sans, Ubuntu,DejaVu Sans, Arial`
* Font-size: `15px`
### Colors
* Background: `#111111`
* Text: `#dddddd`
### Hover: button
![image](/uploads/6cb575156ced869d5077de2ffd89bb04/image.png)
* color: `#222222`
* background: `#14aeea`
### Hover: icon
![image](/uploads/0cb57479f64e740fdbf79f3f69fbb50c/image.png)
* color: `#ffffff`
* background: `#909090`
### Spacing
* Padding (menu items): `6px 10px`
* Padding (dropdown menu items): `3.75px 7.5px`
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/6)
### Subheader Screenshot
![image](/uploads/4030c6aa4990346da929b0f10f77bdf1/image.png)
### Elements
* Image
* Paragraph
### Typography
* Font-family: `"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif`
* Header2 Font-size: `27px`
* Paragraph Font-size: `18px`
* font-weight: `400`
### Colors
* Background: `#241f31`
* Text: `#deddda`
### Spacing
* width: `85%`
* margin: `0 auto`
* max-width: `900px`
* padding: `3rem 0`
* line-height: `1.6`
## [#7 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/8)
### Screenshot
![image](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/uploads/8888e3ebc69bc451a1805d91556da34c/image.png)
### Elements
* Anchor
* Image
* List
### Typography
* Font-family: `"Source Sans Pro"`
* Font-size: `0.9em`
### Colors
* Background: `#4a86cf`
* Text: `#fff`
### Spacing
* Padding: `16px 4px` (anchors inside lists)
## [#8 - Apps](https://apps.gnome.org/en-GB/)
### Screenshot
![image](/uploads/3b5ee468eb92d7b2bebf179076388a40/image.png)
### Elements
* Anchor
* Image
* List
### Typography
* Font-family: `"Cantarell", sans-serif`
* Font-size: `17px`
### Colors
* Background: `#241f31`
* Text: `#deddda`
### On Hover
* Background: `#3d3846`
### Spacing
* Header margin: `210px`
* Header padding: `30px`
* Header-height: `65px`
* Element padding: `17px 17px 11px 11px`
* font-size: `17px`
## Subheader Screenshot
![image](/uploads/d5290fc5ad970ade1d63c2d45d40fe75/image.png)
### Elements
* Image
### Typography
* Font-family: `Cantarell, sans-serif`
* Header1 Font-size: `45px`
* Font-size: `17px`
### Colors
* Background: `#241f31`
* Text: `#deddda`
### Spacing
* padding: `90px 10px 60px`
* grid-template-columns: `0.85fr 1fr`
* column-gap: `60px`
* row-gap: `35px`
* max-width: `900px`
* margin: `auto`
## [#9 - Forty](https://forty.gnome.org/)
None
## [#10 - Os](https://os.gnome.org/)
None
## [#11 - Circle](https://circle.gnome.org/)
### Screenshot
![image](/uploads/8a9326ee315812bb671ddd999ad6e04b/image.png)
### Elements
* Image
### Spacing
* margin: `0`
* display: `block`
* width: `150px`
* height: `auto`
### Subheader Screenshot
![image](/uploads/a9ebbd59b2649618e595a98da9c40713/image.png)
### Elements
* Image
* Paragraph
### Typography
* Font-family: `"Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif`
* Header2 Font-size: `27px`
* Font-size: `18px`
* font-weight: `800`
### Colors
* Background: `linear-gradient(90deg, #26a269 0%, #2ec27e 100%)`
* Text: `#f6f5f4`
### Spacing
* width: `700px`
* display: `block`
* max-width: `30em`
* margin: `1.5rem auto 3rem`
* padding: `3rem 0`
* line-height: `1.6`
* letter-spacing: `-0.01em`
* word-spacing: `-0.01em`
## [#12 - Release](https://release.gnome.org/)
None
# Mockups
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/18
Alerts
2022-11-07T15:11:34Z
Clarissa Lima Borges
Alerts
# 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)
* [Surveys](#7-surveys)
* [Wiki](#8-wiki)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/1)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/2)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#3 - Events Portal](https://events.gnome.org/)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/4)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/5)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/6)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#7 - Surveys](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/7)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#8 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/8)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
# Mockups
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/51
Lists
2022-09-09T16:05:52Z
Pooja Patel
Lists
# 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 Patel
Pooja Patel
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/61
Tooltips
2021-05-16T18:15:27Z
Lucas Leite Macedo Maduro
Tooltips
# 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)
* [Surveys](#7-surveys)
* [Wiki](#8-wiki)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/1)
NONE
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/2)
NONE
## [#3 - Events Portal](https://events.gnome.org/)
### Screenshot
![Screenshot_from_2021-05-06_14-23-45](/uploads/e0c03a98449d7669a70dc97850dcb412/Screenshot_from_2021-05-06_14-23-45.png)
Place the component screenshot here
### Typography
* font-size: ```1em;```
* font-family: ```'Liberations Sans', sans-serif;```
### Colors
* background-color: ```#000000;```
* text-color: ```#FFFFFF;```
### Spacing
* line-height: 12px
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/4)
### Screenshot
![Screenshot_from_2021-05-06_14-54-56](/uploads/aa300876834853a22b2d0b4ffb115e0c/Screenshot_from_2021-05-06_14-54-56.png)
### Elements
* Person info
### Typography
* font-family: ```Source Sans Pro;```
* font-size: ```13px;```
### Colors
* background-color: ```#000000;```
* text-color: ```#FFFFFF;```
### Spacing
* line-height: ```12px;```
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/5)
NONE
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/6)
NONE
## [#7 - Surveys](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/7)
### Screenshot
![Screen_Shot_2021-05-06_at_3.06.39_PM](/uploads/3b6d535233646c25d22289bfdfa47023/Screen_Shot_2021-05-06_at_3.06.39_PM.png)
### Elements
NONE
### Typography
* font-family: ```Noto Sans;```
* font-size: ```14px```;
### Colors
* color: ```#fff;```
* background-color: ```#337ab7;```
* border-color: ```#2e6da4;```
### Spacing
* padding: ```6px 12px;```
* line-height: ```1.42857143;```
### Media (smaller screens)
NONE
## [#8 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/8)
NONE
# Mockups
### Screenshot
![Screenshot_from_2021-05-06_15-34-55](/uploads/b953f1728f2d7ee077d11aea34d7d2b3/Screenshot_from_2021-05-06_15-34-55.png)
### Typography
* font-family: ```Source Sans Pro;```
* font-style: ```normal;```
* font-weight: ```normal;```
### Colors
* color: ```#fff;```
* background-color: ```#5E5E5E;```
### Spacing
* border-radius: ```6px;```
* line-height: ```18px;```
Lucas Leite Macedo Maduro
Lucas Leite Macedo Maduro
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/23
[Pinned] Current State of the Project (Evaluation, Implementation, Backlog)
2021-04-22T17:50:27Z
Claudio Wunder
cwunder@gnome.org
[Pinned] Current State of the Project (Evaluation, Implementation, Backlog)
### In Progress
**We're currently doing the evaluation of**
- [Alerts](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/18)
- [Pagination](https://gitlab.gnome.org/Teams/Engagement/websites/general-...
### In Progress
**We're currently doing the evaluation of**
- [Alerts](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/18)
- [Pagination](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/12)
- [Cards](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/11)
- [Lists](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/51)
- [Tables](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/39)
- [Labels](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/58)
- [Links](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/59)
These components are being evaluated, and are ready to be developed.
--------
**We're currently doing the implementation of:**
- Nothing.
These components are a work-in-progress (WIP) and need contribution in order to be completed. The "completed" status includes a code complete status and also included documentation of that component.
---------
### Backlog
**These components are the next ones to be evaluated:**
- **Tables:** (`<table>`, `<td>`, `<th>`, `<tr>`): A table is an HTML element that contains sets of data. Currently, some pages of GNOME.org use HTML tables. Tables are usually stored to visualize sets of data/information. And can be used for many purposes, for example, a table containing information of attendees to GUADEC, or to create a "Calendar".
- **Label:** A label is an HTML element that can be used to identify information, or as it says, label information. They are also used in a couple of GNOME websites, such as GTK.org for example.
- **Lists** (`<ul>`, `<li>`, `<ol>`): A list is an HTML element used usually on a text notation, within paragraphs. But can also be used to stylise other components. Footers and Headers, for example, are mostly based on Lists. Dropdowns too.
- **Tooltips:** A tooltip is a piece of information that appears usually when you're hovering an HTML component, whilst there are many kinds of tooltips (based purely on CSS, or based on the `title` attribute, or JavaScript combination) they have something in common, provide information to the user.
- **Dropdowns:** A dropdown is usually considered a combination of two HTML elements (List and Button) and sometimes is considered as being an HTML component, whilst there is no single element for a Dropdown, it's still considered as an HTML element. Composite HTML elements are common (Lists, Tables...). There are many ways of doing dropdowns (purely CSS, JavaScript). Dropdowns usually allow people to interact with the page by creating actions items. Eg.: "Social Media" dropdown contains a set of options of "Social media" and when you click an option it opens the page.
- **Links** (`<a>`): Links are a fundamental part of every website.
- how should links look by default (colour, font-family, font-size, font-weight, margins...,)
- how should they look when you hover them?
- how should they look when you accessed/visited them?
- **Paragraphs** (`<p>`): Paragraps are used for containing pieces of text and are fundamental.
- what should be the default paragraph margins, padding, font size, colour, etc.
- **Text Styling** (`<b>`, `<i>`, `<u>`, `<s>`, `<span>`): Styling of text for the website.
- **Images** (`<img>`): how should be the base styling of images? Do they have margins?
- **Code** (`<code>`, `<pre>`): For styling code blocks. Usually used in Documentation or Blog posts.
These components need to have their own Issues created following the `COMPONENT` template.
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/11
Cards
2021-04-10T18:54:32Z
Clarissa Lima Borges
Cards
# 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)
* [Surveys](#7-surveys)
* [Wiki](#8-wiki)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/1)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/2)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#3 - Events Portal](https://events.gnome.org/)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/4)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/5)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/6)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#7 - Surveys](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/7)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
## [#8 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/general-website-resources/-/issues/8)
### Screenshot
Place the component screenshot here
### Elements
* Item 1
* Item 2
### Typography
* Item 1
* Item 2
### Colors
* Item 1
* Item 2
### Spacing
* Item 1
* Item 2
### Media (smaller screens)
* Item 1
* Item 2
# Mockups
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/12
Paginations
2021-04-09T19:19:11Z
Clarissa Lima Borges
Paginations
# 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)
* [Surveys](#7-surveys)
* [Wiki](#8-wiki)
* [Mockups](#mockups)
## Evaluation (authored by @roginaldosemog and @lucasqmc)
## Main Website
### Pagination
![pagination-1](/uploads/1eae46112d0bc735f74a696f50a888ae/pagination-1.png)
* Text Color: ```#555```
* Background Color: ```transparent```
* Border: ```border: 1px solid #e9e9e9```
* Border Width: ```border-width: 2px```
* Border Radius: ```border-radius: 2px```
* Element Margin: ```margin: 0 8px 0 0```
### Hover
* Text Color: ```#333```
* Background Color: ```#f8f8f8```
### Selected (Current class)
* Text Color: ```#333```
* Background Color: ```#f8f8f8```
## Extensions
### Pagination
![2-paginations](/uploads/ab4059cbea8ea5c07447ec088f819132/2-paginations.jpeg)
* Div Background Color: ```#555```
* Font Family: ```Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial```
* Text Color: ```#204a87```
* Padding: ```padding: 3px```
### Selected (Current class)
* Text Color: ```#222```
* Background Color: ```#fff```
* Border: ```border: 1px solid rgb(200, 200, 200)```
* Border Radius: ```border-radius: 4px```
## Events Portal
No pagination component found
## Planet
No pagination component found
## Discourse
No pagination component found
## Developer Center
The pagination printed below can be found in a google enhanced search inside the website.
### Pagination
![3-paginations](/uploads/a7b21cecb0e1f75e93fa702ab35c0dc7/3-paginations.jpeg)
* Font Family: ```Arial```
* Text Color: ```#222```
### Selected
* Font Weight: bold
## Surveys
No pagination component found
## Wiki
### Pagination
![pagination-4](/uploads/578b5d5137728060822d0a7052dee00c/pagination-4.png)
* Text Color: ```#3465a4```
* Border: ```border-bottom: 1px dotted #888```
### Selected
* Text Color: ```black```
* Border: none
# Mockups (authored by @pooja724patel)
An updated design for the Paginations has been created keeping in mind the existing design language as seen in the _Evaluation_ above. Care has been taken to ensure consistency and harmony between all GNOME elements designed until now, for enhancing usability and aesthetic appeal.
## Pagination
![image](/uploads/ceb179103002c3c19c9282ec9dfcff3c/image.png)
The Pagination incorporates arrows and displays the first and last page.
This is done to ensure that the user has an idea of the total number of pages and can navigate them using both arrows and clicking on their desired page number.
**Global Specifics**
- Dimensions:
- Box:
- height: 42px
- width: 42px
- border-radius: 0.25
- Typography:
- height: 22px
- width: 11px
- left: 15px
- top: 11px
- Arrow:
- height: 14px
- width: 25px
- left: 13px
- top: 11px
- Dotted element:
- height: 26px
- width: 63px
- top: 15px
- Typography:
- font-family: Source Sans Pro;
- font-size: 19px;
- font-style: normal;
- font-weight: 400;
- line-height: 28px;
- letter-spacing: 0.015em;
- text-align: left;
### States
#### Base
![image](/uploads/cdc18168f07484766b834231517f53f5/image.png)
**Specifics**
- Colors:
- Box:
- Fill Type: Solid
- Background Color: `#d9d9d9` `gray-200`
- Typography Color: `#262626` `gray-900`
- Box [selected]:
- Fill Type: Solid
- Background Color: `#4295db` `gnome-blue-500`
- Typography Color: `#f2f2f2` `gray-100`
- Arrows:
- Fill Type: Solid
- Background Color: `#d9d9d9` `gray-200`
- Vector Color: `#4295db` `gnome-blue-500`
- Dotted Element:
- Fill Type: Solid
- Element Color: `#d9d9d9` `gray-200`
#### On Hover: Page Number
![Screenshot_4](/uploads/0381c75c99060abedeab7261f797f036/Screenshot_4.png)
- Dimensions:
- Box:
- height: 42px
- width: 42px
- border-radius: 0.25
- border-width: 3px
- Colors:
- Box [hover]:
- Fill Type: Solid
- Background Color: `#d9d9d9` `gray-200`
- Typography Color: `#262626` `gray-900`
- Border: `#4295db` `gnome-blue-500`
- Opacity: 50%
#### On Hover: Arrow
![Screenshot_5](/uploads/7b8ca6180041303f748b6f45ad128249/Screenshot_5.png)
- Colors:
- Box [hover]:
- Fill Type: Solid
- Background Color: `#4295db` `gnome-blue-500`
- Vector Color: `#f2f2f2` `gray-100`
# Prototypes
Based on the above Pagination mockup I have created prototypes of:
1. Pagination + Go-to-Page selector
2. Navigation Bar
These will enable a complete view of how paginations can be displayed on a webpage. The added elements incorporate existing changes _(if made)_ in other issues.
## 1. Pagination + Go-to-Page selector
Websites such as GNOME Extensions have a huge number of pages. Adding a _Go-to-Page_ selector will enable quick and easy navigation while keeping a clean and minimalist design.
![Screenshot_1](/uploads/cc8297468427c53169e68d8c02922f5b/Screenshot_1.png)
## 2. Navigation Bar
In addition to a _Go-to-Page_ selector, a search bar and sort-by dropdown can be provided to enhance convenience and flexibility. All the elements are grouped in a coherent navigation pane.
![image](/uploads/da265fc167090d77fd2308360f002e67/image.png)
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/14
Inputs
2021-03-19T13:14:43Z
Clarissa Lima Borges
Inputs
# 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 Borges
Clarissa Lima Borges
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/13
Buttons
2021-03-13T00:03:42Z
Clarissa Lima Borges
Buttons
# 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 Borges
Clarissa Lima Borges
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/15
Decide on which library the project will extend from
2020-07-28T12:31:50Z
Clarissa Lima Borges
Decide on which library the project will extend from
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 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**.