StyleGuide

A tool to facilitate the development and design of the default theme for phpBB utilizing Style Guide Driven Development

1.1 Colors

Color Scheme Reference

Grayscale
  • 10%#1A1A1A

  • 20%#333333

  • 30%#4D4D4D

  • 40%#666666

  • 50%#888888

  • 60%#999999

  • 70%#B3B3B3

  • 80%#CCCCCC

  • 87%#DEDEDE

  • 90%#E5E5E5

  • 95%#F2F2F2

Primary
  • -#0F538A

  • Alt#47A1EB

  • Accent#0D4573

  • Hover#E8305E

Secondary
  • -#709DC2

  • Alt#DBE7F0

  • Accent#C9DAE8

UI
  • -#DEDEDE

  • Alt#B3B3B3

States BG
  • Info#31708f

  • Danger#a94442

  • Warning#8a6d3b

  • Success#3c763d

States
  • Info#d9edf7

  • Danger#f2dede

  • Warning#fcf8e3

  • Success#dff0d8

Gradients
  • Primary#146EBB - #47A1EB

  • Secondary#C9DAE8 - #DBE7F0

  • Gray#E5E5E5 - #FFFFFF

  • Accent#B5C4D1 - #C9DAE8

Gradients Reversed
  • Primary#47A1EB - #146EBB

  • Secondary#DBE7F0 - #C9DAE8

  • Gray#FFFFFF - #E5E5E5

  • Accent#C9DAE8 - #B5C4D1

Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00

1.2 Fonts

Font Reference

Primary Helvetica Neue
  • Aa

    REGULAR

  • Aa

    MEDIUM

  • Aa

    SEMIBOLD

  • Aa

    BOLD

Buttons Open Sans
  • Aa

    REGULAR

  • Aa

    MEDIUM

  • Aa

    SEMIBOLD

  • Aa

    BOLD

Code Monaco
  • Aa

    REGULAR

  • Aa

    MEDIUM

  • Aa

    SEMIBOLD

  • Aa

    BOLD

Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00

1.3 Type

Common Typography

.giga 80px

Lorem ipsum dolor sit amet.

.mega 60px

Lorem ipsum dolor sit amet.

.kilo 48px

Lorem ipsum dolor sit amet.

.alpha 32px

Lorem ipsum dolor sit amet.

.beta 24px

Lorem ipsum dolor sit amet.

.gamma 20px

Lorem ipsum dolor sit amet.

.delta 18px

Lorem ipsum dolor sit amet.

.epsilon 16px

Lorem ipsum dolor sit amet.

.zeta 14px

Lorem ipsum dolor sit amet.

.milli 12px

Lorem ipsum dolor sit amet.

.micro 10px

Lorem ipsum dolor sit amet.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Address
Company, Inc.
789 Main Ave, Suite 707
San Francisco, CA 12345
P: (123) 456-7890
Full Name
first.last@example.com
Abbreviation

HTML is the standard markup language used to create web pages.

Mark

You can use the mark tag to highlighttext.

Delete

This line of text is meant to be treated as deleted text.

Strike

This line of text is meant to be treated as no longer accurate.

Insert

This line of text is meant to be treated as an addition to the document.

Underline

This line of text will render as underlined

Small

This line of text is meant to be treated as fine print.

Strong

rendered as bold text

Emphasized

rendered as italicized text

Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00

1.4 Lists

Common styles for list elements

UL
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
UL Unstyled
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
UL Inline
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
OL
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
DL
Lorem ipsum dolor sit amet.
Dicta optio cumque dolore hic ea facilis
Minus, possimus, veniam, incidunt eligendi
Quidem laborum cum harum ullam iure sit eum
DL Inline
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00

1.5 Forms

Common styles for form elements

Normal

Example block-level help text here.

<form class="form" role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="form-note">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="button">Submit</button>
</form>
            
