main.scss:1923
2 |
3 |
4 | html body #get-this#damn-modalDialog#to-the-front#god-damnit {
5 | z-index: 9999999999 !important;
6 | }
7 |
8 |
9 |
--------------------------------------------------------------------------------
/slides/rems-and-ems.html:
--------------------------------------------------------------------------------
1 | REM's and EM's
2 |
3 | - REM is relative to the root font size
4 |
5 | - If <html> font size = 16px, 1rem = 16px
6 |
7 | - Em is relative to the current font-size
8 |
9 |
--------------------------------------------------------------------------------
/slides/typography.html:
--------------------------------------------------------------------------------
1 | Flexible components
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/slides/what-makes-good-css.html:
--------------------------------------------------------------------------------
1 | What makes good css?
2 |
3 | - Organized to respect the cascade
4 | - Strive for low specificty
5 | - Predictable where changes/updates should go
6 | - Easy to change and extend
7 | - Flexible
8 |
9 |
10 |
--------------------------------------------------------------------------------
/slides/emception-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
14 | li { font-size: .5em; }
15 |
16 |
17 |
--------------------------------------------------------------------------------
/slides/specificity.html:
--------------------------------------------------------------------------------
1 | Specificity
2 | 
3 |
4 |
5 |
6 | #main #header button { background-color: red; } //201
7 | #header .button { background-color: blue; } //110
8 | .header .button { background-color: green; } //20
9 |
10 |
11 |
--------------------------------------------------------------------------------
/slides/list.json:
--------------------------------------------------------------------------------
1 | [
2 | "index.md",
3 | "best-css.html",
4 | "what-makes-good-css.html",
5 | "specificity.html",
6 | "bem.html",
7 | "itcss.html",
8 | "typography.html",
9 | "rems-and-ems.html",
10 | "calculating-ems-and-rems.html",
11 | "emception.html",
12 | "emception-2.html",
13 | "base-font-size.html",
14 | "realtive-sizing-good.html",
15 | "quick-demo.html"
16 | ]
17 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "esnext": true,
3 | "bitwise": true,
4 | "camelcase": true,
5 | "curly": true,
6 | "eqeqeq": true,
7 | "immed": true,
8 | "indent": 4,
9 | "latedef": true,
10 | "newcap": true,
11 | "noarg": true,
12 | "quotmark": "single",
13 | "undef": true,
14 | "unused": true,
15 | "strict": true,
16 | "trailing": true,
17 | "smarttabs": true,
18 | "white": true
19 | }
20 |
--------------------------------------------------------------------------------
/templates/_section.html:
--------------------------------------------------------------------------------
1 | <% if (!_.isString(slide) && !_.isArray(slide) && _.isObject(slide)) { %>
2 | <% if (_.isString(slide.filename)) { %>data-<% if (slide.filename.indexOf('.html') !== -1) { %>html<% } else { %>markdown<% }%>="slides/<%= slide.filename %>"<% } %>>
3 | <% } %><% if (_.isString(slide)) { %>
4 | html<% } else { %>markdown<% }%>="slides/<%= slide %>">
5 | <% } %>
6 |
--------------------------------------------------------------------------------
/slides/emception.html:
--------------------------------------------------------------------------------
1 | Emception
2 |
3 |
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 | .sidebar { font-size: 1em; }
16 | .article-list { font-size: .75em; }
17 | .article-teaser { font-size: .5em; }
18 |
19 |
20 |
21 |
2 |
3 | .sidebar {
4 | font-size: 2.5rem;
5 | .sidebar__content {
6 | font-size: 2em;
7 | }
8 | }
9 |
10 | .news-item {
11 | font-size: 1.25rem;
12 |
13 | &__title {
14 | font-size: 1.5em;
15 | margin-bottom: .75em;
16 | }
17 | }
18 |
19 |
20 |
21 |
22 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/slides/bem.html:
--------------------------------------------------------------------------------
1 | BEM
2 | Block Element Modifier
3 |
4 |
5 |
6 | .news-list {
7 | &__header {}
8 |
9 | &__intro {}
10 |
11 | &--featured {}
12 | }
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Lorem enim quaerat explicabo
21 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/slides/base-font-size.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | html { font-size: 62.5%; } //Most often 10px
4 |
5 |
6 |
7 |
8 | body { font-size: 1.6rem; }
9 |
10 |
11 |
12 |
13 |
20 |
21 |
22 |
23 |
24 | .sidebar { font-size: 1.6rem; }
25 | .article-list { font-size: 1.2rem; }
26 | .article-list__container { font-size: .6em; }
27 | .article-teaser { font-size: 1.6rem; }
28 |
29 |
30 |
--------------------------------------------------------------------------------
/css/template/settings.scss:
--------------------------------------------------------------------------------
1 | // Base settings for all themes that can optionally be
2 | // overridden by the super-theme
3 |
4 | // Background of the presentation
5 | $backgroundColor: #2b2b2b;
6 |
7 | // Primary/body text
8 | $mainFont: 'Lato', sans-serif;
9 | $mainFontSize: 36px;
10 | $mainColor: #eee;
11 |
12 | // Vertical spacing between blocks of text
13 | $blockMargin: 20px;
14 |
15 | // Headings
16 | $headingMargin: 0 0 $blockMargin 0;
17 | $headingFont: 'League Gothic', Impact, sans-serif;
18 | $headingColor: #eee;
19 | $headingLineHeight: 1.2;
20 | $headingLetterSpacing: normal;
21 | $headingTextTransform: uppercase;
22 | $headingTextShadow: none;
23 | $headingFontWeight: normal;
24 | $heading1TextShadow: $headingTextShadow;
25 |
26 | $heading1Size: 3.77em;
27 | $heading2Size: 2.11em;
28 | $heading3Size: 1.55em;
29 | $heading4Size: 1.00em;
30 |
31 | // Links and actions
32 | $linkColor: #13DAEC;
33 | $linkColorHover: lighten( $linkColor, 20% );
34 |
35 | // Text selection
36 | $selectionBackgroundColor: #FF5E99;
37 | $selectionColor: #fff;
38 |
39 | // Generates the presentation background, can be overridden
40 | // to return a background image or gradient
41 | @mixin bodyBackground() {
42 | background: $backgroundColor;
43 | }
--------------------------------------------------------------------------------
/css/README.md:
--------------------------------------------------------------------------------
1 | ## Dependencies
2 |
3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup
4 |
5 | ## Creating a Theme
6 |
7 | To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `grunt css-themes`.
8 |
9 | Each theme file does four things in the following order:
10 |
11 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
12 | Shared utility functions.
13 |
14 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
15 | Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
16 |
17 | 3. **Override**
18 | This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please.
19 |
20 | 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
21 | The template theme file which will generate final CSS output based on the currently defined variables.
22 |
--------------------------------------------------------------------------------
/css/template/mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin vertical-gradient( $top, $bottom ) {
2 | background: $top;
3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% );
7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
8 | background: linear-gradient( top, $top 0%, $bottom 100% );
9 | }
10 |
11 | @mixin horizontal-gradient( $top, $bottom ) {
12 | background: $top;
13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% );
17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
18 | background: linear-gradient( left, $top 0%, $bottom 100% );
19 | }
20 |
21 | @mixin radial-gradient( $outer, $inner, $type: circle ) {
22 | background: $outer;
23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
29 | }
--------------------------------------------------------------------------------
/css/source/theme.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Black theme for reveal.js. This is the opposite of the 'white' theme.
3 | *
4 | * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
5 | */
6 |
7 | // This file has been copied over from
8 | // ../../bower_components/reveal.js/css/theme/source/black.scss
9 |
10 | // See ../../bower_components/reveal.js/css/theme/README.md
11 | // for further explanations on how to create a custom reveal.js theme.
12 |
13 | // Default mixins and settings -----------------
14 | @import "../../bower_components/reveal.js/css/theme/template/mixins";
15 | @import "../../bower_components/reveal.js/css/theme/template/settings";
16 | // ---------------------------------------------
17 |
18 |
19 | // Include theme-specific fonts
20 | @import url(../bower_components/reveal.js/lib/font/source-sans-pro/source-sans-pro.css);
21 |
22 |
23 | // Override theme settings (see ../../bower_components/reveal.js/css/theme/template/settings.scss)
24 | $backgroundColor: #222;
25 |
26 | $mainColor: #fff;
27 | $headingColor: #fff;
28 |
29 | $mainFontSize: 38px;
30 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif;
31 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif;
32 | $headingTextShadow: none;
33 | $headingLetterSpacing: normal;
34 | $headingTextTransform: uppercase;
35 | $headingFontWeight: 600;
36 | $linkColor: #42affa;
37 | $linkColorHover: lighten( $linkColor, 15% );
38 | $selectionBackgroundColor: lighten( $linkColor, 25% );
39 |
40 | $heading1Size: 2.5em;
41 | $heading2Size: 1.6em;
42 | $heading3Size: 1.3em;
43 | $heading4Size: 1.0em;
44 |
45 | section.has-light-background {
46 | &, h1, h2, h3, h4, h5, h6 {
47 | color: #222;
48 | }
49 | }
50 |
51 | // Theme template ------------------------------
52 | @import "../../bower_components/reveal.js/css/theme/template/theme";
53 | // ---------------------------------------------
54 |
--------------------------------------------------------------------------------
/js/loadhtmlslides.js:
--------------------------------------------------------------------------------
1 | // Modified from markdown.js from Hakim to handle external html files
2 | (function () {
3 | /*jslint loopfunc: true, browser: true*/
4 | /*globals alert*/
5 | 'use strict';
6 |
7 | var querySlidingHtml = function () {
8 | var sections = document.querySelectorAll('[data-html]'),
9 | section, j, jlen;
10 |
11 | for (j = 0, jlen = sections.length; j < jlen; j++) {
12 | section = sections[j];
13 |
14 | if (section.getAttribute('data-html').length) {
15 |
16 | var xhr = new XMLHttpRequest(),
17 | url = section.getAttribute('data-html'),
18 | cb = function () {
19 | if (xhr.readyState === 4) {
20 | if (
21 | (xhr.status >= 200 && xhr.status < 300) ||
22 | xhr.status === 0 // file protocol yields status code 0 (useful for local debug, mobile applications etc.)
23 | ) {
24 | section.innerHTML = xhr.responseText;
25 | } else {
26 | section.outerHTML = 'ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status + '. Check your browser\'s JavaScript console for more details.';
27 | }
28 | }
29 | };
30 |
31 | xhr.onreadystatechange = cb;
32 |
33 | xhr.open('GET', url, false);
34 | try {
35 | xhr.send();
36 | } catch (e) {
37 | alert('Failed to get file' + url + '.' + e);
38 | }
39 | }
40 | }
41 | };
42 |
43 | querySlidingHtml();
44 | })();
45 |
--------------------------------------------------------------------------------
/css/onedarkhl.css:
--------------------------------------------------------------------------------
1 | /*
2 | One-dark by Atom
3 | https://github.com/atom/one-dark-syntax
4 | https://atom.io/
5 |
6 | Highlight.js port by MegaXLR
7 | https://github.com/megaxlr/Highlight.js-One-Dark
8 | http://megaxlr.net/
9 |
10 | Base theme Railcasts by
11 | Railscasts-like style (c) Visoft, Inc. (Damien White)
12 | http://visoftinc.com/ (I hope that is the right URL, didn't really check :-/)
13 | */
14 | @import url(https://fonts.googleapis.com/css?family=Inconsolata);
15 | .hljs {
16 | display: block;
17 | overflow-x: auto;
18 | padding: 0.5em;
19 | background: #282c34;
20 | color: #abb2bf;
21 | font-family: "Inconsolata";
22 | font-size: 1.1em;
23 | font-weight: bold;
24 | }
25 | .hljs > *::selection {
26 | background-color: #3e4451;
27 | }
28 | .hljs-comment {
29 | color: #5c6370;
30 | font-style: italic;
31 | }
32 |
33 | .hljs-selector-tag {
34 | color: #e06c75;
35 | }
36 |
37 | .hljs-string {
38 | color: #98c379;
39 | }
40 | .hljs-number,
41 | .hljs-regexp,
42 | .hljs-variable,
43 | .hljs-template-variable {
44 | color: #d19a66;
45 | }
46 |
47 | .hljs-subst {
48 | color: #519f50;
49 | }
50 | .hljs-keyword {
51 | color: #c678dd;
52 | }
53 | .hljs-function > .hljs-title {
54 | color: #61afef;
55 | }
56 | .hljs-tag {
57 | color: #abb2bf;
58 | }
59 | .hljs-name {
60 | color: #e06c75;
61 | }
62 | .hljs-type {
63 | color: #da4939;
64 | }
65 |
66 | .hljs-attr {
67 | color: #d19a66;
68 | }
69 | .hljs-symbol,
70 | .hljs-bullet,
71 | .hljs-built_in,
72 | .hljs-builtin-name,
73 | .hljs-link {
74 | color: #6d9cbe;
75 | }
76 |
77 | .hljs-params {
78 | color: #d0d0ff;
79 | }
80 |
81 |
82 | .hljs-meta {
83 | color: #;
84 | }
85 |
86 | .hljs-title,
87 | .hljs-section {
88 | color: #ffc66d;
89 | }
90 |
91 | .hljs-addition {
92 | background-color: #144212;
93 | color: #e6e1dc;
94 | display: inline-block;
95 | width: 100%;
96 | }
97 |
98 | .hljs-deletion {
99 | background-color: #600;
100 | color: #e6e1dc;
101 | display: inline-block;
102 | width: 100%;
103 | }
104 |
105 | .hljs-selector-class {
106 | color: #9b703f;
107 | }
108 |
109 | .hljs-selector-id {
110 | color: #8b98ab;
111 | }
112 |
113 | .hljs-emphasis {
114 | font-style: italic;
115 | }
116 |
117 | .hljs-strong {
118 | font-weight: bold;
119 | }
120 |
121 | .hljs-link {
122 | text-decoration: underline;
123 | }
124 |
--------------------------------------------------------------------------------
/img/itcss.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/templates/_index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Practical tips for Scalable CSS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
27 |
28 |
29 |
30 |
37 |
38 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | <% _.forEach(slides, function(slide) { %>
50 | <% if (!_.isArray(slide)) { %>
51 | <%= section(slide) %>
52 | <% } %>
53 | <% if (_.isArray(slide)) { %>
54 |
55 | <% _.forEach(slide, function(verticalslide) { %>
56 | <%= section(verticalslide) %>
57 | <% }); %>
58 |
59 | <% } %>
60 | <% }); %>
61 |
62 |
63 |
3 | 
3 |
--------------------------------------------------------------------------------
/img/calculate.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dhq/presentation-practical-tips-for-scalable-css/master/img/calculate.jpg
--------------------------------------------------------------------------------
/slides/calculating-ems-and-rems.html:
--------------------------------------------------------------------------------
1 |