👈 This is the box to rule all modules. 👇
Module: Grid - Introduction
The grid is the basic module to provide boxes for all of your modules. It is a global module, which means it is not scoped and can (also should) be used everywhere on the site.
The grid class provides a margin around the box and a hidden overflow.
The grid-row class actually holdes the module and provides a flexbox-box as well as a grid-system for the modules. It also provides the white box and justifies the content with a space between.
The grid class can be used without the code grid-row, but you can't use the grid-row without the grid wrapper.
<section class="grid">
"grid" will work without "grid-row"
</section>
<section class="grid">
<div class="grid-row">
But the grid-row won't work without "grid"
</p>
</section>
Module: Grid - full width
The grid-cell class indicates a box within the grid. The grid-system can be divided in 3 grid-cells (width of one grid-cell = x) that can also be combined.
A grid-cell can't be used without the grid-row element. All grid-cell elements must be wrapped with the grid-row element
The x3 class indicates an grid-cell, which combines the width of all 3 grid-cells (width of one grid-cell = x). The x3 is the short form of x*3.
Toffee chocolate cake lollipop
Cupcake ipsum dolor sit amet liquorice lollipop apple pie. Tiramisu pudding pastry chocolate bar icing. Donut sweet candy canes liquorice pie icing. Cookie ice cream sweet roll jujubes carrot cake dessert bear claw. Carrot cake fruitcake soufflé jelly beans jelly beans powder. Halvah cookie croissant jelly beans gummi bears soufflé cake tart jelly-o. Cheesecake cake chocolate chocolate gummi bears lemon drops.
<article class="grid-row">
<div class="grid-cell x3">
<h2>Title</h2>
<p>Text</p>
</div>
</article>
Module: Grid - 2:1 / 1:2
The x2 class indicates an grid-cell, which combines the width of 2 grid-cells (width of one grid-cell = x). The x2 is the short form of x*2.
The x1 class indicates an grid-cell, with the width of 1 grid-cell.
Both grid-cells can be placed in their natural order and will take their given space.
Toffee chocolate cake lollipop
Cupcake ipsum dolor sit amet liquorice lollipop apple pie. Tiramisu pudding pastry chocolate bar icing. Donut sweet candy canes liquorice pie icing. Cookie ice cream sweet roll jujubes carrot cake dessert bear claw.
Cookies
Carrot cake fruitcake soufflé jelly beans jelly beans powder. Halvah cookie croissant jelly beans gummi bears soufflé cake tart jelly-o.
/* [2:1] */
<div class="grid-row">
<article class="grid-cell x2">
<h2>Main part</h2>
<p>Text</p>
</article>
<aside class="grid-cell x1">
<h2>Aside</h2>
<p>Text</p>
</aside>
</div>
/* [1:2] */
<div class="grid-row">
<aside class="grid-cell x1">
<h2 class="headline-2">Aside</h2>
<p>Text</p>
</aside>
<article class="grid-cell x2">
<h2 class="headline-1">Main part</h2>
<p>Text</p>
</article>
</div>
Module: 1:1:1
The x1 class indicates an grid-cell, with the width of 1 grid-cell. You can also use the x1-fix class, if you need an grid-cell that does not change the width of one grid grid-cell, but is fixed.
All grid-cells can be placed in their natural order and will take their given space. You can also wrap the grid-cells together as seen in the next module.
1 - I am fixed.
2 - I will vary my width.
3 - I will vary my width.
<article class="grid-row">
<div class="grid-cell x1-fix"> 1 - I am fixed.</div>
<div class="grid-cell x1"> 2 - I will vary my width.</div>
<div class="grid-cell x1"> 3 - I will vary my width.</div>
</article>
Module: Grid - [2 : [1,1]] / [[1,1] : 2]
We can also wrap grid-cells together, so they will flow with the col, but not with the row what their usual behaviour is.
The grid-nested class can help us here. The grid-nested is defined for a size of --page-size-m.
Toffee chocolate cake lollipop
Cupcake ipsum dolor sit amet liquorice lollipop apple pie. Tiramisu pudding pastry chocolate bar icing. Donut sweet candy canes liquorice pie icing. Cookie ice cream sweet roll jujubes carrot cake dessert bear claw.
Pastry bear claw sugar plum toffee caramels cheesecake candy fruitcake. Cheesecake bear claw oat cake. Pastry jujubes marshmallow. Cake tart halvah jelly beans. Chocolate oat cake jelly-o biscuit liquorice biscuit cookie topping. Sweet roll caramels jelly-o caramels muffin.
Toffee chocolate cake lollipop
Cupcake ipsum dolor sit amet liquorice lollipop apple pie. Tiramisu pudding pastry chocolate bar icing. Donut sweet candy canes liquorice pie icing. Cookie ice cream sweet roll jujubes carrot cake dessert bear claw.
Pastry bear claw sugar plum toffee caramels cheesecake candy fruitcake. Cheesecake bear claw oat cake. Pastry jujubes marshmallow. Cake tart halvah jelly beans. Chocolate oat cake jelly-o biscuit liquorice biscuit cookie topping. Sweet roll caramels jelly-o caramels muffin.
/* [2 : [1,1]] */
<div class="grid-row">
<article class="grid-cell x2">
<h2>Main</h2>
<p>Text</p>
</article>
<aside class="grid-nested x1"> <-- width of grid-nested
<div class="grid-cell x1"> <-- width of grid-cell inside wrapper
<h2>Aside - wrapped grid-cell 1</h2>
<p>Text</p>
</div>
<div class="grid-cell x1">
<h2>Aside - wrapped grid-cell 2</h2>
<p>Text</p>
</div>
</aside>
</div>
/* [[1,1] : 2] */
<div class="grid-row">
<aside class="grid-nested x1"> <-- width of grid-nested
<div class="grid-cell x1"> <-- width of grid-cell inside wrapper
<h2>Aside - wrapped grid-cell 1</h2>
<p>Text</p>
</div>
<div class="grid-cell x1">
<h2>Aside - wrapped grid-cell 2</h2>
<p>Text</p>
</div>
</aside>
<article class="grid-cell x2">
<h2>Main</h2>
<p>Text</p>
</article>
</div>
Module: Icons
All the icons you can use at one place. Navigation icons are 18px x 18px, which are the regular ones and have the class icon. Big ones 32px x 32px and use the class icon-big.
icon (16x16px)
#arrow
#ie
#android
#appleinc
#bookmark
#bookmarks
#bug
#home
#camera
#cancel-circle
#cancel
#checkbox-checked
#checkbox-unchecked
#checkmark
#chrome
#circle-down
#circle-left
#circle-right
#circle-up
#cloud-check
#cloud-download
#cloud-upload
#cloud
#connection
#contribute
#cross
#cross2
#download
icon-big (48x48px)
#bugdiagnosis
#bugreporting
illustrations
#bulb
#bulb_nobug
<section class="grid">
<article class="grid-row">
</article>
</section>
Module: Typographie
The default font is Open Sans, its fallback is sans serif. For headlines we use Source Sans Pro. Code uses monospace.
The base font-size is 16px. All following font-sizes use em.
All classes can be combined and are fully independant from semantics (except of the link, which inherit generic styles from the main site.)
The fonts are loaded from fonts.google.com
Headlines
Headline-1
Headline-2
Headline-3
generic styles
bold
italic
highlight
special styles
hint-text
code-text
this is a link
<p class="headline-1">Headline-1</p>
<p class="headline-2">Headline-2</p>
<p class="headline-3">Headline-3</p>
<p class="bold">bold</p>
<p class="italic">italic</p>
<p class="highlight">highlight</p>
<p class="hint-text">hint-text</p>
<p class="code-text">code-text</p>
<a href="#">this is a link</a>
Module: Grid - Introduction
The grid is the basic module to provide boxes for all of your modules. It is a global module, which means it is not scoped and can (also should) be used everywhere on the site.
The grid-wrapper class provides the white box to hold the module as well as the padding and margin.
The grid class actually holdes the module and provides a flexbox-box as well as a grid-system for the modules.
Bug reporting
for the web.
<section class="grid">
<article class="grid-row">
</article>
</section>
Module: Colors
All colors are defined in global variables and used all across the site in the CSS. We have 2 types of colors.
The first type of colors are meant to be used for modules and the general appearance of the site. They are prefixed with color-.
The second type of colors are used for labels. They are prefixed with labels-.
Colors
--color-bg-page - used mainly for background of page--color-bg-box - used for background of boxes--color-first - First highlight color--color-second--color-third--color-fourth - Fourth highlight color--color-fourth-light - Light version of fourth highlight color--color-form--color-defaultLabels
--label-color-1 This section needs to be updated after cleaning up labels + colors
<section class="grid">
<article class="grid-row">
</article>
</section>
Module: Hero Tiles
Row of 3 tiles. Creates a "call-to-action" stopper for the main page. This module is scoped and needs the use of the ID.
The hero-tile id indicated the hero tile module.
After that we need to add the tiles class which gives us a grid-system for full-width grid-cells. tiles-x3 continues the width pattern as see in our global grid system, but as a special use case as it does not provide any paddings / margins.
A tile-item class indicates a tile item. The colors are alternating. Also in responsive mode. The items have a min-width, but will expand the height of the row in relation to the content.
-
Report bugs
-
Fix bugs
-
Reach out
-
Build tools
-
Spread the word
-
There are so many
other ways to contribute.
Please let us know,
if you have ideas!
<section -tile" class="grid">
<ul class="tiles tiles-x3">
<li class="tile-item">
<p>1</p>
</li>
<li class="tile-item">
<p>Image
<a href="list.html" title="title of the link">2<a>
</p>
</li>
<li class="tile-item">
<h3>title</h3>
<p>3</p>
</li>
</ul>
</section>
Module: Content Subnavigation
This is our content subnavigation panel.
This is a dummy block to push the menu into one side
Module: Forms
This is our bug report form. The grid-cells can be reused in a different context. Just the search input will be a special case and shown as a separate module.
/* GROUP ITEMS // layout wise, NOT semantically */
<div class="form-text form-element"></div>
/* LABEL */
<label class="form-label" for="InputId"> Label Name </label>
/* LABEL - required // will get a red star next to the label name */
<label class="form-label form-required" for="url"> Label Name </label>
/* INPUT */
<input
type="text"
class="form-field text-field"
placeholder="placeholder text"
title="description"
id="id"
/>
/* INPUT with validation - success */
<input type="text" ... /><span class="form-input-validation check"></span>
/* INPUT with validation - error */
<input type="text" ... /><span class="form-input-validation error"></span>
/* TEXTAREA */
<textarea
type="text"
class="form-field text-field"
placeholder="placeholder text"
title="description"
id="id"
/>
/* RADIO INPUT grid-cell */
<div class="form-radio form-element">
<h4 class="headline-3">Headline</h4>
<input
type="radio"
class="input-radio"
name="issueType"
id="id"
value=""
/>
<label class="form-label label-radio" for="id">Label Name</label>
</div>
/* UPLOAD */
<div class="form-upload form-element">
<input
type="file"
accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp"
class="form-input input-upload"
id="id"
/>
<label class="form-label label-upload" for="idOfInput">
<svg class="icon icon-big" role="presentation">
<use class="icon-upload" href="#upload-2">Upload</use>
</svg>
Screenshot label name
</label>
</div>
Module: Button
Button has 4 different shapes: button-primary, button-secondary, button-hero, button-icon
<button type="button" class="button">
button
</button>
<button type="button" class="button button-primary">
button-primary
</button>
<button type="button" class="button button-secondary">
button-secondary
</button>
<button type="button" class="button button-hero">
button-hero
</button>
<button type="button" class="button button-icon">
button-icon
</button>
Module: Issue Labels
This module helps to add a label to the issue, which indicates the status of an issue.
There are 6 different states:
- Needs Triage
- Needs Diagnosis
- Needs Contact
- Ready for Outreach/li>
- Site Contacted
- Closed
- Needs Triage
- Needs Diagnosis
- Needs Contact
- Ready for Outreach
- Site Contacted
- Closed
<ul class="filter-label">
<li class="needs-triage">
Needs Triage
</li>
<li class="needs-diagnosis active">
Needs Diagnosis
</li>
<li class="needs-contact">
Needs Contact
</li>
<li class="outreach">
Ready for Outreach
</li>
<li class="site-contacted">
Site Contacted
</li>
<li class="closed">
Closed
</li>
</ul>
Module: Filter bar
This module is the search and filter bar for existing issues. Two states are presented in the following grid-rows - closed and open. JavaScript solution will be needed to toggle the `open` class.
Important note: The grid solution has `overflow: hidden` at the moment which prevents absolute positioned child elements to be visible e.g. the filter dropdowns.
Module: Issues List
This module is a 2:1 module, with a border to display the status of the issue. The second grid-cell contains the labels.
The labels have different classes (also colors) to categorise the different issues:
- label-type
- label-browser
- label-nsfw
- label-status
- label-priority
- label-device
- label-os
Issue 71234:
https://unicornthisareaaaaalllyloooongurl.js
Audio / media does not play
Opened: 2017-11-12
Comments: 12
Issue 71234:
https://unicorn.js
Audio / media does not play
Opened: 2017-11-12
Comments: 12
Issue 71234:
https://unicorn.js
Audio / media does not play
Opened: 2017-11-12
Comments: 12
Issue 71234:
https://unicorn.js
Audio / media does not play
Opened: 2017-11-12
Comments: 12
Issue 71234:
https://unicorn.js
Audio / media does not play
Opened: 2017-11-12
Comments: 12
Issue 71234:
https://unicorn.js
Audio / media does not play
Opened: 2017-11-12
Closed: 2017-11-14
Comments: 12
<section " class="grid">
<div class="grid-row issue label-closed">
<article class="grid-cell x2 issue-description">
<p class="issue-number"> Issue 71234: </p>
<p class="issue-url"> https://unicornjs.com </p>
<p class="issue-type"> Audio / media does not play </p>
<p class="issue-date-open"> Opened: 2017-11-12 </p>
<p class="issue-date-closed"> Closed: 2017-11-14 </p>
<p class="issue-date-comments"> Comments: 12 </p>
</article>
<aside class="grid-cell x1 issue-labels" >
<p>
<span class="label label-browser"> browser-firefox </span>
<span class="label label-device"> device-mobile </span>
<span class="label label-os"> od-android </span>
</p>
</aside>
</div>
</section>
Module: Issue + comment box + small meta
This module is a detail page for one issue. It contains also a box to comment on the issue, issue comments and a small meta for info below. ther comments should probably move to a separate section.
URL: https://github.com/notifications
Browser / Version: Firefox 59.0
Operating System: Mac OS X 10.12
Tested Another Browser: Yes
Problem type: Design is broken
Description: Can't open DM's. They are not clickable.
Steps to Reproduce:
das
then i did the next thing
and then this happened
Module: Bio
This module is a 1:1:1 module, with a fixed first grid-cell to display a picture. The second grid-cell is for description or bio of a person, including name, where this person is from etc. The last of the grid-cells is for contact information.
Adam Stevenson
Canada
Works on webcompat bugs and does outreach to sites / developers. Enjoys music, biking, travel and sometimes photos.
<article class="grid bio">
<img src="" alt="" class="bio-img grid-cell x1-fix" />
<div class="grid-nested">
<div class="grid-cell x1">
<h2 class="headline-2">Name</h2>
<h3 class="headline-3">Country</h3>
<p>Bio / description</p>
</div>
<p class="grid-cell x1">
<a href="" title="">@handlename </a>
</p>
</div>
</article>
Module: Footer
This module is the footer navigation. It comes with a sub navigation, if necessary.
The main footer navigation is initiated with the footer-list class. Every item is a footer-item and their link as footer-item-link.
The sub footer navigation is initiated with the footer-sub-list class. Every item is a footer-sub-item and their link as footer-item-link.
All active links are indicated with the class active.
The icon footer navigation is a special navigation to our external sites like Twitter as well as GitHub and initiated with the footer-sub-icons class. Every item is a footer-icon
and the needed icon class like e.g. icon-twitter, which indicates the box size of the icon. The icon is included per SVG for accessibility reasons. Their link is indicated as footer-item-link.
/* MAIN NAVIGATION */
<ul class="grid-cell x2 footer-list">
<li class="footer-item">
<a class="footer-item-link" href="" title="">Link</a>
</li>
<li class="footer-item active">
<a class="footer-item-link active" href="" title="">Active Link</a>
</li>
</ul>
/* SUB NAVIGATION */
<ul class="grid-cell x1 footer-sub-list">
<li class="footer-sub-item">
<a class="footer-item-link" href="" title="">Link</a>
</li>
<li class="footer-sub-item active">
<a class="footer-item-link" href="" title="">Active link</a>
</li>
</ul>
/* ICON NAVIGATION */
<ul class="grid-cell x1 footer-sub-icons">
<li class="footer-icon icon-twitter">
<a class="footer-item-link" href="" title="">
<svg class="icon" role="presentation" aria-role="hide">
<title>Twitter</title>
<use href="#twitter-2">Twitter</use>
</svg>
</a>
</li>
<li class="footer-icon icon-github">
<a class="footer-item-link" href="#" title="">
<svg class="icon" role="presentation" aria-role="hide">
<title>github</title>
<use href="#github">Github</use>
</svg>
</a>
</li>
</ul>
Hey, I can't reproduce this on my account, can you send a video with the behaviour? Especially if there's any messages in your console? I've seen something here that might be something to look into, ping @user? Here's in image: