danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-26 20:14:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #39 — Adds SCSS/Sass syntax switcher to Guide.

Browse Source
This commit is contained in:
Jina Bolton 2014-03-13 22:04:34 -07:00
parent 867362ed5e
commit 206880a768
23 changed files with 2094 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -22,6 +22,7 @@
/build
build/
build
Gemfile.lock
# Numerous always-ignore extensions
*.diff

56
Gemfile.lock
View File

@ -1,65 +1,65 @@
GEM
remote: https://rubygems.org/
specs:
activesupport (3.2.14)
activesupport (3.2.17)
i18n (~> 0.6, >= 0.6.4)
multi_json (~> 1.0)
breakpoint (2.0.7)
compass (>= 0.12.1)
sass (>= 3.2.0)
chunky_png (1.2.8)
chunky_png (1.3.0)
coffee-script (2.2.0)
coffee-script-source
execjs
coffee-script-source (1.6.3)
compass (0.12.2)
coffee-script-source (1.7.0)
compass (0.12.3)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.1)
sass (= 3.2.14)
em-websocket (0.5.0)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.5.3)
eventmachine (1.0.3)
execjs (1.4.0)
multi_json (~> 1.0)
ffi (1.9.0)
ffi (1.9.3)
fssm (0.2.10)
haml (4.0.3)
haml (4.0.5)
tilt
hike (1.2.3)
http_parser.rb (0.5.3)
i18n (0.6.5)
kramdown (1.1.0)
listen (1.2.3)
i18n (0.6.9)
kramdown (1.3.2)
listen (1.3.1)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
rb-kqueue (>= 0.2)
middleman (3.1.5)
middleman (3.1.6)
coffee-script (~> 2.2.0)
compass (>= 0.12.2)
execjs (~> 1.4.0)
haml (>= 3.1.6)
kramdown (~> 1.1.0)
middleman-core (= 3.1.5)
middleman-more (= 3.1.5)
kramdown (~> 1.2)
middleman-core (= 3.1.6)
middleman-more (= 3.1.6)
middleman-sprockets (>= 3.1.2)
sass (>= 3.1.20)
uglifier (~> 2.1.0)
middleman-core (3.1.5)
middleman-core (3.1.6)
activesupport (~> 3.2.6)
bundler (~> 1.1)
i18n (~> 0.6.1)
listen (~> 1.2.2)
listen (~> 1.1)
rack (>= 1.4.5)
rack-test (~> 0.6.1)
thor (>= 0.15.2, < 2.0)
tilt (~> 1.3.6)
middleman-livereload (3.1.0)
middleman-livereload (3.1.1)
em-websocket (>= 0.2.0)
middleman-core (>= 3.0.2)
multi_json (~> 1.0)
rack-livereload
middleman-more (3.1.5)
middleman-more (3.1.6)
middleman-sprockets (3.1.4)
middleman-core (>= 3.0.14)
middleman-more (>= 3.0.14)
@ -69,35 +69,35 @@ GEM
middleman-syntax (1.2.1)
middleman-core (~> 3.0)
rouge (~> 0.3.0)
multi_json (1.8.1)
multi_json (1.9.0)
rack (1.5.2)
rack-contrib (1.1.0)
rack (>= 0.9.1)
rack-livereload (0.3.15)
rack
rack-rewrite (1.4.01)
rack-rewrite (1.5.0)
rack-test (0.6.2)
rack (>= 1.0)
rake (10.1.0)
rb-fsevent (0.9.3)
rb-inotify (0.9.2)
rake (10.1.1)
rb-fsevent (0.9.4)
rb-inotify (0.9.3)
ffi (>= 0.5.0)
rb-kqueue (0.2.0)
rb-kqueue (0.2.2)
ffi (>= 0.5.0)
redcarpet (3.0.0)
redcarpet (3.1.1)
rouge (0.3.10)
thor
ruby18_source_location (0.2)
rubypants (0.2.0)
sass (3.2.12)
sprockets (2.10.0)
sass (3.2.14)
sprockets (2.12.0)
hike (~> 1.2)
multi_json (~> 1.0)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
sprockets-helpers (1.0.1)
sprockets (~> 2.0)
sprockets-sass (1.0.2)
sprockets-sass (1.0.3)
sprockets (~> 2.0)
tilt (~> 1.1)
susy (2.0.0.alpha.4)

