We need a style guide to promote good design of page content. This will be useful for static pages like http://drumm-laptop/drupal_styleguide/prototype/about.html which are design-heavy. The right tags for headings and typography should be documented, and the tags for using grid layout.

Comments

finkatronic’s picture

Project: Drupal.org infrastructure » Drupal.org Redesign
Component: Drupal.org theme » Documentation
Issue tags: -drupal.org redesign

Moving to the Redesign project. Check to see who has been assigned to implement this section and the staging server it'll live on during implementation here: http://groups.drupal.org/node/37064

lisarex’s picture

Issue tags: +drupal.org redesign

Mark Boulton has also created a visual language guide, with sections on typography and grid. There are also downloadable templates. That said, it might be good for the theme maintainers to expand on this, because I don't see anything about when to use an H2 tags.

https://infrastructure.drupal.org/drupal.org-style-guide/brand.html

drumm’s picture

Status: Active » Closed (works as designed)
arianek’s picture

Project: Drupal.org Redesign » Documentation
Component: Documentation » New documentation
Status: Closed (works as designed) » Active

was talking with drumm about this on IRC - mental note, http://drupal.org/tour-redesigned-drupal-org and http://drupal.org/node/895232 are good ones to follow for markup for div usage.

seeming like this would be a good thing to tackle at some point... sooner than later (reopening and moving to docs queue)

drumm’s picture

Project: Documentation » Drupal.org Redesign
Component: New documentation » Documentation
Status: Active » Closed (works as designed)
drumm’s picture

Project: Drupal.org Redesign » Documentation
Component: Documentation » New documentation
Status: Closed (works as designed) » Active

I fail at commenting.

silverwing’s picture

re #5 clearing - I did ask about this #947972: proper way to clear both

lisarex’s picture

It also plays into this... #947638: Convert MBD Visual Language style guide to docs nodes on d.o.

Can the Docs style guide be part of the overall d.o. style guide? (q for docs team!)

arianek’s picture

heads up on this as well: #936382: Align Handbook Styleguide with UI Best practices

my problem here (which came out when talking to you and drumm about this a bit before) is that there are things that the MBD guide that are deviations from the very long standing docs styleguide (for instance the sentence case that has been used all over for docs/handbook, and holy crap do we need to update every heading and title now???)

so my question then is - what do we do where the MBD guide diverges from the docs standards? it's going to be an enormous task to try and change all of the handbook pages to conform.

that said, i would love for the styleguide (and the UI best practices as much as possible) to *all* be consistent. i love me some uniformity of formatting, yo.

drumm’s picture

This should live next to the Docs style guide for now, it is a decent place.

arianek’s picture

re: #10 - i believe it should be a subpage of http://drupal.org/node/700542 (not of the Handbook style guide page).

silverwing’s picture

Found this issue in the Webmaster's Queue #317657: Standardized CSS for handbook pages

lisarex’s picture

I know that many folks have seen this issue already but linking it here for completeness: #953560: Usage of title case on drupal.org, as specified in the Redesign Style guide
(summary: keep sentence case except in pre-designated places; this will be clarified in the d.o. style guide)

Neil, Ariane, this will be one of things to discuss at the Docs sprint I'm sure (less than a month away, yay!)

arianek’s picture

Ah, cool thanks for that note Lisa. Also yes, wooooo!!!

drumm’s picture

This is as far as I got

General HTML - http://drupal.org/filter/tips#filter-filter-2 [no need to write up how to use HTML]
Images - http://drupal.org/node/762

Column layout & clearing

<div class="clear-block">
  <div class="grid-4 alpha">
    …
  </div>
  <div class="grid-4 omega">
    …
  </div>
</div>
[Some filler text]
[Some filler text]

[Maybe some examples of other column arrangements, can do anything that ads up to 8. Class alpha on the first, omega on the last.]

arianek’s picture

Component: New documentation » Correction/Clarification
Issue tags: +style guide

tags

eliza411’s picture

I asked in IRC today what CSS class I should use if I wanted to display a block with text about recent updates to Project Git Instructions. drumm asked me to post what I finally chose, which was the meta class. This info about update status seemed parallel to the docs information about Needs updating, Deprecated, etc.

Since it won't always be visible, here's a screen cap of it: http://awesomescreenshot.com/0539nnr2e

jhodgdon’s picture

Component: Correction/Clarification » Policies and Procedures
Issue summary: View changes
sallybaker’s picture

Status: Active » Closed (outdated)

The standards, guidelines, and policies for documentation are now being maintained by the Documentation Working Group (DocWG).