Style Guide
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
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
Queue
A list of items for someone to take action on.
code
[%- dw.need_res( { group => "foundation" },
"stc/css/components/queues.css"
); -%]
Sub Nav
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
Bar
Baz
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 -%]