Skip to content

CSS Styleguide

1.1

Use the standard, but classy, .button for form actions and primary page actions. These are used extensively around the site.

  • :hover - Buttons love hover states.
  • :active - Buttons love active states.
  • :disabled - For when you shouldn't be able to click on it.
  • .disabled - Same as the disabled pseudo-class.
  • .primary - For the main form action, use whenever creating something.
  • .primary:hover - Hover state fo primary buttons.
  • .primary:active - A brief moment of polish when the button is pressed.
  • .primary:disabled - Even primary buttons have a down state.
  • .primary.disabled - Same as the disabled pseudo-class.
  • .danger - For potentially bad or destructive actions.
  • .danger:hover - Hover state for danger buttons.
  • .danger:active - Depressed danger button.
  • .danger:disabled - Disabled danger button.
  • .danger.disabled - Same as the disabled pseudo-class.
  • .blue - Actions related to merges.
  • .blue:hover - Hover state for merge buttons.
  • .blue:active - Depressed blue button.
  • .blue:disabled - Disabled blue button.
  • .blue.disabled - Same as the disabled pseudo-class.
  • .dark-grey - Alternate button.
  • .dark-grey:hover - Hover state for alternate buttons.
  • .dark-grey:active - Depressed alternate button.
  • .dark-grey:disabled - Disabled alternate button.
  • .dark-grey.disabled - Same as the disabled pseudo-class.
Button (a.button)
:hover Button (a.button)
:active Button (a.button)
:disabled Button (a.button)
.disabled Button (a.button)
.primary Button (a.button)
.primary:hover Button (a.button)
.primary:active Button (a.button)
.primary:disabled Button (a.button)
.primary.disabled Button (a.button)
.danger Button (a.button)
.danger:hover Button (a.button)
.danger:active Button (a.button)
.danger:disabled Button (a.button)
.danger.disabled Button (a.button)
.blue Button (a.button)
.blue:hover Button (a.button)
.blue:active Button (a.button)
.blue:disabled Button (a.button)
.blue.disabled Button (a.button)
.dark-grey Button (a.button)
.dark-grey:hover Button (a.button)
.dark-grey:active Button (a.button)
.dark-grey:disabled Button (a.button)
.dark-grey.disabled Button (a.button)
    <button class="button">Button (button.button)</button>
    <a href="#" class="button">Button (a.button)</a>

1.2

Minibuttons are our general action-style buttons. Generally they link to a new page, popup, or activate some piece of the page. They are usually not used to submit forms. Also see the minibutton rails helper.

  • :hover - The hover state.
  • :active - The active state.
  • .selected - A permenantly depressed minibutton, useful for toggles.
  • :disabled - A disabled button.
  • .disabled - Same as pseudo class.
  • .primary - For the main form action, use whenever creating something.
  • .primary:hover - Hover state fo primary buttons.
  • .primary:active - A brief moment of polish when the button is pressed.
  • .danger - This button might do something bad.
  • .danger:hover - This button might do something bad.
  • .danger:active - A depressed danger button.
  • .blue - A nice blue button, for places like merge button confirm box.
  • .dark-grey - A dark grey button for places like the delete branch (w/ unmerged commits) box.
:hover Default
:active Default
.selected Default
:disabled Default
.disabled Default
.primary Default
.primary:hover Default
.primary:active Default
.danger Default
.danger:hover Default
.danger:active Default
.blue Default
.dark-grey Default
    <a href="#" class="button minibutton ">Default</a>

1.2.1

Minibuttons with an icon.

  • .octicon-tools - Admin.
  • .octicon-eye-watch - Watch.
  • .octicon-star - Star.
  • .octicon-cloud-download - Download.
  • .octicon-pencil - Edit.
  • .octicon-person-follow - Follow.
  • .octicon-person-remove - Unfollow.
  • .octicon-git-pull-request - Pull Request.
  • .octicon-git-branch - Fork.
  • .octicon-log-out - Leave.
  • .octicon-diff - To the compare view!
  • .octicon-mail-reply - Reply.
  • .octicon-arrow-left - Back.
  • .octicon-arrow-right - Forward.
  • .octicon-device-desktop - Microsoft.
  • .octicon-device-desktop - Mac.
.octicon-tools Iconed
.octicon-eye-watch Iconed
.octicon-star Iconed
.octicon-cloud-download Iconed
.octicon-pencil Iconed
.octicon-person-follow Iconed
.octicon-person-remove Iconed
.octicon-git-pull-request Iconed
.octicon-git-branch Iconed
.octicon-log-out Iconed
.octicon-diff Iconed
.octicon-mail-reply Iconed
.octicon-arrow-left Iconed
.octicon-arrow-right Iconed
.octicon-device-desktop Iconed
.octicon-device-desktop Iconed
    <a href="#" class="button minibutton "><span class="octicon "></span>Iconed</a>

1.2.4

Use .hidden-text-expander to indicate and expand hidden text.

  • .inline - button will display inline rather than block
.inline
    <span class="hidden-text-expander"><a href="#"></a></span>

1.2.5

A container that is used for social bubbles counts.

  • .social-count - social count bubble number
.social-count Watch
    <a href="#" class="minibutton with-count"><span class="octicon octicon-eye-watch"></span>Watch</a><a class="social-count" href="#">6</a>

1.4

A button group is a series of buttons laid out next to each other, all part of one visual button, but separated by rules to be separate. Inside each group are either .buttons or .minibuttons as immediate children. No extra markup is required, and they work with any button modifier class.

  <p>
    <div class="button-group">
      <button type="button" class="minibutton">Raw</button>
      <button type="button" class="minibutton">Normal</button>
      <button type="button" class="minibutton">History</button>
    </div>
  </p>
  <p>
    <div class="button-group">
      <button type="button" class="minibutton">Raw</button>
      <button type="button" class="minibutton">Normal</button>
      <button type="button" class="minibutton">History</button>
    </div>
    <button type="button" class="minibutton">Blame</button>
  </p>

  <p>
    <div class="button-group">
      <button type="button" class="minibutton primary">Raw</button>
      <button type="button" class="minibutton primary">Normal</button>
      <button type="button" class="minibutton primary">History</button>
    </div>
  </p>
  <p>
    <div class="button-group">
      <button type="button" class="minibutton primary">Raw</button>
      <button type="button" class="minibutton primary">Normal</button>
      <button type="button" class="minibutton primary">History</button>
    </div>
    <button type="button" class="minibutton primary">Blame</button>
  </p>

1.5

Buttons backed by radio or checkbox control.

  <p>
    <div class="button-group">
      <label class="button">
        <input type="radio" name="styleguide_state" class="labeled-button hidden" checked>
        Open
      </label>
      <label class="button">
        <input type="radio" name="styleguide_state" class="labeled-button hidden">
        Closed
      </label>
    </div>
  </p>
  <p>
    <div class="button-group">
      <label class="minibutton">
        <input type="checkbox" name="styleguide_label" class="labeled-button hidden" checked>
        Bug
      </label>
      <label class="minibutton">
        <input type="checkbox" name="styleguide_label" class="labeled-button hidden">
        Feature
      </label>
      <label class="minibutton">
        <input type="checkbox" name="styleguide_label" class="labeled-button hidden">
        Idea
      </label>
    </div>
  </p>

Something went wrong with that request. Please try again.