IE android appleinc arrow bookmark bookmarks bug camera cancel-circle cancel checkbox-checked checkbox-unchecked Shape chrome circle-down circle-left circle-right circle-up cloud-check cloud-download cloud-upload cloud connection contribute cross cross2 download download3 edge embed2 eye film firefox github home home2 image images info Shape leaf leaf left list mail4 menu menu2 menu3 menu4 mic music notification opera paragraph-justify play plus question radio-checked radio-checked2 radio-unchecked safari search spinner spinner8 terminal tux twitter twitter up upload-2 upload upload3 user-check user-minus user-plus user user2 users users2 warning windows8
You were successfully logged out

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>
					
					
👈 This is the box to rule all modules. 👇

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
#arrow

IE IE
#ie

android
#android

appleinc
#appleinc

bookmark
#bookmark

bookmarks
#bookmarks

bug
#bug

home
#home

camera
#camera

cancel-circle
#cancel-circle

cancel
#cancel

checkbox-checked
#checkbox-checked

checkbox-unchecked
#checkbox-unchecked

checkmark
#checkmark

chrome
#chrome

circle-down
#circle-down

circle-left
#circle-left

circle-right
#circle-right

circle-up
#circle-up

cloud-check
#cloud-check

cloud-download
#cloud-download

cloud-upload
#cloud-upload

cloud
#cloud

connection
#connection

contribute
#contribute

cross
#cross

cross2
#cross2

download
#download

icon-big (48x48px)

bugdiagnosis
#bugdiagnosis

bugreporting
#bugreporting

illustrations

bulb
#bulb

bulb_nobug
#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-default

Labels

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

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

Type of the issue

					
/* 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

zoepage
github username
3 hours ago

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:
Screenshot description

console.log('Hello World');
zoepage
github username

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

Adam Stevenson

Canada

Works on webcompat bugs and does outreach to sites / developers. Enjoys music, biking, travel and sometimes photos.

@adamopenweb
@adamopenweb

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