diff --git a/apps/mozorg/templates/mozorg/sandstone.html b/apps/mozorg/templates/mozorg/sandstone.html new file mode 100644 index 0000000000..9074560d7b --- /dev/null +++ b/apps/mozorg/templates/mozorg/sandstone.html @@ -0,0 +1,230 @@ +{% extends "base.html" %} + +{% block page_title %}Sandstone - Bedrock’s Layer of CSS Love{% endblock %} + +{% block site_css %} + {{ css('sandstone-guide') }} +{% endblock %} + +{% block content %} + +
+

Sandstone

+

Visual style for the Mozilla web universe

+
+ + + +
+
+ +
+ +
+

Less Framework

+

Responsive Grid

+
+ +

Pages are built on a responsive gride, with 10, 6, or 3 columns, depending on the viewer. Columns are 68px wide with a 24px gutter. CSS classes for grids (.row, .span1, .span2 etc.) are provided, or you can roll-your-own. If you’re using LESS (the dynamic style sheet language, not to be confused with the Less Framework, mixins are provided for columns (.span(1), .span(2), etc.).

+back to top + +
+ +
+

Grid Information

+

Less framework website

+

Less Grid Overlay (drag this link to your bookmarks bar and click it!)

+
+ +
+ +

Grid Notes

+ +
    +
  • CSS Media queries based layout for Smartphone, Landscape Smartphone, Tablet, Desktop
    • +
  • Max width on smartphone is 252px (3 grid columns)
    • +
  • Ideal main body copy width on Tablet and Desktop is 528px (6 columns)
    • +
  • .Org style uses vertical spacing gutters of multiples of 24px to separate sections
    • +
  • View CSS source on this site for example of grid usage
    • +
+ + + + + + +
+ +
+
+ +
+
+ +
+ +
+

Tabzilla

+

Universal Tab

+
+ +

Tabzilla is the universal tab that appears on all Mozilla websites. A simple set of HTML/CSS/JS is provided for easy integration.

+ +
+ +
+

Tabzilla Live

+

View tabzilla live at www.mozilla.org or at the top of this page.

+
+ +
+

Tabzilla Code

+

+ Find the Tabzilla Documentation and code on GitHub. +

+ +
+ +
+
+ +
+
+
+ +
+

Typefaces

+

Open Sans + Georgia

+
+ +

Body copy is set in 16px Georgia with a 24px baseline. Headlines are set in Open Sans Light. The Open Sans font family is avaiable as a hosted web font from mozilla.org. The Sandstone CSS provides headings styled with Open Sans and you can add the LESS mixin .open-sans or .open-sans-light to any element.

+ + back to top + +
+ +
+

LESS mixins

+ +

+ .open-sans;
+ .open-sans-light; +

+
+ +
+ +

Type Examples

+ +

huge

+

large

+

headline 1

+

headline 2

+

headline 3

+

headline 4

+ +

body text

+

small

+ +
+ +
+
+ +
+
+ +
+ +

Backgrounds

+ +

Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis.

back to top + +
+ +
+

Background CSS

+

+ background: rgb(245,241,232) url('background-gradient.png') repeat-x top center; +

+
+ +
+

Background Example

+

+ + Download the default backgrounds + Download the background PSD + +

+ +
+ +
+
+ +
+
+ +
+ +
+

Buttons

+

Gumdrop Style

+
+ +

Button styles with hover/active states and CSS transitions are provided. Green buttons should be used for download actions, blue for other primary functions.

+ + back to top + +
+ +
+

Button CSS

+

+ .button
+ .button-blue +

+

+ .button-white +

+

+ <a class="button">
+   Primary
+   <small>
+     Optional
+   </small>
+ </a> +

+
+ +
+

Button Examples

+

+ Primary Button + Primary Button +

+

+ Button With secondary text +

+

+ Secondary Button +

+
+ +
+
+ + + + +{% endblock %} diff --git a/apps/mozorg/templates/mozorg/styleguide.html b/apps/mozorg/templates/mozorg/styleguide.html deleted file mode 100644 index c2548dd0ab..0000000000 --- a/apps/mozorg/templates/mozorg/styleguide.html +++ /dev/null @@ -1,204 +0,0 @@ -{% extends "base.html" %} - -{% block page_title %}Sandstone - Bedrock’s Layer of CSS Love{% endblock %} - -{% block site_css %} - {{ css('styleguide') }} - -{% endblock %} - -{% block content %} - -
- -
-

Sandstone

-

Bedrock’s Layer of CSS Love

-
- - -
- -
- -

Less Framework

-

Responsive Grid

- -

Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis.

back to top - -
- -
-

Grid Information

-

Less framework website

-

Less Grid Overlay (drag this link to your bookmarks bar and click it!)

-
- -
- -

Grid Notes

- -

- -

    -
  • CSS Media queries based layout for Smartphone, Landscape Smartphone, Tablet, Desktop
    • -
  • Max width on smartphone is 252px (3 grid columns)
    • -
  • Ideal main body copy width on Tablet and Desktop is 528px (6 columns)
    • -
  • .Org style uses vertical spacing gutters of multiples of 24px to separate sections
    • -
  • View CSS source on this site for example of grid usage
    • -
- - Download page template PSD - Download subpage template PSD - - - - -
- -
- -
- - -
- -

Tabzilla

-

Universal Tab

- -

Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis.

back to top - -
- -
-

Tabzilla Live

-

View tabzilla live at www.mozilla.org

-
- -
-

Tabzilla Code

-

- Download Tabzilla on GitHub -

- -
- -
- -
- -
- -

Typefaces

- -

Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis.

back to top - -
- -
-

Type CSS

-

- - @font-face { - font-family: "OpenSans"; - src: url(OpenSans-Light.ttf) format("truetype"); - } - -
body {font: 16px/24px Georgia, serif;} -
- -
.huge, .large, h1, h2, h3, h4 {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75);} -
-
.huge {font-size: 108px; letter-spacing: -4px; line-height: 100%;} -
.large {font-size: 72px; letter-spacing: -3px; line-height: 100%;} -
h1 {font-size: 48px; letter-spacing: -2px; line-height: 100%;} -
h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;} -
h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;} -
h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;} -
.small, small { font-size: 12px; line-height: 100%;} - -

