Commit fde71391 authored by Danilo Woznica's avatar Danilo Woznica

feat(Styleguide): Base grid

parent 2c8d50e3
<h1 class="display--small">Font Family</h1>
<h1 class="display">Typography</h1>
<h2 class="display--small">Font Family</h2>
<p>Rocket.Chat’s website should always use the system’s native font. The following styleguide will be created using Mac’s system
font:
<strong>San Francisco UI Text & Display.</strong>
......@@ -7,23 +8,23 @@
<h2 class="display--small">Font size & Weight</h2>
<p>The font scale consists of 7 different sizes & 4 weights: Regular, Medium, Semibold & Bold.</p>
<p>.display--big {}</p>
<h2 class="display--big type--brand">Rocket.Chat</h2>
<p>.display--big {}</p>
<p>.display {}</p>
<h2 class="display type--brand">Rocket.Chat</h2>
<p>.display {}</p>
<p>.display--small {}</p>
<h2 class="display--small type--brand">Rocket.Chat</h2>
<p>.display--small {}</p>
<p>.text {}</p>
<h2 class="text type--brand">Rocket.Chat</h2>
<p>.text {}</p>
<p>.text--small {}</p>
<h2 class="text--small type--brand">Rocket.Chat</h2>
<p>.text--small {}</p>
<p>.label {}</p>
<h2 class="label type--brand">Rocket.Chat</h2>
<p>.label {}</p>
<p>.label--small {}</p>
<h2 class="label--small type--brand">Rocket.Chat</h2>
\ No newline at end of file
<h2 class="label--small type--brand">Rocket.Chat</h2>
<p>.label--small {}</p>
\ No newline at end of file
.container {
/* Equals 1120px */
max-width: 70em;
margin-left: auto;
margin-right: auto;
padding-left: 2em;
padding-right: 2em;
}
......@@ -4,7 +4,6 @@ body {
color: $grey;
}
// Displays
.display--big {
font-size: 2.75em;
line-height: 1.2;
......@@ -35,11 +34,11 @@ body {
margin-bottom: 0.4em;
}
// Text
.text,
p {
font-size: 1em;
font-size: $font-size;
font-weight: 500;
line-height: $font-leading;
margin-bottom: 2em;
}
......
......@@ -2,5 +2,7 @@
layout: styleguide
class: styleguide
---
{% include styleguide/typography.html %}
\ No newline at end of file
<div class="container">
{% include styleguide/typography.html %}
</div>
\ No newline at end of file
---
---
@import "reset";
@import "variables";
@import "typography";
@import "grid";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment