danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-30 04:29:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

layout fix

Browse Source
This commit is contained in:
₍˄ุ.͡˳̫.˄ุ₎ 2013-10-12 14:25:16 -04:00
parent e998b42e82
commit 67765c6baa
20 changed files with 206 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
data/community.yml
View File

@ -1,4 +1,96 @@
tutorials:
- name: "CodeSchool"
url: "http://www.codeschool.com/courses/assembling-sass"
- name: "LevelUp Tuts"
url: "http://leveluptuts.com/tutorials/sass-tutorials"
- name: "Lynda.com"
url: "http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html"
books:
- name: "Sass for Web Designers"
url: "http://www.abookapart.com/products/sass-for-web-designers"
- name: "Pragmatic Guide to Sass"
url: "http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass"
- name: "Sass and Compass in Action"
url: "http://manning.com/netherland/"
blogs:
- name: "The Sass Way"
url: "http://thesassway.com/"
- name: "CSS Tricks"
url: "http://css-tricks.com/search-results/?q=sass"
- name: "Zurb"
url: "http://zurb.com/blog/sass"
- name: "NetTuts"
url: "http://net.tutsplus.com/?s=sass"
- name: "Viget Inspire"
url: "http://viget.com/inspire/search/YTo2OntzOjg6ImtleXdvcmRzIjtzOjQ6InNhc3MiO3M6MTE6InNlYXJjaF9tb2RlIjtzOjM6ImFsbCI7czoxMToicmVzdWx0X3BhZ2UiO3M6MTQ6Imluc3BpcmUvc2VhcmNoIjtzOjEwOiJjb2xsZWN0aW9uIjthOjE6e2k6MDtzOjE6IjEiO31zOjEwOiJsb29zZV9lbmRzIjtiOjE7czo4OiJjYXRlZ29yeSI7czozOiIxMjUiO30"
- name: "Unmatched Style"
url: "http://www.google.com/cse?cx=partner-pub-1988806651014029%3A4kuybaak597&ie=ISO-8859-1&q=sass#gsc.tab=0&gsc.q=sass&gsc.page=1"
projects:
- name: "Compass"
url: "http://compass-style.org/"
description: "a CSS (and Sass!) authoring framework"
- name: "Susy"
url: "http://susy.oddbird.net/"
description: "a responsive grid layout built for Compass"
- name: "Bourbon"
url: "http://bourbon.io/"
description: "a lightweight mixin library"
- name: "Neat"
url: "http://neat.bourbon.io/"
description: "a mixin-based grid layout system"
- name: "Zurb Foundation"
url: "http://foundation.zurb.com/"
description: "a responsive front-end framework"
- name: "Rock Hammer
url: "https://github.com/malarkey/rock-hammer/"
description: "a starting framework with some basic styles for a project"
- name: "Twitter Bootstrap"
url: "https://github.com/jlong/sass-twitter-bootstrap"
description: "the ubiquitous framework… this time written in Sass!"
- name: "Gravity"
url: "http://gravityframework.com/"
description: "a framework for making HTML5 websites with Sass"
articles:
- name: mobile-small
- description: mobile-small
url: 240
- name: "Sass vs. Less"
url: "http://css-tricks.com/sass-vs-less/"
description: "by Chris Coyier, from CSS Tricks, May 2012"
- name: "Redesigning with Sass"
url: "http://css-tricks.com/redesigning-with-sass/"
description: "by David Walsh, from CSS Tricks, October 2012"
- name: "Using Bower with Sass & Compass"
url: "http://anthonyshort.me/2012/10/using-bower-with-sass-and-compass"
description: "by Anthony Short, October 2012"
- name: "Preprocess THIS!"
url: "http://cognition.happycog.com/article/preprocess-this"
description: "by Allison Wagner, from Cognition, September 2012"
- name: "A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1"
url: "http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php"
description: "by Dale Sande, from Unmatched Style, September 2012"
- name: "Sass Sleuth: Debugging Sass in Webkit Browsers"
url: "http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/"
description: "by Roman, from the Mobify blog, August 2012"
- name: "Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass"
url: "http://www.zurb.com/article/1031/stop-the-pain-of-vanilla-css-and-get-reli"
description: "by Chris, from the Zurb blog, July 2012"
- name: "Building a Nested Responsive Grid with Sass & Compass"
url: "http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass"
description: "by Trevor Davis, from Viget, May 2012"
- name: "Nested Selectors: The Inception Rule"
url: "http://thesassway.com/beginner/the-inception-rule"
description: "by Mario 'Kuroir' Ricalde, from The Sass Way, November 2011"
- name: "Improve your Responsive Design Workflow with Sass"
url: "http://www.netmagazine.com/tutorials/improve-your-responsive-design-workflow-sass"
description: "by Ryan Taylor, from .net, October 2011"
- name: "Getting Started with Sass and Compass"
url: "http://thesassway.com/beginner/getting-started-with-sass-and-compass"
description: "by Adam Stacoviak, from The Sass Way, June 2011"
- name: "Getting Sassy with CSS"
url: "http://www.sencha.com/blog/getting-sassy-with-css/"
description: "by David Kaneda, from the Sencha blog, June 2010"
- name: "Using Compass and Sass for your Next CSS Project"
url: "http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/"
description: "by Alex Coomans, from Net Tuts, August 2009"