- -
- -
- -

Type Examples

- -

huge

-

large

-

headline 1

-

headline 2

-

headline 3

-

headline 4

- -

body text

-

small

- -
- -
- -
- -
- -

Backgrounds

- -

Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis.

back to top - -
- -
-

Background CSS

-

- background: rgb(245,241,232) url('background-gradient.png') repeat-x top center; -

-
- -
-

Background Example

-

- - Download the default backgrounds - Download the background PSD - -

- -
- -
- -
- -
- -

Buttons

-

Gumdrop Style

- -

Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis.

back to top - -
- -
-

Button CSS

-

There is so much awesome baked into these buttons with the transitions and the box-shadows and the love that I recommend viewing the CSS for this page here. Go to the section titled "Oh yes, your Gumdrop Buttons"

-

The style is there for these buttons, but the positioning for layout is custom for this site, so some tweaking is obviously needed to suit the needs of your layouts.

-
- -
-

Button Style

-

- Hey look, a button. - Hover. *avoids phone eye contact* - Press me. - eh? EH? nice. -

-
- -
- -
- - -{% endblock %} diff --git a/apps/mozorg/urls.py b/apps/mozorg/urls.py index 734796f309..92488f841b 100644 --- a/apps/mozorg/urls.py +++ b/apps/mozorg/urls.py @@ -1,12 +1,12 @@ from django.conf.urls.defaults import * -from views import contribute, channel, button, new, styleguide, geolocation +from views import contribute, channel, button, new, sandstone, geolocation urlpatterns = patterns('', (r'^button/', button), (r'^channel/', channel), (r'^contribute/', contribute), (r'^new/', new), - (r'^styleguide/', styleguide), + (r'^sandstone/', sandstone), (r'^firefox/geolocation/', geolocation) ) diff --git a/apps/mozorg/views.py b/apps/mozorg/views.py index 478e7e49f4..42891c8ad1 100644 --- a/apps/mozorg/views.py +++ b/apps/mozorg/views.py @@ -21,8 +21,8 @@ def button(request): def new(request): return l10n_utils.render(request, "mozorg/new.html") -def styleguide(request): - return l10n_utils.render(request, "mozorg/styleguide.html") +def sandstone(request): + return l10n_utils.render(request, "mozorg/sandstone.html") def geolocation(request): return l10n_utils.render(request, "mozorg/geolocation.html", diff --git a/media/css/contribute.less b/media/css/contribute.less index a7b6fa6051..538ff31483 100644 --- a/media/css/contribute.less +++ b/media/css/contribute.less @@ -29,8 +29,7 @@ } #welcome p { - .open-sans; - font-weight: 300; + .open-sans-light; font-size: 22px; line-height: 120%; margin: @baseLine; diff --git a/media/css/marketplace.less b/media/css/marketplace.less index fe3666b2ad..4d59783255 100644 --- a/media/css/marketplace.less +++ b/media/css/marketplace.less @@ -8,7 +8,7 @@ hgroup { h1 { font-size: 62px; - margin-bottom: @baseLine / 3; + margin-bottom: @baseLine / 3; } h2 { diff --git a/media/css/persona.less b/media/css/persona.less index 30bdfeb581..c2516ad94f 100644 --- a/media/css/persona.less +++ b/media/css/persona.less @@ -30,8 +30,7 @@ p { margin: 0; - .open-sans; - font-weight: 300; + .open-sans-light; } } diff --git a/media/css/sandstone-guide.less b/media/css/sandstone-guide.less new file mode 100644 index 0000000000..4a4a586036 --- /dev/null +++ b/media/css/sandstone-guide.less @@ -0,0 +1,16 @@ +@import "sandstone/sandstone.less"; + +section.container { + border-bottom: 1px dotted @borderColor; + padding-bottom: @baseLine * 2; + margin-bottom: @baseLine * 2; +} + +section.container:last-child { + border-bottom: 0; +} + +#template-downloads li { + list-style-type: none; + margin: 0 0 @baseLine / 3 0; +} diff --git a/media/css/sandstone/buttons.less b/media/css/sandstone/buttons.less index 33984b7cfd..62aedd118c 100644 --- a/media/css/sandstone/buttons.less +++ b/media/css/sandstone/buttons.less @@ -62,3 +62,12 @@ } } +.button, +.button-blue, +.button-white { + + small { + display: block; + } + +} diff --git a/media/css/sandstone/sandstone.less b/media/css/sandstone/sandstone.less index 25c8f1004d..8b68a53d97 100644 --- a/media/css/sandstone/sandstone.less +++ b/media/css/sandstone/sandstone.less @@ -35,16 +35,16 @@ a { } h1, h2, h3, h4, h5, h6, .huge, .large { - .open-sans; + .open-sans-light; display: block; - font-weight: 300; margin: 0 0 12px 0; line-height: 100%; text-shadow: 0px 1px 0px rgba(255,255,255,0.75); color: @textColorSecondary; } -.huge { +.huge, +.huge h1 { font-size: 108px; letter-spacing: -4px; line-height: 100%; @@ -111,8 +111,7 @@ li { } dl dt { - .open-sans; - font-weight: 300; + .open-sans-light; font-size: 32px; line-height: 100%; letter-spacing: -1px; @@ -123,6 +122,10 @@ dl dd { margin-bottom: @baseLine * 2; } +.center { + text-align: center; +} + /* }}} */ /* {{{ forms */ @@ -271,10 +274,10 @@ input[type=text]:focus { nav.menu-bar { line-height: @baseLine * 3; text-align: center; - .open-sans; - font-weight: 300; + .open-sans-light; margin-bottom: @baseLine * 2; - padding: 0; + padding-top: 0; + padding-bottom: 0; ul { margin: 0; @@ -289,7 +292,7 @@ nav.menu-bar { border-left: 0; } } - } + } } /* }}} */ @@ -298,9 +301,8 @@ nav.menu-bar { .sidebar { nav { - .open-sans; + .open-sans-light; font-size: 16px; - font-weight: 300; color: @textColorSecondary; li { diff --git a/media/css/sandstone/variables.less b/media/css/sandstone/variables.less index 1953593a69..b07814a8b2 100644 --- a/media/css/sandstone/variables.less +++ b/media/css/sandstone/variables.less @@ -35,6 +35,11 @@ font-family: 'Open Sans', sans-serif; } +.open-sans-light { + font-family: 'Open Sans', sans-serif; + font-weight: 300; +} + .clearfix { zoom: 1; &:after { diff --git a/settings/base.py b/settings/base.py index a097838daf..3bd0957c0e 100644 --- a/settings/base.py +++ b/settings/base.py @@ -79,9 +79,8 @@ MINIFY_BUNDLES = { 'persona': ( 'css/persona.less', ), - 'styleguide': ( - 'css/sandstone/sandstone.less', - 'css/sandstone/styleguide.less', + 'sandstone-guide': ( + 'css/sandstone-guide.less', ), 'video': ( 'css/sandstone/video.less',