Initial Commit

README.md

@@ -0,0 +1,9 @@
+# ITCSS Screencast
+
+Hi there!
+
+This is the supporting code that accompanies the net magazine ITCSS screencast
+(which in turn accompanies the net magazine ITCSS Primer).
+
+Enjoy,  
+Harry

css/_components.avatars.scss

@@ -0,0 +1,16 @@
+.c-avatar {
+    display: block;
+    border-radius: 100%;
+    width:  64px;
+    height: 64px;
+}
+
+.c-avatar--small {
+    width:  32px;
+    height: 32px;
+}
+
+.c-avatar--large {
+    width:  128px;
+    height: 128px;
+}

css/_components.buttons.scss

@@ -0,0 +1,16 @@
+.c-btn {
+    display: inline-block;
+    padding: (0.5 * $base-spacing-unit) $base-spacing-unit;
+    text-decoration: none;
+    background-color: $color-btn;
+    color: #fff;
+    border-radius: $base-radius;
+    transition: background-color 0.2s;
+
+    &:hover,
+    &:focus {
+        background-color: $color-btn-hover;
+        color: #fff;
+    }
+
+}

css/_components.page-title.scss

@@ -0,0 +1,18 @@
+.c-page-title {
+    margin-bottom:  $base-spacing-unit;
+    border-bottom: 1px solid $color-ui;
+}
+
+    .c-page-title__main,
+    .c-page-title__sub {
+        font-weight: normal;
+        margin-bottom: 0;
+    }
+
+    .c-page-title__main {
+        @include font-size(48px);
+    }
+
+    .c-page-title__sub {
+        @include font-size(32px);
+    }

css/_components.testimonials.scss

@@ -0,0 +1,28 @@
+.c-testimonial {
+    padding: $base-spacing-unit;
+    border-radius: $base-radius;
+    background-color: $color-shadow;
+}
+
+    .c-testimonial__text {
+        font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
+        font-style: italic;
+        @include font-size(24px);
+        vertical-align: middle;
+    }
+
+    .c-testimonial__source {
+        display: block;
+        font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
+        font-style: normal;
+        font-weight: bold;
+        @include font-size(12px);
+        text-transform: uppercase;
+        letter-spacing: 0.15em;
+        color: $color-gray;
+
+        &:before {
+            content: "— ";
+        }
+
+    }

css/_elements.headings.scss

@@ -0,0 +1,23 @@
+h1 {
+    @include font-size(32px);
+}
+
+h2 {
+    @include font-size(28px);
+}
+
+h3 {
+    @include font-size(24px);
+}
+
+h4 {
+    @include font-size(20px);
+}
+
+h5 {
+    @include font-size(18px);
+}
+
+h6 {
+    @include font-size(16px);
+}

css/_elements.images.scss

@@ -0,0 +1,4 @@
+img {
+    max-width: 100%;
+    vertical-align: middle;
+}

css/_elements.links.scss

@@ -0,0 +1,10 @@
+a {
+    text-decoration: none;
+    color: $color-link;
+
+    &:hover,
+    &:focus {
+        color: $color-link-hover;
+    }
+
+}

css/_elements.lists.scss

@@ -0,0 +1,13 @@
+ul {
+    list-style: square outside;
+}
+
+li > {
+
+    ul,
+    ol {
+        margin-left: 2 * $base-spacing-unit;
+        margin-bottom: 0;
+    }
+
+}

css/_elements.page.scss

@@ -0,0 +1,8 @@
+html {
+    font-size: ($base-font-size / 16px) * 1em; /* [1] */
+    line-height: $base-line-height / $base-font-size; /* [1] */
+    padding: $base-spacing-unit;
+    padding-bottom: 0;
+    background-color: #fff;
+    color: $color-text;
+}

css/_elements.quotes.scss

@@ -0,0 +1,26 @@
+blockquote {
+    quotes: "“" "”";
+
+    p {
+        text-indent: -0.42em;
+
+        &:before {
+            content: open-quote;
+        }
+
+        &:after {
+            content: no-close-quote;
+        }
+
+        &:last-of-type {
+            margin-bottom: 0;
+
+            &:after {
+                content: close-quote;
+            }
+
+        }
+
+    }
+
+}

css/_generic.box-sizing.scss

@@ -0,0 +1,17 @@
+html {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+* {
+
+    &,
+    &:before,
+    &:after {
+        -webkit-box-sizing: inherit;
+           -moz-box-sizing: inherit;
+                box-sizing: inherit;
+        }
+
+}