Skip to content

Commit 7a22716

Browse files
NelsonBrandaoNelsonBrandao
committed
Updated presentation visual
1 parent 9010ea7 commit 7a22716

File tree

1 file changed

+87
-45
lines changed

1 file changed

+87
-45
lines changed

‎presentation.html‎

Lines changed: 87 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,58 @@
44
<title>Title</title>
55
<meta charset="utf-8">
66
<style>
7-
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
7+
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:200italic,400,700,400italic);
88
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600italic,600);
99

10-
body { font-family: 'Open Sans', sans-serif; }
11-
h1, h2, h3 {
12-
/*font-family: 'Yanone Kaffeesatz';*/
13-
font-family: 'Open Sans', sans-serif;
14-
font-weight: normal;
10+
html {
11+
-webkit-font-smoothing: antialiased;
12+
}
13+
body, h1, h2, h3 {
14+
font-family: 'Open Sans', sans-serif;
15+
font-weight: 300;
16+
}
17+
.remark-container {
18+
background: #263238;
19+
}
20+
h1 {
21+
color: #ECEFF1;
22+
}
23+
h2 {
24+
color: #B0BEC5;
25+
font-weight: 400;
26+
}
27+
h3 {
28+
color: #9E9E9E;
29+
}
30+
a {
31+
color: #2196F3;
32+
text-decoration: none;
33+
}
34+
.colored {
35+
background: #607D8B;
36+
}
37+
.colored h2 {
38+
font-weight: 300;
39+
}
40+
strong {
41+
color: #607D8B;
1542
}
1643
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
44+
45+
.remark-inline-code {
46+
background: #ECEFF1;
47+
color: #37474F;
48+
font-style: italic;
49+
padding: 0 5px;
50+
}
1751
</style>
1852
</head>
1953
<body>
2054
<textarea id="source">
2155

22-
class: center, middle
56+
class: center, middle, colored
2357

24-
## Scytale
58+
## Scytale's
2559
# CSS/SCSS Guidelines
2660

2761
---
@@ -36,7 +70,7 @@
3670

3771
- [2.1.1](#2.1.1) <a name='2.1.1'></a> Use soft tabs (4 spaces) for indentation. This improves readability and keeps the space uniform
3872

39-
```sass
73+
```css
4074
// bad
4175
.avatar{
4276
border-radius: 50%;
@@ -50,9 +84,11 @@
5084

5185
---
5286

87+
### Formatting
88+
5389
- [2.1.2](#2.1.2) <a name='2.1.2'></a> Use classes for all selectors. Ids are reserved for E2E testing and data arguments are for JS libraries
5490

55-
```sass
91+
```css
5692
// bad
5793
#panel {
5894
/* ... */
@@ -70,9 +106,11 @@
70106

71107
---
72108

109+
### Formatting
110+
73111
- [2.1.3](#2.1.3) <a name='2.1.3'></a> Avoid using tag selectors. Tag selectors come at a small performance penalty
74112

75-
```sass
113+
```css
76114
// bad
77115
h3 {
78116
/* ... */
@@ -86,9 +124,11 @@
86124

87125
---
88126

127+
### Formatting
128+
89129
- [2.1.4](#2.1.4) <a name='2.1.4'></a> When using multiple selectors in a rule declaration, give each selector its own line. This way its much easier to find selectors when scanning the document
90130

91-
```sass
131+
```css
92132
// bad
93133
.panel, .box {
94134
/* ... */
@@ -103,9 +143,11 @@
103143

104144
---
105145

146+
### Formatting
147+
106148
- [2.1.5](#2.1.5) <a name='2.1.5'></a> Put a space before the opening brace `{` in rule declarations. In properties, put a space after, but not before, the `:` character. Put closing braces `}` of rule declarations on a new line. Put blank lines between rule declarations
107149

108-
```sass
150+
```css
109151
// bad
110152
.panel{
111153
font-size:2px;color:white}
@@ -120,7 +162,7 @@
120162
---
121163

122164
class: center, middle
123-
## Sass
165+
## SCSS
124166

125167
---
126168

@@ -130,7 +172,7 @@
130172

131173
- [3.1.2](#3.1.2) <a name='3.1.2'></a> Order your `@extend`, `@include` declarations and regular CSS lastly with a newline between the last two.
132174

133-
```scss
175+
```css
134176
.btn-green {
135177
@extend %btn;
136178
@include transition(background 0.5s ease);
@@ -142,10 +184,11 @@
142184

143185
---
144186

187+
### Syntax
145188

146189
- [3.1.3](#3.1.3) <a name='3.1.3'></a> Nested selectors, _if necessary_, go last, and nothing goes after them. Add whitespace between your rule declarations and nested selectors, as well as between adjacent nested selectors. Apply [3.1.2](#3.1.2) as above to your nested selectors.
147190

148-
```scss
191+
```css
149192
.btn {
150193
@extend %btn;
151194

@@ -176,7 +219,7 @@
176219

177220
**Sass**
178221

179-
```sass
222+
```css
180223
// Unless we call `@extend %icon` these properties won't be compiled!
181224
%icon {
182225
font-family: "Airglyphs";
@@ -195,7 +238,7 @@
195238

196239
**Compiled CSS**
197240

198-
```sass
241+
```css
199242
.icon-error,
200243
.icon-success {
201244
font-family: "Airglyphs";
@@ -216,7 +259,7 @@
216259

217260
**Do not nest selectors more than three levels deep!**
218261

219-
```scss
262+
```css
220263
.page-container {
221264
.content {
222265
.profile {
@@ -241,11 +284,11 @@
241284

242285
### Components
243286

244-
![Component Example](https://github.com/wearescytale/css/raw/master/img/component-example.png)
287+
![Component Example](img/component-example.png)
245288

246289
- [4.1.1](#4.1.1) <a name='4.1.1'></a> Name components will be named with at least two workds, seperated by a dash.
247290

248-
```sass
291+
```css
249292
.like-button {
250293
/* ... */
251294
}
@@ -259,11 +302,11 @@
259302

260303
### Elements
261304

262-
![Element Example](https://github.com/wearescytale/css/raw/master/img/component-elements.png)
305+
![Element Example](img/component-elements.png)
263306

264307
- [4.2.1](#4.2.1) <a name='4.2.1'></a> Each component may have elements. They should have classes that are only one word.
265308

266-
```sass
309+
```css
267310
.search-form {
268311
> .field {
269312
/* ... */
@@ -278,12 +321,12 @@
278321
---
279322
### Elements
280323

281-
![Element Example](https://github.com/wearescytale/css/raw/master/img/component-elements.png)
324+
![Element Example](img/component-elements.png)
282325

283326

284327
- [4.2.2](#4.2.2) <a name='4.2.2'></a> Always prefer to use the `>` child selector whenever possible.
285328

286-
```sass
329+
```css
287330
.article-card {
288331
.title {
289332
/* okay */
@@ -298,12 +341,12 @@
298341
---
299342
### Elements
300343

301-
![Element Example](https://github.com/wearescytale/css/raw/master/img/component-elements.png)
344+
![Element Example](img/component-elements.png)
302345

303346

304347
- [4.2.3](#4.2.3) <a name='4.2.3'></a> For elements that need two or more words, concatenate them without dashes or underscores.
305348

306-
```sass
349+
```css
307350
.profile-box {
308351
> .firstname {
309352
/* ... */
@@ -319,13 +362,17 @@
319362

320363
### Variants
321364

322-
![Variants Example](https://github.com/wearescytale/css/raw/master/img/component-modifiers.png)
365+
![Variants Example](img/component-modifiers.png)
323366

324367
- [4.3.1](#4.3.1) <a name='4.3.1'></a> Variants customize a component or an element. Variants are prefixed by a dash `-`.
325368

326369
---
327370

328-
```sass
371+
### Variants
372+
373+
![Variants Example](img/component-modifiers.png)
374+
375+
```css
329376
.search-form {
330377
&.-prefixed {
331378
/* ... */
@@ -341,13 +388,17 @@
341388

342389
### Nested components
343390

344-
![Nested Example](https://github.com/wearescytale/css/raw/master/img/component-nesting.png)
391+
![Nested Example](img/component-nesting.png)
345392

346393
- [4.4.1](#4.4.1) <a name='4.4.1'></a> When a component may need to appear a certain way when nested in another component. Avoid modifying the nested component by reaching into it from the containing component. Instead, prefer to add a variant to the nested component and apply it from the containing component.
347394

348395
---
349396

350-
```sass
397+
### Nested components
398+
399+
![Nested Example](img/component-nesting.png)
400+
401+
```css
351402

352403
// bad
353404
.article-header {
@@ -381,7 +432,7 @@
381432

382433
If you need to define these, try to define them in whatever context they will be in.
383434

384-
```sass
435+
```css
385436
.article-list {
386437
& {
387438
@include clearfix;
@@ -394,25 +445,16 @@
394445
}
395446

396447
.article-card {
397-
& {
398-
/* ... */
399-
}
400-
> .image {
401-
/* ... */
402-
}
403-
> .title {
404-
/* ... */
405-
}
406-
> .category {
407-
/* ... */
408-
}
448+
/* ... */
409449
}
410450
```
411451
</textarea>
412452
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
413453
</script>
414454
<script>
415-
var slideshow = remark.create();
455+
var slideshow = remark.create({
456+
highlightStyle: 'zenburn'
457+
});
416458
</script>
417459
</body>
418460
</html>

0 commit comments

Comments
 (0)