Github Boxed Groups

1.1

Boxed group, used in settings pages and repo admin pages mostly

  • .dangerzone - LANA
  • .flush - Allow elements to stretch all the way to the sides.
  • .condensed - skinny header

Heading

Boxed groups can have markdown content if you like. Which can be nice for code blocks and such.

.dangerzone

Heading

Boxed groups can have markdown content if you like. Which can be nice for code blocks and such.

.flush

Heading

Boxed groups can have markdown content if you like. Which can be nice for code blocks and such.

.condensed

Heading

Boxed groups can have markdown content if you like. Which can be nice for code blocks and such. 

1
2
3
4
5
6
7
8
9
10
11

    <div class="boxed-group">
      <div class="boxed-group-header">
        <h3>Heading</h3>
      </div>
      <div class="boxed-group-body">
        <p>
          Boxed groups can have markdown content if you like.
          Which can be nice for <code>code blocks</code> and such.
        </p>
      </div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

    /*
    Boxed group, used in settings pages and repo admin pages mostly

    .dangerzone - LANA
    .flush      - Allow elements to stretch all the way to the sides.
    .condensed  - skinny header

    Styleguide 1.1
    */
    .boxed-group {
      position: relative;
      background: #efefef;
      padding: 3px;
      border-radius: 3px;
      margin: 0 0 15px 0;
    }

    .boxed-group-header h3 {
      background: #fafafa;
      background: -moz-linear-gradient(#fafafa, #e0e0e0);
      background: -webkit-linear-gradient(#fafafa, #e0e0e0);
      background: linear-gradient(#fafafa, #e0e0e0);
      margin: 0;
      border-top-left-radius: 1px;
      border-top-right-radius: 1px;
      border: 1px solid #d8d8d8;
      border-bottom: none;
      padding: 10px 10px 11px 10px;
      font-size: 14px;
      text-shadow: 0 1px 0 #fff;
    }

    .boxed-group-body {
      padding: 1px 10px;
      background: #fff;
      border: 1px solid #d8d8d8;
      border-top: 1px solid #ccc;
      border-bottom-left-radius: 1px;
      border-bottom-right-radius: 1px;
      color: #666;
      font-size: 13px;
    }

    .boxed-group.dangerzone {
      .boxed-group-header h3 {
        background: #f97171;
        background: -moz-linear-gradient(#f97171, #df3e3e);
        background: -webkit-linear-gradient(#f97171, #df3e3e);
        background: linear-gradient(#f97171, #df3e3e);
        border-bottom: 1px solid #900;
        color: #fff;
        text-shadow: 0 -1px 0 #900;
      }
    }


Incorrect property order for rule (11: .boxed-group)

  Correct order below:
  position: relative;
  padding: 3px;
  margin: 0 0 15px 0;
  background: #efefef;
  border-radius: 3px;

Incorrect property order for rule (19: .boxed-group-header h3)

  Correct order below:
  padding: 10px 10px 11px 10px;
  margin: 0;
  font-size: 14px;
  text-shadow: 0 1px 0 #fff;
  background: -webkit-linear-gradient(#fafafa, #e0e0e0);
  background: -moz-linear-gradient(#fafafa, #e0e0e0);
  background: linear-gradient(#fafafa, #e0e0e0);
  background: #fafafa;
  border: 1px solid #d8d8d8;
  border-bottom: none;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;

Incorrect property order for rule (34: .boxed-group-body)

  Correct order below:
  padding: 1px 10px;
  font-size: 13px;
  color: #666;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-top: 1px solid #ccc;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;

Element selectors should not be overqualified (45: .boxed-group.dangerzone)
Incorrect property order for rule (46: .boxed-group-header h3)

  Correct order below:
  color: #fff;
  text-shadow: 0 -1px 0 #900;
  background: -webkit-linear-gradient(#f97171, #df3e3e);
  background: -moz-linear-gradient(#f97171, #df3e3e);
  background: linear-gradient(#f97171, #df3e3e);
  background: #f97171;
  border-bottom: 1px solid #900;