33
source/assets/css/components/_sass-syntax-switcher.scss Normal file
View File

@ -0,0 +1,33 @@
.slides {
.ui-helper-reset { line-height: inherit; }
.ui-tabs {
&,
.ui-tabs-nav,
.ui-tabs-nav li.ui-tabs-active,
.ui-tabs-panel { padding: 0; }
.ui-tabs-nav {
@include trailer(-3);
margin-right: -1em;
li {
float: right;
&,
&.ui-tabs-active { margin: 0; }
}
.ui-tabs-active a { color: $color-text-weak; }
.ui-tabs-anchor {
@include padding-leader(.5);
@include padding-trailer(.5);
padding: {
right: 1em;
left: 1em;
}
}
}
}
}

25
source/assets/css/foundation/_code.scss
View File

@ -1,15 +1,19 @@
%code-theme {
@include border-radius(4px);
border: 1px solid #ebebeb;
background: #f8f8f8;
color: $color-text-strong;
}
code,
pre {
@extend %code-theme;
@include font-size-small;
font: {
weight: $font-weight-regular;
family: $font-family-code;
}
white-space: pre-wrap;
background: rgba($color-background-shade, .175);
color: $color-text-strong;
@include border-radius(4px);
border: 1px solid #ebebeb;
@include box-sizing(border-box);
}
@ -18,11 +22,20 @@ code {
line-height: 0;
}
%pre-block {
@include rhythm(0, .5, .5, 0);
padding: {
right: 1em;
left: 1em;
}
display: block;
}
pre {
@extend %pre-block;
@include trailer;
@include rhythm(.5, .5, .5, .5);
@include bleed(1em);
display: block;
overflow-y: auto;
margin: auto 0 25px;
@ -34,6 +47,6 @@ pre {
line-height: inherit;
}
&.highlight .err {
background: #fcc;
background: none;
}
}

2
source/assets/css/sass.css.scss
View File

@ -28,6 +28,7 @@
@import "vendor/jquery-ui-1.10.4.custom";
@import "components/pop-stripe";
@import "components/type";
@import "components/page-header";
@ -45,6 +46,7 @@
@import "components/slides";
@import "components/icons";
@import "components/logos";
@import "components/sass-syntax-switcher";

52
source/assets/css/styleguide/_guide.scss
View File

@ -43,7 +43,35 @@
iframe { @include box-shadow(0 1px 1px $color-shadow)}
}
.width-only iframe { height: 640px; }
.styleguide_responsive-test {
.toolkit,
.pop-stripe,
.banner,
.page-header,
.release,
.contentinfo { @extend .visually-hidden; }
.page {
margin-bottom: 0;
padding-bottom: 0;
}
}
@import "toolkit";
[href*="404"],
[href*="htaccess"],
[href*="humans"],
[href*="robots"],
[href*="sitemap"] { @extend %hidden; }
@include breakpoint($tablet-large) {
.content-primary .swatches { max-width: none; }
.responsive-test-url {
@extend %table-layout-tablet-large;
text-align: left;
@ -82,27 +110,3 @@
margin: 0 .5em;
}
}
.width-only iframe { height: 640px; }
.styleguide_responsive-test {
.toolkit,
.pop-stripe,
.banner,
.page-header,
.release,
.contentinfo { @extend .visually-hidden; }
.page {
margin-bottom: 0;
padding-bottom: 0;
}
}
@import "toolkit";
[href*="404"],
[href*="htaccess"],
[href*="humans"],
[href*="robots"],
[href*="sitemap"] { @extend %hidden; }

128
source/assets/css/vendor/_jquery-ui-1.10.4.custom.scss vendored Normal file
View File