1
source/assets/stylesheets/components/_alerts.scss
View File

@ -11,7 +11,6 @@
left: 0;
}
padding-bottom: 0;
max-width: none;
}
a {

3
source/assets/stylesheets/components/_articles.scss Normal file
View File

@ -0,0 +1,3 @@
.articles {
h3 { padding: 0; }
}

34
source/assets/stylesheets/components/_lists.scss.erb
View File

@ -12,7 +12,7 @@
display: inline-block;
margin: {
right: -2px;
left: $gutter-width;
left: 2em;
}
&:first-child { margin-left: 0; }
@ -31,25 +31,21 @@
}
<% end %>
.tiled-list {
%list-columns {
@extend %reset-list;
margin: 0 auto;
@include breakpoint($tablet-large) {
@extend %clear-fix-tablet-large;
margin: 0 #{-$gutter-width};
max-width: none;
li {
> li {
float: left;
width: 100 / 3 * 1%;
padding: {
right: $gutter-width;
left: $gutter-width;
}
&:nth-child(3n+4) { clear: both; }
li {
float: none;
width: auto;
@ -62,6 +58,30 @@
}
}
.list-columns {
@extend %list-columns;
@include breakpoint($tablet-large) {
li {
width: 50%;
&:nth-child(odd) { clear: both; }
}
}
}
.list-tiled {
@extend %list-columns;
@include breakpoint($tablet-large) {
li {
width: 100 / 3 * 1%;
&:nth-child(3n+4) { clear: both; }
}
}
}
%description-list {
@include breakpoint($mobile-large) { dd { margin-left: 0; } }

1
source/assets/stylesheets/components/_type.scss
View File

@ -1,4 +1,5 @@
.introduction {
margin: 0 auto;
max-width: 35em;
text-align: center;
color: $color-accent;

5
source/assets/stylesheets/foundation/_block.scss
View File

@ -8,9 +8,4 @@ section { display: block; }
p {
@extend %reset-margin;
@include padding-trailer;
margin: {
right: auto;
left: auto;
}
max-width: 56em;
}

1
source/assets/stylesheets/foundation/_code.scss
View File

@ -16,6 +16,7 @@ pre {
code {
padding: .25em;
line-height: 0;
white-space: nowrap;
}
pre {

6
source/assets/stylesheets/regions/_content-primary.scss
View File

@ -1,8 +1,10 @@
@include breakpoint($tablet-large) {
.content-primary {
@include span(8);
text-align: left;
h2,
h3 { text-align: left; }
ul,
dl,
p { max-width: 37.5em; }
}
}

2
source/assets/stylesheets/regions/_content-secondary.scss
View File

@ -5,6 +5,4 @@
h2,
h3 { text-align: left; }
}
@include breakpoint($screen-small) { padding-left: $gutter-width * 4; }
}

3
source/assets/stylesheets/regions/_contentinfo.scss
View File

@ -4,9 +4,8 @@
color: $color-text-weak;
.container {
@include leading-border;
@include padding-leader;
@include padding-trailer;
border-color: $color-border;
}
ul {

2
source/assets/stylesheets/regions/_navigation.scss
View File

@ -44,8 +44,6 @@
&.collapse { display: block !important; }
ul {
margin: 0;
max-width: none;
white-space: nowrap;
text-align: right;
}

4
source/assets/stylesheets/regions/_section-bottom.scss
View File

@ -2,4 +2,8 @@
@include padding-leader;
@include padding-trailer;
@include background(linear-gradient(mix($color-background-shade, $color-background), transparent));
@include breakpoint($screen-small) {
}
}

1
source/assets/stylesheets/sass.css.scss
View File

@ -38,6 +38,7 @@
@import "components/code";
@import "components/alerts";
@import "components/progress";
@import "components/articles";
@import "components/get-started";
@import "components/slides";
@import "components/icons";

3
source/assets/stylesheets/styleguide/_color.scss.erb
View File

@ -6,6 +6,7 @@ $contrasted-lightness-threshold: 75%;
pre,
code {
background: none;
border: 0;
color: inherit;
}
@ -20,7 +21,7 @@ $contrasted-lightness-threshold: 75%;
}
}
ul.swatches { @extend .tiled-list; }
ul.swatches { @extend .list-tiled; }
<% data.color.colors.each do |color| %>
.swatch-<%= color.name %> pre { @include contrasted(#<%= color.hex %>); }

9
source/assets/stylesheets/styleguide/_guide.scss
View File

@ -32,14 +32,7 @@
x: scroll;
}
ul {
@extend %reset-list;
margin: {
right: 0;
left: 0;
}
max-width: none;
}
ul { @extend %reset-list; }
li { position: relative; }

194
source/community.haml
View File

@ -1,14 +1,73 @@
---
title: "#teamSass"
layout: layout_1_column
---
- content_for :introduction do
Sass has an awesome community of designers and developers who love to spread
the word and help people out. Here we&rsquo;ve collected some&nbsp;resources.
the word and help people out. Here we&rsquo;ve collected some resources.
Happy&nbsp;Styling!
%h2#Articles Sass Articles on the Web
%ul.articles
- for article in data.community.articles
%li
%h3= link_to article.name, article.url
%p= article.description
%h2#Contribute Contribute
%p Sass is an open source project and we encourage you to contribute. You can contribute with bug reports and feature requests or if you have code to contribute we will love you forever.
%p When adding bug reports, feature requests, or code there are a couple of primary branches we use.
%dl
%dt= link_to "Stable", "https://github.com/nex3/sass"
%dd The stable branch is where we do development on the released version. The majority of bug fixes should go here. If you're just reporting a bug <a href="https://github.com/nex3/sass/issues"add an issue</a> and note the version of Sass where you experienced the issue in your comment. If you have a some code to contribute, fork the stable branch and send us a pull request. We'll review your patch and either accept or decline with comments.
%dl
%dt= link_to "Master", "https://github.com/nex3/sass/tree/master"
%dd The master branch is where we keep track of the next version of Sass. New feature requests should be made here. Similar to submitting patches, for the project and send us a pull request. We'll review your pull request and either accept or decline. If we decline we'll make a few comments in the pull request for changes or a reason the pull request was declined.
%h2#PullRequests Pull Requests & Patches
%p Here are a few simple things you'll need to do when submitting a patch via pull request:
%ul
%li Write a commit message that is well-written, descriptive and contain proper grammar and punctuation.
%li Make sure the first line of your commit message is a short, full sentence.
%li Contain any appropriate unit tests in your commit
%li Add your changes to the changelog for the correct branch. The changelog is in <code>doc-src/SASS_CHANGELOG.md</code>
%li If your change is user-facing, update the appropriate section in reference documentation.
- content_for (:complementary) do
%h3#Tutorials Tutorials
%ul
- for tutorial in data.community.tutorials
%li= link_to tutorial.name, tutorial.url
%h3#Blogs Sass Blogs
%ul
- for blog in data.community.blogs
%li= link_to blog.name, blog.url
%h3#Books Sass Books
%ul
- for book in data.community.books
%li= link_to book.name, book.url
%h3#Projects Projects & Frameworks
%ul
- for project in data.community.projects
%li
= link_to project.name, project.url
&mdash;
= project.description
- content_for (:section_bottom) do
%ul.tiled-list
%ul.list-tiled
%li
:markdown
Still __getting started__? There are some great
@ -26,132 +85,3 @@ layout: layout_1_column
Thinking of __contributing__ to Sass itself? We rely on everyone to
keep Sass as stable as it is. Feel free to
[submit a patch via pull request](#Contribute) to the Sass project.
.content-primary
%h3#Articles Sass Articles on the Web
%ul.articles
- for article in data.community.articles
%li
%h4= link_to article.url, article.name
%p= article.description
%hr/
/ Will clean up these articles later. It'll be a curated list of
/ articles that we'll update from time to time.
%ul
%li
%ul
%li
= link_to "Sass vs. Less", 'http://css-tricks.com/sass-vs-less/'
– by Chris Coyier, from CSS Tricks, May 2012
%li
= link_to "Redesigning with Sass", "http://css-tricks.com/redesigning-with-sass/"
– by David Walsh, from CSS Tricks, October 2012
%li
= link_to "Using Bower with Sass & Compass", 'http://anthonyshort.me/2012/10/using-bower-with-sass-and-compass'
– by Anthony Short, October 2012
%li
= link_to "Preprocess THIS!", 'http://cognition.happycog.com/article/preprocess-this'
– by Allison Wagner, from Cognition, September 2012
%li
= link_to "A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1", 'http://unmatchedstyle.com/news/a-newbs-guide-to-syntactically-awesome-stylesheets-sass-part-1.php'
– by Dale Sande, from Unmatched Style, September 2012
%li
= link_to "Sass Sleuth: Debugging Sass in Webkit Browsers", 'http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/'
– by Roman, from the Mobify blog, August 2012
%li
= link_to "Stop the Pain of Vanilla CSS and Get Relief by Adding Toppings with Sass", 'http://www.zurb.com/article/1031/stop-the-pain-of-vanilla-css-and-get-reli'
– by Chris, from the Zurb blog, July 2012
%li
= link_to "Building a Nested Responsive Grid with Sass & Compass", 'http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass'
– by Trevor Davis, from Viget, May 2012
%li
= link_to "Nested Selectors: The Inception Rule", 'http://thesassway.com/beginner/the-inception-rule'
– by Mario "Kuroir" Ricalde, from The Sass Way, November 2011
%li
= link_to "Improve your Responsive Design Workflow with Sass", 'http://www.netmagazine.com/tutorials/improve-your-responsive-design-workflow-sass'
– by Ryan Taylor, from .net, October 2011
%li
= link_to "Getting Started with Sass and Compass", 'http://thesassway.com/beginner/getting-started-with-sass-and-compass'
– by Adam Stacoviak, from The Sass Way, June 2011
%li
= link_to "Getting Sassy with CSS", 'http://www.sencha.com/blog/getting-sassy-with-css/'
– by David Kaneda, from the Sencha blog, June 2010
%li
= link_to "Using Compass and Sass for your Next CSS Project", 'http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/'
– by Alex Coomans, from Net Tuts, August 2009
%li
%h3#Tutorials Tutorials
%ul
%li= link_to "CodeSchool", 'http://www.codeschool.com/courses/assembling-sass'
%li= link_to "LevelUp Tuts", 'http://leveluptuts.com/tutorials/sass-tutorials'
%li= link_to "Lynda.com", 'http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html'
%h3#Blogs Sass Blogs
/ Need to research a couple more of these
%ul
%li= link_to "The Sass Way", 'http://thesassway.com/'
%li= link_to "CSS Tricks", 'http://css-tricks.com/search-results/?q=sass'
%li= link_to "Zurb", 'http://zurb.com/blog/sass'
%li= link_to "NetTuts", 'http://net.tutsplus.com/?s=sass'
%li= link_to "Viget Inspire", 'http://viget.com/inspire/search/YTo2OntzOjg6ImtleXdvcmRzIjtzOjQ6InNhc3MiO3M6MTE6InNlYXJjaF9tb2RlIjtzOjM6ImFsbCI7czoxMToicmVzdWx0X3BhZ2UiO3M6MTQ6Imluc3BpcmUvc2VhcmNoIjtzOjEwOiJjb2xsZWN0aW9uIjthOjE6e2k6MDtzOjE6IjEiO31zOjEwOiJsb29zZV9lbmRzIjtiOjE7czo4OiJjYXRlZ29yeSI7czozOiIxMjUiO30'
%li= link_to "Unmatched Style", 'http://www.google.com/cse?cx=partner-pub-1988806651014029%3A4kuybaak597&ie=ISO-8859-1&q=sass#gsc.tab=0&gsc.q=sass&gsc.page=1'
%h3#Books Sass Books
%ul
%li= link_to "Sass for Web Designers", 'http://www.abookapart.com/products/sass-for-web-designers'
%li= link_to "Pragmatic Guide to Sass", 'http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass'
%li= link_to "Sass and Compass in Action", 'http://manning.com/netherland/'
%h3#Projects Projects & Frameworks
%ul
%li
= link_to "Compass", 'http://compass-style.org/'
– a CSS (and Sass!) authoring framework
%li
= link_to "Susy", 'http://susy.oddbird.net/'
– a responsive grid layout built for Compass
%li
= link_to "Bourbon", 'http://bourbon.io/'
– a lightweight mixin library
%li
= link_to "Neat", 'http://neat.bourbon.io/'
– a mixin-based grid layout system
%li
= link_to "Zurb Foundation", 'http://foundation.zurb.com/'
– a responsive front-end framework
%li
= link_to "Rock Hammer", 'https://github.com/malarkey/rock-hammer/'
– a starting framework with some basic styles for a project
%li
= link_to "Twitter Bootstrap", 'https://github.com/jlong/sass-twitter-bootstrap'
– the ubiquitous framework... this time written in Sass!
%li
= link_to "Gravity", 'http://gravityframework.com/'
– a framework for making HTML5 websites with Sass
%li
%h3#Contribute Contribute
%p Sass is an open source project and we encourage you to contribute. You can contribute with bug reports and feature requests or if you have code to contribute we will love you forever.
%p When adding bug reports, feature requests, or code there are a couple of primary branches we use.
%dl
%dt= link_to "Stable", "https://github.com/nex3/sass"
%dd The stable branch is where we do development on the released version. The majority of bug fixes should go here. If you're just reporting a bug <a href="https://github.com/nex3/sass/issues"add an issue</a> and note the version of Sass where you experienced the issue in your comment. If you have a some code to contribute, fork the stable branch and send us a pull request. We'll review your patch and either accept or decline with comments.
%dl
%dt= link_to "Master", "https://github.com/nex3/sass/tree/master"
%dd The master branch is where we keep track of the next version of Sass. New feature requests should be made here. Similar to submitting patches, for the project and send us a pull request. We'll review your pull request and either accept or decline. If we decline we'll make a few comments in the pull request for changes or a reason the pull request was declined.
%h3#PullRequests Pull Requests & Patches
%p Here are a few simple things you'll need to do when submitting a patch via pull request:
%ul
%li Write a commit message that is well-written, descriptive and contain proper grammar and punctuation.
%li Make sure the first line of your commit message is a short, full sentence.
%li Contain any appropriate unit tests in your commit
%li Add your changes to the changelog for the correct branch. The changelog is in <code>doc-src/SASS_CHANGELOG.md</code>
%li If your change is user-facing, update the appropriate section in reference documentation.

7
source/index.html.haml
View File

@ -9,7 +9,7 @@ layout: layout_1_column
extension language in the&nbsp;world.
- content_for :section_bottom do
%ul.tiled-list
%ul.list-tiled
%li
%h3 CSS Compatible
%p
@ -50,11 +50,6 @@ layout: layout_1_column
and
= link_to "Susy", "http://susy.oddbird.net/"
just to name a&nbsp;few.
%li
%h3 Training
%p
There is a huge amount of training and support available for Sass. No
HTML/CSS education is complete without learning&nbsp;Sass.
- content_for :complementary do
.get-started

2
source/install.haml
View File

@ -4,7 +4,7 @@ layout: layout_1_column
---
%h2 There are a couple of ways to start using&nbsp;Sass:
%ol.tiled-list
%ol.list-columns
%li.gui-application
%h3 1. Applications
%p There are a a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps <small>(and totally worth it)</small>.

2
source/layouts/layout.haml
View File

@ -20,6 +20,7 @@
= partial "layouts/regions/page_header"
=yield
= partial "layouts/regions/section_bottom"
.alert.release
.container
@ -28,6 +29,5 @@
%li=link_to "Release Notes", "http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html"
%li=link_to "Fork on Github", "https://github.com/nex3/sass"
= partial "layouts/regions/section_bottom"
= partial "layouts/regions/contentinfo"
= partial "layouts/foot/javascripts"

2
source/layouts/layout_2_column.haml
View File

@ -7,4 +7,4 @@
%main.main.content-primary(role="main")=yield
- if content_for?(:complementary)
.complementary(role="complementary")= yield_content :complementary
.complementary.content-secondary(role="complementary")= yield_content :complementary