mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
Clean up style guide
This commit is contained in:
Jina Anne
parent
9a4d66643e
commit
fb5eb4f52c
@ -1,6 +1,11 @@
|
||||
.sl-c-banner {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&__brand img {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@ -24,13 +29,7 @@
|
||||
|
||||
a {
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: sl-px-to-rem(12px) sl-px-to-rem(16px);
|
||||
|
||||
&:hover,
|
||||
&:focus { background: rgba($sl-color--iron, .5); }
|
||||
|
||||
&:active { background: $sl-color--iron; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,13 +22,12 @@
|
||||
- content_for :navigation do
|
||||
- root_url = config[:host]
|
||||
|
||||
%h3= link_to "Style Guide", "/styleguide"
|
||||
%nav.sl-c-list-navigation-wrapper
|
||||
:markdown
|
||||
### [Style Guide](/styleguide)
|
||||
|
||||
%ul.sl-c-list.sl-c-list--navigation
|
||||
- sitemap.resources.each do |page|
|
||||
- if page.url =~ /styleguide/
|
||||
- unless page.url =~ /assets/
|
||||
- unless page.data.title == "Style Guide"
|
||||
%li.sl-c-list--navigation__item
|
||||
= link_to "#{root_url}#{page.url.gsub!(/(\/)+$/,'')}" do
|
||||
= page.data.title
|
||||
- [Brand](/styleguide/brand)
|
||||
- [Color](/styleguide/color)
|
||||
- [Typography](/styleguide/typography)
|
||||
- [Layout](/styleguide/layout)
|
||||
- [Code](/styleguide/code)
|
||||
|
||||
@ -2,68 +2,63 @@
|
||||
title: Brand Guidelines
|
||||
---
|
||||
|
||||
%h2 Brand Usage
|
||||
:markdown
|
||||
## Brand Usage
|
||||
|
||||
%ul
|
||||
%li
|
||||
Do not stretch or distort the logo. Use the "seal" version of the logo
|
||||
when needing to use a square image (like avatars).
|
||||
- Do not stretch or distort the logo. Use the "seal" version of the logo when
|
||||
needing to use a square image (like avatars).
|
||||
- Do not alter the color of the logo. The official logo color is
|
||||
`$sl-color--hopbush` (`#c69`).
|
||||
- If you have to put the logo on a busy/colorful background, then you can use
|
||||
one of the reversed (on white) logos, provided here.
|
||||
- When using the Sass brand and identity in your presentations, articles,
|
||||
videos, or any other media, please be respectful. The Sass brand is feminine
|
||||
and we love that. But our brand must never be used alongside sexist imagery.
|
||||
In fact, we [explicitly changed our
|
||||
logo](https://github.com/sass/sass/issues/349) for that very reason. Read
|
||||
our [community guidelines](/community-guidelines) for more information. If
|
||||
you have questions about the images you want to use, please feel free to
|
||||
contact us at:
|
||||
|
||||
%li
|
||||
Do not alter the color of the logo. The official logo color is `$hopbush`
|
||||
(`#c69`).
|
||||
= succeed "." do
|
||||
:javascript
|
||||
//<![CDATA[
|
||||
<!--
|
||||
var x="function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
|
||||
"=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
|
||||
".substr(0,ol);}f(\")65,\\\"#'-<6-s>,ban\\\"\\\\ldhd*uvepBxt720\\\\320\\\\t\\"+
|
||||
"\\620\\\\720\\\\620\\\\330\\\\IT)700\\\\100\\\\720\\\\520\\\\120\\\\n\\\\20" +
|
||||
"0\\\\M520\\\\730\\\\300\\\\700\\\\530\\\\n\\\\310\\\\n\\\\700\\\\C120\\\\22" +
|
||||
"0\\\\100\\\\410\\\\~84/z516;020\\\\v710\\\\o4<;'9li620\\\\&$+#r\\\\d630\\\\" +
|
||||
";5)QKPQTy130\\\\KDWfo610\\\\FRUELX_420\\\\GF410\\\\@n\\\\200\\\\n\\\\600\\\\"+
|
||||
"D330\\\\420\\\\700\\\\620\\\\$230\\\\620\\\\010\\\\610\\\\*3038`6,;?49q610\\"+
|
||||
"\\l6*<%l*vk`)* 0*06nKPXQNYV\\\\\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x" +
|
||||
"(edoCrahCmorf.gnirtS=+o;721=%y;i=+y)65==i(fi{)++i;l<i;0=i(rof;htgnel.x=l,\\" +
|
||||
"\"\\\"=o,i rav{)y,x(f noitcnuf\")" ;
|
||||
while(x=eval(x));
|
||||
//-->
|
||||
//]]>
|
||||
|
||||
%li
|
||||
If you have to put the logo on a busy/colorful background, then you can
|
||||
use one of the reversed (on white) logos, provided here.
|
||||
|
||||
%li
|
||||
%p
|
||||
When using the Sass brand and identity in your presentations, articles,
|
||||
videos, or any other media, please be respectful. The Sass brand is
|
||||
feminine and we love that. But our brand must never be used alongside
|
||||
sexist imagery. In fact, we
|
||||
= link_to "explicitly changed our logo", "https://github.com/sass/sass/issues/349"
|
||||
for that very reason. If you have questions about the images you want to
|
||||
use, please feel free to contact us at:
|
||||
= succeed "." do
|
||||
:javascript
|
||||
//<![CDATA[
|
||||
<!--
|
||||
var x="function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
|
||||
"=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
|
||||
".substr(0,ol);}f(\")65,\\\"#'-<6-s>,ban\\\"\\\\ldhd*uvepBxt720\\\\320\\\\t\\"+
|
||||
"\\620\\\\720\\\\620\\\\330\\\\IT)700\\\\100\\\\720\\\\520\\\\120\\\\n\\\\20" +
|
||||
"0\\\\M520\\\\730\\\\300\\\\700\\\\530\\\\n\\\\310\\\\n\\\\700\\\\C120\\\\22" +
|
||||
"0\\\\100\\\\410\\\\~84/z516;020\\\\v710\\\\o4<;'9li620\\\\&$+#r\\\\d630\\\\" +
|
||||
";5)QKPQTy130\\\\KDWfo610\\\\FRUELX_420\\\\GF410\\\\@n\\\\200\\\\n\\\\600\\\\"+
|
||||
"D330\\\\420\\\\700\\\\620\\\\$230\\\\620\\\\010\\\\610\\\\*3038`6,;?49q610\\"+
|
||||
"\\l6*<%l*vk`)* 0*06nKPXQNYV\\\\\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x" +
|
||||
"(edoCrahCmorf.gnirtS=+o;721=%y;i=+y)65==i(fi{)++i;l<i;0=i(rof;htgnel.x=l,\\" +
|
||||
"\"\\\"=o,i rav{)y,x(f noitcnuf\")" ;
|
||||
while(x=eval(x));
|
||||
//-->
|
||||
//]]>
|
||||
Read our
|
||||
= link_to "community guidelines", "/community-guidelines"
|
||||
for more information.
|
||||
|
||||
%p= link_to "Download vector logos", "/assets/img/styleguide/sass-logo.zip", class: "button primary"
|
||||
%p= link_to "Download vector logos", "/assets/img/styleguide/sass-logo.zip", class: "sl-c-button sl-c-button--primary"
|
||||
%p= partial "/styleguide/brand_license"
|
||||
|
||||
.logos
|
||||
%h3 Standard
|
||||
%ul.list-columns
|
||||
%li= image_tag "styleguide/color.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-color.png", height: "80", alt: "Sass"
|
||||
|
||||
%h3 White
|
||||
%ul.list-tiled.swatch-color-background-shade
|
||||
%li= image_tag "styleguide/white.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-color-reversed.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-black-reversed.png", height: "80", alt: "Sass"
|
||||
|
||||
%h3 Black
|
||||
%ul.list-columns
|
||||
%li= image_tag "styleguide/black.png", height: "80", alt: "Sass"
|
||||
%li= image_tag "styleguide/seal-black.png", height: "80", alt: "Sass"
|
||||
%h3 Standard
|
||||
|
||||
%ul.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--gutters-large.sl-l-large-grid--center
|
||||
%li.sl-l-grid__column= image_tag "styleguide/color.png", height: "80", alt: "Sass"
|
||||
%li.sl-l-grid__column= image_tag "styleguide/seal-color.png", height: "80", alt: "Sass"
|
||||
|
||||
%h3 White
|
||||
|
||||
%ul.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--gutters-large.sl-l-large-grid--center.sl-background--midnight-blue
|
||||
%li.sl-l-grid__column= image_tag "styleguide/white.png", height: "80", alt: "Sass"
|
||||
%li.sl-l-grid__column= image_tag "styleguide/seal-color-reversed.png", height: "80", alt: "Sass"
|
||||
%li.sl-l-grid__column= image_tag "styleguide/seal-black-reversed.png", height: "80", alt: "Sass"
|
||||
|
||||
%h3 Black
|
||||
|
||||
%ul.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--gutters-large.sl-l-large-grid--center
|
||||
%li.sl-l-grid__column= image_tag "styleguide/black.png", height: "80", alt: "Sass"
|
||||
%li.sl-l-grid__column= image_tag "styleguide/seal-black.png", height: "80", alt: "Sass"
|
||||
|
||||
@ -3,20 +3,9 @@ title: Color & Theming
|
||||
---
|
||||
|
||||
%h2 Brand Colors
|
||||
%ul.swatches
|
||||
%ul.sl-l-grid.sl-l-grid--full.sl-l-large-grid--divide-by-3.sl-l-large-grid--gutters
|
||||
- for swatch in data.color.colors
|
||||
%li{class: "swatch-" + swatch.name}
|
||||
%pre
|
||||
%code
|
||||
= "$" + swatch.name
|
||||
%br/
|
||||
= "#" + swatch.hex
|
||||
%li.sl-l-grid__column
|
||||
%p{class: "sl-background--" + swatch.name}
|
||||
|
||||
%h2 Usage
|
||||
- for swatch in data.color.semantic_colors
|
||||
%dl.guide-description-list.swatches
|
||||
%dt
|
||||
%code= "$color-" + swatch.name
|
||||
|
||||
%dd{class: "swatch-color-" + swatch.name}
|
||||
%code= swatch.value
|
||||
%code= "$sl-color--" + swatch.name
|
||||
|
||||
@ -2,27 +2,9 @@
|
||||
title: Layouts & Grid
|
||||
introduction: >
|
||||
We use a flex-box grid.
|
||||
breakpoints:
|
||||
- name: small
|
||||
size: 30em (480px)
|
||||
- name: medium
|
||||
size: 40em (640px)
|
||||
- name: large
|
||||
size: 60em (960px)
|
||||
- name: x-large
|
||||
size: 80em (1280px)
|
||||
---
|
||||
|
||||
%h2 Other Tools & Resources
|
||||
|
||||
%ul.list-feature
|
||||
%li= link_to 'The EMs have it: Proportional Media Queries FTW!', 'http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/'
|
||||
|
||||
%h2 Breakpoints
|
||||
|
||||
- current_page.data.breakpoints.each do |breakpoint|
|
||||
%dl.guide-description-list
|
||||
%dt
|
||||
%code= '@include sl-breakpoint--' + breakpoint.name
|
||||
|
||||
%dd= breakpoint.size
|
||||
|
||||
@ -2,36 +2,11 @@
|
||||
title: Typography
|
||||
---
|
||||
|
||||
%h2 Sizes
|
||||
|
||||
- for font_size in data.typography.sizes
|
||||
%dl.guide-description-list
|
||||
%dt
|
||||
%code= "@include font-size-" + font_size.name
|
||||
|
||||
%dd{class: "font-size-" + font_size.name}= font_size.value
|
||||
|
||||
%hr/
|
||||
|
||||
|
||||
|
||||
%h2 Weights
|
||||
|
||||
- for font_weight in data.typography.weights
|
||||
%dl.guide-description-list
|
||||
%dt
|
||||
%code= "$font-weight-" + font_weight.weight
|
||||
|
||||
%dd{class: "font-weight-" + font_weight.weight}= font_weight.value
|
||||
|
||||
%hr/
|
||||
|
||||
|
||||
|
||||
%h2 Families
|
||||
|
||||
- for font_family in data.typography.families
|
||||
%dl.guide-description-list
|
||||
%dt
|
||||
%code= "$font-family-" + font_family.style
|
||||
%dt{class: "sl-font-family--" + font_family.style}= font_family.value
|
||||
|
||||
%dd{class: "font-family-" + font_family.style}= font_family.value
|
||||
%dd
|
||||
%code= "$sl-font-family--" + font_family.style
|
||||
|
||||
Loading…
Reference in New Issue
Block a user