Skip to content

Commit f9b4cdb

Browse files
drewbarontinidrewbarontini
committed
Initial redo of v4 styling
1 parent 1e26227 commit f9b4cdb

40 files changed

+1101
-613
lines changed

‎config.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ def is_page_active(page)
1616
end
1717

1818
def is_section_active(section)
19-
current_page.url.match(section) ? {:class => 'is-section-active'} : {}
19+
current_page.url.match(section) ? {:class => 'is-active'} : {}
2020
end
2121
end
2222

‎source/assets/stylesheets/application.sass‎

Lines changed: 39 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,53 @@
1-
//-------------------------------------
2-
// Application
3-
// MVCSS v3.0.0
4-
//-------------------------------------
1+
// *************************************
2+
//
3+
// MVCSS Documentation
4+
// -> MVCSS v4.0.0-alpha
5+
//
6+
// *************************************
57
6-
// ----- Compass ----- //
8+
// -------------------------------------
9+
// Compass
10+
// -------------------------------------
711
812
@import "compass"
913
@import "compass/layout"
1014

11-
// ----- Core ----- //
15+
// -------------------------------------
16+
// Foundation
17+
// -------------------------------------
1218
13-
@import "core/reset"
14-
@import "core/settings"
15-
@import "core/helpers"
16-
@import "core/base"
17-
@import "core/content"
18-
@import "core/layout"
19+
@import "foundation/reset"
20+
@import "foundation/settings"
21+
@import "foundation/helpers"
22+
@import "foundation/utilities"
23+
@import "foundation/base"
1924

20-
//-------------------------------------
21-
// Modules
22-
//-------------------------------------
25+
// -------------------------------------
26+
// Components
27+
// -------------------------------------
2328
24-
// ----- Imports ----- //
29+
@import "components/bucket"
30+
@import "components/button"
31+
@import "components/card"
32+
@import "components/cell"
2533

26-
@import "vendor/github"
27-
28-
// ----- Button ----- //
29-
30-
%btn, .btn
31-
+transition(background 0.2s ease-in-out, box-shadow 0.2s ease-in-out)
32-
border-radius: $base-borderRadius
33-
border: 0
34-
color: #fff
35-
display: block
36-
padding: rem(5px) rem(10px)
37-
text-align: center
38-
39-
// States
40-
41-
&:active
42-
+transform(translateY(2px))
43-
44-
// Media Queries
34+
// -------------------------------------
35+
// Structures
36+
// -------------------------------------
4537
46-
+respond-to(920px)
47-
width: rem(200px)
38+
@import "structures/about"
39+
@import "structures/action"
40+
@import "structures/header"
41+
@import "structures/nav"
42+
@import "structures/sidebar"
4843

49-
// Modifiers
44+
// -------------------------------------
45+
// Vendor
46+
// -------------------------------------
5047
51-
.btn--a
52-
@extend %btn
53-
background: $base-theme-color
54-
box-shadow: 0 6px 0 darken($base-theme-color, 10%)
55-
56-
// States
57-
58-
&:hover,
59-
&:focus
60-
background: darken($base-theme-color, 5%)
61-
box-shadow: 0 6px 0 darken($base-theme-color, 15%)
62-
63-
.btn--b
64-
@extend %btn
65-
background: darken($base-background, 40%)
66-
box-shadow: 0 6px 0 darken($base-background, 50%)
67-
margin-top: rem($base-whitespace * 2)
68-
69-
// States
48+
@import "vendor/github"
7049

71-
&:hover,
72-
&:focus
73-
background: darken($base-background, 45%)
74-
box-shadow: 0 6px 0 darken($base-background, 55%)
50+
// -------------------------------------
51+
// Inbox
52+
// -------------------------------------
7553
76-
//-------------------------------------
77-
// Inbox
78-
//-------------------------------------

‎source/assets/stylesheets/components/_bucket.sass‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// *************************************
2+
//
3+
// Bucket
4+
// -> Based on:
5+
// * http://jsfiddle.net/necolas/rZvEF/
6+
//
7+
// *************************************
8+
9+
.bucket
10+
@extend .group
11+
12+
// -------------------------------------
13+
// Modifiers
14+
// -------------------------------------
15+
16+
// ----- Flag ----- //
17+
18+
.bucket--flag
19+
display: table
20+
21+
.bucket-content
22+
vertical-align: middle
23+
24+
// -------------------------------------
25+
// Submodules
26+
// -------------------------------------
27+
28+
// ----- Content ----- //
29+
30+
.bucket-content
31+
display: table-cell
32+
width: 10000px
33+
34+
// ----- Media ----- //
35+
36+
.bucket-media
37+
@extend .fl
38+
@extend .mrs
39+
> img
40+
@extend .db

‎source/assets/stylesheets/components/_button.sass‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// *************************************
2+
//
3+
// Button
4+
// -> Clickable things
5+
//
6+
// *************************************
7+
8+
.btn
9+
@extend .db
10+
@extend .ram
11+
@extend .tac
12+
@extend .tci
13+
+transition(background 0.2s ease-in-out, box-shadow 0.2s ease-in-out)
14+
border: 0
15+
line-height: 2.5
16+
padding: 0 $base-whitespace
17+
&:hover,
18+
&:focus
19+
@extend .tci
20+
&:active
21+
+transform(translateY(2px))
22+
+respond-to(920px)
23+
width: 12.5em
24+
25+
// -------------------------------------
26+
// Modifiers
27+
// -------------------------------------
28+
29+
// ----- Types ----- //
30+
31+
.btn--a
32+
background: $color-highlight
33+
box-shadow: 0 6px 0 darken($color-highlight, 10%)
34+
&:hover,
35+
&:focus
36+
background: darken($color-highlight, 5%)
37+
box-shadow: 0 6px 0 darken($color-highlight, 15%)
38+
39+
.btn--b
40+
@extend .mtl
41+
background: darken($color-background, 40%)
42+
box-shadow: 0 6px 0 darken($color-background, 50%)
43+
&:hover,
44+
&:focus
45+
background: darken($color-background, 45%)
46+
box-shadow: 0 6px 0 darken($color-background, 55%)
47+

‎source/assets/stylesheets/components/_card.sass‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// *************************************
2+
//
3+
// Card
4+
// -> Individual style containers
5+
//
6+
// *************************************
7+
8+
.card
9+
@extend .bci
10+
@extend .por
11+
@extend .ram
12+
box-shadow: 0 2px 0 rgba(#000, 0.1)

‎source/assets/stylesheets/components/_cell.sass‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// *************************************
2+
//
3+
// Cell
4+
// -> Width-limiting blocks
5+
//
6+
// *************************************
7+
8+
.cell
9+
@extend .mbm
10+
@extend .mhc
11+
@extend .mtxl
12+
@extend .por
13+
max-width: $base-maxWidth
14+
padding: 0 $base-whitespace
15+

0 commit comments

Comments
 (0)