Inline
<form class="form-inline" role="form">
    <div class="form-group">
        <div class="form-control-group">
            <div class="form-control-group-addon"><i class="fa fa-at"></i></div>
                <input class="form-control" type="email" placeholder="Enter email">
            </div>
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Remember me
            </label>
        </div>
    <button type="submit" class="button">Sign in</button>
</form>
            
Horizontal
Supported Controls
Textarea
Select

Checkbox & Radio
<form class="form" action="">
    <div class="checkbox form-highlight">
        <label>
            <input type="checkbox"> <em>A far more important option</em>
            <span class="form-note">It will surely do something magical.</span>
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio"> Available for hire
            <span class="form-note">This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!</span>
        </label>
    </div>
</form>
            
Input Group
<form class="form" action="">
    <div class="form-control-group">
        <input class="form-control" type="text" placeholder="Username">
        <span class="form-control-group-button">
            <button class="button">
                <i class="fa fa-search"></i> <span class="sr-only">GO</span>
            </button>
        </span>
    </div>
</form>
            
Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00

1.6 Tables

Common styles for table elements

Normal

Table

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor

:hover

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor
Bordered

Table

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor

:hover

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor
Striped

Table

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor

:hover

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor
Condensed

Table

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor

:hover

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor
Kitchen Sink

Table

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor

:hover

# First Name Last Name Username
1 John Smith @jSmith
2 George Washington @gWash
3 Larry Bird @Condor
Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00

1.7 Code

Common styles for code elements

Inline Code
For example, <section> should be wrapped as inline.
User Input
To switch directories, type cd followed by the name of the directory. To edit settings, press ctrl + ,
Code Block
<p>Sample text here...</p>
Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00

2.1 Icons

Icon Reference

Button
  • NEW

  • LOCK

  • FORWARD

  • REPLY

  • CARET

  • TOOLS

Navigation
  • REGISTER

  • HOME

  • FAQ

  • NOTIFICATION

  • PM

  • LOGIN / LOGOUT

  • SEARCH

  • ADV SEARCH

  • PAGE JUMP

  • JUMP TO

  • PROFILE

  • UCP

  • MCP

  • ADMIN

Action
  • DISPLAY & SORT

  • MOD TOOLS

  • MARK

  • SUBSCRIBE

  • UNSUBSCRIBE

  • BUMP

  • BOOKMARK

  • SEND EMAIL

  • PRINT

  • DOWNLOAD

Post
  • POST MENU

  • EDIT

  • DELETE

  • INFO

  • REPORT

  • REPORTED

  • APPROVED

  • UNAPPROVED

  • WARN

  • QUOTE

  • RTL QUOTE

Footer
  • MEMBERS

  • TEAM

  • DELETE COOKIES

Directional
  • DOWN

  • UP

  • LEFT

  • RIGHT

Editor
  • BOLD

  • ITALIC

  • UNDERLINE

  • QUOTE

  • CODE

  • LIST

  • LIST=

  • LIST ITEM

  • IMAGE

  • URL

  • FONT SIZE

  • COLOR

  • STRIKE

  • GIST

  • SMILES

Other
  • ALERT CLOSE

  • TOP

  • EXPAND

  • COLLAPSE

  • PAGES

  • ATTACH

  • TOPIC DELETED

  • LATEST / NEWEST

  • SUBFORUM

  • POLL

Forums
  • FORUM

  • HAS SUBFORUMS

  • LOCKED

  • LINKED

Topics
  • TOPIC

  • HOT

  • STICKY

  • ANNOUNCEMENT

  • MOVED

Social
  • CONTACT

  • PM

  • EMAIL

  • WWW

  • JABBER

  • SKYPE

  • FEED

  • FACEBOOK

  • TWITTER

  • GOOGLE

  • YAHOO

  • YOUTUBE

  • AIM

  • ICQ

<i class="fa fa-twitter"></i>
            
Version: 1.0.0, Created: 1970-Jan-01 | 01:00:00