@ -0,0 +1,128 @@
/*! jQuery UI - v1.10.4 - 2014-03-13
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.tabs.css
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-clearfix {
min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter:Alpha(Opacity=0);
}
.ui-front {
z-index: 100;
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}

18
source/assets/js/components/sass-syntax-switcher.js Normal file
View File

@ -0,0 +1,18 @@
$(function() {
$( "#topic-2" ).tabs();
$( "#topic-3" ).tabs();
$( "#topic-5" ).tabs();
$( "#topic-6" ).tabs();
$( "#topic-7" ).tabs();
$( "#topic-8" ).tabs();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});

2
source/assets/js/components/smooth-scroll.js
View File

@ -1,5 +1,5 @@
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
$('.anchors a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {

1661
source/assets/js/vendor/jquery-ui-1.10.4.custom.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
source/code-snippets/_homepage-extend-css.md
View File

@ -16,4 +16,4 @@
.warning {
border-color: yellow;
}
```
```

18
source/code-snippets/_homepage-extend-sass.md Normal file
View File

@ -0,0 +1,18 @@
```sass
.message
border: 1px solid #ccc
padding: 10px
color: #333
.success
@extend .message
border-color: green
.error
@extend .message
border-color: red
.warning
@extend .message
border-color: yellow
```

10
source/code-snippets/_homepage-import-1-sass.md Normal file
View File

@ -0,0 +1,10 @@
```sass
// _reset.scss
html,
body,
ul,
ol
margin: 0
padding: 0
```

6
source/code-snippets/_homepage-import-1-scss.md
View File

@ -1,11 +1,11 @@
```scss
/* _reset.scss */
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
margin: 0;
padding: 0;
}
```
```

9
source/code-snippets/_homepage-import-2-sass.md Normal file
View File

@ -0,0 +1,9 @@
```sass
// base.sass
@import reset
body
font-size: 100% Helvetica, sans-serif
background-color: #efefef
```

10
source/code-snippets/_homepage-mixins-sass.md Normal file
View File

@ -0,0 +1,10 @@
```sass
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)
```

15
source/code-snippets/_homepage-nesting-sass.md Normal file
View File

@ -0,0 +1,15 @@
```sass
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
```

3
source/code-snippets/_homepage-nesting-scss.md
View File

