Style Guide

Some error here (added by controller)

Here are the various elements that we use on our pages. This is meant to be the place where all the components we use are documented: their appearance, their HTML structure, how to use them. Individual pages should have very little page-specific styling. For consistency, use these first, and think carefully before trying to do something that only one page will use.

Headers / Panels

h3. We welcome you

Platitudes are cheap. We've all heard services say they're committed to "diversity" and "tolerance" without ever getting specific, so here's our stance on it:

We welcome people of any gender identity or expression, race, ethnicity, size, nationality, sexual orientation, ability level, neurotype, religion, elder status, family structure, culture, subculture, political opinion, identity, and self-identification. We welcome activists, artists, bloggers, crafters, dilettantes, musicians, photographers, readers, writers, ordinary people, extraordinary people, and everyone in between. We welcome people who want to change the world, people who want to keep in touch with friends, people who want to make great art, and people who just need a break after work. We welcome fans, geeks, nerds, and pixel-stained technopeasant wretches. We welcome you no matter if the Internet was a household word by the time you started secondary school or whether you were already retired by the time the World Wide Web was invented.

h4. We get excited about creativity

— from pro to amateur, from novels to haiku, from the photographer who's been doing this for decades to the person who just picked up a sketchbook last week.

h5. We support maximum freedom of creative expression

We support maximum freedom of creative expression within the few restrictions we need to keep the service viable for other users.

h6. We're serious about knowing and protecting your rights

With servers in the US we're obliged to follow US laws, but we're serious about knowing and protecting your rights when it comes to free expression and privacy.

h5. We will never put a limit on your creativity

We will never put a limit on your creativity just because it makes someone uncomfortable — even if that someone is us.

h4. We think accessibility for people with disabilities is a priority

We think accessibility for people with disabilities is a priority, not an afterthought. We think neurodiversity is a feature, not a bug. We believe in being inclusive, welcoming, and supportive of anyone who comes to us with good faith and the desire to build a community.

h4. We think our community is important

We think our technical and business experience is important, but we think our community experience is more important. We know what goes wrong when companies say one thing and do another, or when they refuse to say anything at all. We believe that keeping our operations transparent is just as important as keeping our servers stable.

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

It's a little ostentatious, but useful for important content.

Just another panel.

Etc etc etc.

Forms

Fieldset
Some error here (added by controller)
.com

code

[%- form.textbox( label = "Input Label"
    placeholder = "large-12.columns"
  )
  form.select( label = "Select Dropdown"
    placeholder = "large-12.columns"
    items = [ {
        optgroup = "foo bar baz"
        items = [ { text = "foo", value = "" }, { text = "bar", value = "" }, { text = "baz", value = "" }, ]
    } ]
  )
  form.textarea( label = "Textarea Label"
    placeholder = "small-12.columns"
  )
  # see DW::Template::Plugin::FormHTML for more -%]
Buttons


Icon-only Buttons

code

[%- INCLUDE "components/icon-button.tt"
  button = {
    class = "[secondary][etc-button-class]"
    id = ""
  }
  icon = "arrow-right"
  text = "Next" -%]
Buttons with Decorative Icons

code

[%- INCLUDE "components/icon-button-decorative.tt"
    button = {
      class = "[secondary][etc-button-class]"
      id = ""
    }
    icon = "arrow-right"
    text = "Next" -%]
Links with Decorative Icons
Close | Previous | Next

code

[%- INCLUDE "components/icon-link-decorative.tt"
      link = {
        url = "$site.root/etc"
        newwindow = 1
      }
      icon = "arrow-right"
      text = "Next" -%]

Select All Tables

Select All
apples
bananas
cheese and eggs and ham
breakfast

code

[%- dw.need_res( { group => "foundation" },
      "js/components/jquery.select-all.js"
      "stc/css/components/select-all.css"
); -%]

Pagination

code

[%- INCLUDE components/pagination.tt
    current => 2,
    total_pages => 12, -%]

Queue

A list of items for someone to take action on.

code

[%- dw.need_res( { group => "foundation" },
      "stc/css/components/queues.css"
  ); -%]

Sub Nav

Filter:
All
Active
Pending
Suspended

code

[%- INCLUDE components/filter.tt
    links => [
      { "text" => ".filter.all", "url" => "#", "active" => 1 },
      { "text" => ".filter.active", "url" => "#" },
      { "text" => ".filter.pending", "url" => "#" },
      { "text" => ".filter.suspended", "url" => "#" },
    ] -%]

Collapsible Sections

Foo

foo foo foo fooooo

Bar

bar bar barrrr

Baz

baz baz bzzt

code

[%- dw.need_res( { group => "foundation" },
        "js/components/jquery.collapse.js"
        "stc/css/components/collapse.css"
        "stc/css/components/foundation-icons.css"
  ) -%]

code

[%- <script>jQuery(document).ready(function($) {
        $("body").collapse();
  });</script> -%]

Fancy Select

code

[%- name = "foo"
    label = "Foo:"

    items = [
      { label = "plain"
        value = "plain"
        format = "a plain option"
      }
      { label = "image"
        value = "image"
        format = "with image prefix"
        image = {
          src = "/silk/site/tick.png"
          width = 16
          height = 16
        }
      }
      { label = "user"
        value = "user"
        format = "contains a @user"
      }
      {
        label = "comm"
        value = "comm"
        format = "contains a @c:comm"
      }
    ]
  -%] -%]

code

[%- <script>jQuery(document).ready(function($) {
        $("body").fancySelect();
  });</script> -%]

Authas

code

[%- # variable from controller()
    authas_form -%]

Alert Boxes

This is a standard alert (div.alert-box). ×
This is a success alert (div.alert-box.success). ×
This is an alert (div.alert-box.alert). ×
This is a secondary alert (div.alert-box.secondary). ×

Top Bar