@ -13,4 +13,5 @@ nav {
padding: 6px 12px;
text-decoration: none;
}
}
}
```

12
source/code-snippets/_homepage-operators-sass.md Normal file
View File

@ -0,0 +1,12 @@
```sass
.container
width: 100%
article[role="main"]
float: left
width: 600px / 960px * 100%
aside[role="complimentary"]
float: right
width: 300px / 960px * 100%
```

8
source/code-snippets/_homepage-variables-sass.md Normal file
View File

@ -0,0 +1,8 @@
```sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
```

2
source/community.html.haml
View File

@ -10,7 +10,7 @@ layout: layout_1_column
%ul.list-tiled
%ul.list-tiled.anchors
%li
:markdown
Still __getting started__? There are some great [tutorials](#Tutorials)

109
source/guide.html.haml
View File

@ -10,18 +10,18 @@ title: Sass Basics
- content_for :complementary do
%h3 Topics
:markdown
* [Preprocessing](#1)
* [Variables](#2)
* [Nesting](#3)
* [Partials](#4)
* [Import](#5)
* [Mixins](#6)
* [Inheritance](#7)
* [Operators](#8)
%ul.anchors
%li= link_to "Preprocessing", "#topic-1"
%li= link_to "Variables", "#topic-2"
%li= link_to "Nesting", "#topic-3"
%li= link_to "Partials", "#topic-4"
%li= link_to "Import", "#topic-5"
%li= link_to "Mixins", "#topic-6"
%li= link_to "Inheritance", "#topic-7"
%li= link_to "Operators", "#topic-8"
%ul.slides
%li#1
%li#topic-1
:markdown
## Pre-processing
@ -31,13 +31,23 @@ title: Sass Basics
* * *
%li#2
%li#topic-2
:markdown
## Variables
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the <code>$</code> symbol to make something a variable. Here's an example:
~ partial "code-snippets/homepage-variables-scss"
%ul
%li= link_to "SCSS", "#topic-2-SCSS"
%li= link_to "Sass", "#topic-2-Sass"
#topic-2-SCSS
%h3 SCSS Syntax
~ partial "code-snippets/homepage-variables-scss"
#topic-2-Sass
%h3 Sass Syntax
~ partial "code-snippets/homepage-variables-sass"
:markdown
When the Sass is processed, it takes the variables we define for the <code>$font-stack</code> and <code>$primary-color</code> and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the&nbsp;site.
@ -46,13 +56,23 @@ title: Sass Basics
%hr/
%li#3
%li#topic-3
:markdown
## Nesting
When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a site's&nbsp;navigation:
~ partial "code-snippets/homepage-nesting-scss"
%ul
%li= link_to "SCSS", "#topic-3-SCSS"
%li= link_to "Sass", "#topic-3-Sass"
#topic-3-SCSS
%h3 SCSS Syntax
~ partial "code-snippets/homepage-nesting-scss"
#topic-3-Sass
%h3 Sass Syntax
~ partial "code-snippets/homepage-nesting-sass"
:markdown
You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside the <code>nav</code> selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like&nbsp;this:
@ -61,7 +81,7 @@ title: Sass Basics
%hr/
%li#4
%li#topic-4
:markdown
## Partials
@ -69,7 +89,7 @@ title: Sass Basics
***
%li#5
%li#topic-5
:markdown
## Import
@ -77,8 +97,19 @@ title: Sass Basics
Let's say you have a couple of Sass files, <code>\_reset.scss</code> and <code>base.scss</code>. We want to import <code>\_reset.scss</code> into <code>base.scss</code>.
~ partial "code-snippets/homepage-import-1-scss"
~ partial "code-snippets/homepage-import-2-scss"
%ul
%li= link_to "SCSS", "#topic-5-SCSS"
%li= link_to "Sass", "#topic-5-Sass"
#topic-5-SCSS
%h3 SCSS Syntax
~ partial "code-snippets/homepage-import-1-scss"
~ partial "code-snippets/homepage-import-2-scss"
#topic-5-Sass
%h3 Sass Syntax
~ partial "code-snippets/homepage-import-1-sass"
~ partial "code-snippets/homepage-import-2-sass"
:markdown
@ -88,13 +119,23 @@ title: Sass Basics
%hr/
%li#6
%li#topic-6
:markdown
## Mixins
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for <code>border-radius</code>.
~ partial "code-snippets/homepage-mixins-scss"
%ul
%li= link_to "SCSS", "#topic-6-SCSS"
%li= link_to "Sass", "#topic-6-Sass"
#topic-6-SCSS
%h3 SCSS Syntax
~ partial "code-snippets/homepage-mixins-scss"
#topic-6-Sass
%h3 Sass Syntax
~ partial "code-snippets/homepage-mixins-sass"
:markdown
To create a mixin you use the <code>@mixin</code> directive and give it a name. We've named our mixin <code>border-radius</code>. We're also using the variable <code>$radius</code> inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with <code>@include</code> followed by the name of the mixin. When your CSS is generated it'll look like this:
@ -103,13 +144,23 @@ title: Sass Basics
%hr/
%li#7
%li#topic-7
:markdown
## Extend/Inheritance
This is one of the most useful features of Sass. Using <code>@extend</code> lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes.
~ partial "code-snippets/homepage-extend-scss"
%ul
%li= link_to "SCSS", "#topic-7-SCSS"
%li= link_to "Sass", "#topic-7-Sass"
#topic-7-SCSS
%h3 SCSS Syntax
~ partial "code-snippets/homepage-extend-scss"
#topic-7-Sass
%h3 Sass Syntax
~ partial "code-snippets/homepage-extend-sass"
:markdown
What the above code does is allow you to take the CSS properties in <code>.message</code> and apply them to <code>.success</code>, <code>.error</code>, & <code>.warning</code>. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks&nbsp;like:
@ -118,13 +169,23 @@ title: Sass Basics
%hr/
%li#8
%li#topic-8
:markdown
## Operators
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're going to do some simple math to calculate widths for an `aside` & `article`.
~ partial "code-snippets/homepage-operators-scss"
%ul
%li= link_to "SCSS", "#topic-8-SCSS"
%li= link_to "Sass", "#topic-8-Sass"
#topic-8-SCSS
%h3 SCSS Syntax
~ partial "code-snippets/homepage-operators-scss"
#topic-8-Sass
%h3 Sass Syntax
~ partial "code-snippets/homepage-operators-sass"
:markdown
We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:

2
source/layouts/foot/_js.haml
View File

@ -2,6 +2,6 @@
:javascript
window.jQuery || document.write('<script src="/assets/javascripts/vendor/jquery-2.0.3.js"><\/script>')
= javascript_include_tag "sass"
= javascript_include_tag "vendor/jquery-ui-1.10.4.custom", "sass"
= yield_content :scripts_footer