CSM WordPress Theme V0.4 – Button Classes and SCSS Tidy Up

Posted in: Code on January 19th, 2015

Today I wanted to add some utility classes for buttons and continue to improve the SCSS organization and file structure. The theme was originally designed in CSS so over the past few updates, I have switched to SCSS and have been trying to improve the overall SCSS structure. This release starts splitting CSS into different files, and uses csm.scss to @import and compile everything into one minified css file (csm.css). There is still a lot of refactoring to go, but this is a good start!

View v0.4 on Github | Download Zip File of v0.4

Changes in v0.4

– Mostly behind the scenes changes that involve refactoring SCSS.

– Added some utility classes for colors and buttons.

– Fixed some minor issues with image alignment (added some more margin) and footer overlaps (cleared floats).

SCSS Button Classes

To create these button classes, I took the pretty blue button I put together for my Resume and created a mixin that covers the main button CSS.

1
2
3
4
5
6
@mixin button ($button-color) {
    background-color: $button-color;
    box-shadow: 0px 2px 0px 0px lighten($button-color, 10);
    border: 1px $button-color solid;
    color: lighten($button-color, 40);
}
@mixin button ($button-color) {
    background-color: $button-color;
    box-shadow: 0px 2px 0px 0px lighten($button-color, 10);
    border: 1px $button-color solid;
    color: lighten($button-color, 40);
}

Then I played around in Adobe Kuler to select a range of colors that seem to work together nicely, and created a variable for each color. I had also defined a bunch of grays that were already being used for fonts and backgrounds in the theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Utility Colors
$blue-color:            #36ACDB !default;
$red-color:             #DB3A37 !default;  
$green-color:           #2EC85F !default;
$orange-color:          #EF9927 !default; 
$pink-color:            #E14E6A !default;
 
// Greys that I had defined earlier.
$white-color:           #ffffff !default;
$black-color:           #000 !default;
$gray-darker:           lighten($black-color, 8) !default;    // #141414
$gray-dark:             lighten($black-color, 20) !default;   // #333
$gray:                  lighten($black-color, 33.5) !default; // #555
$gray-light:            lighten($black-color, 46.7) !default; // #777
$gray-lighter:          lighten($black-color, 85.5) !default; // #d9d9d9
// Utility Colors
$blue-color:            #36ACDB !default;
$red-color:             #DB3A37 !default;  
$green-color:           #2EC85F !default;
$orange-color:          #EF9927 !default; 
$pink-color:            #E14E6A !default;

// Greys that I had defined earlier.
$white-color:           #ffffff !default;
$black-color:           #000 !default;
$gray-darker:           lighten($black-color, 8) !default;    // #141414
$gray-dark:             lighten($black-color, 20) !default;   // #333
$gray:                  lighten($black-color, 33.5) !default; // #555
$gray-light:            lighten($black-color, 46.7) !default; // #777
$gray-lighter:          lighten($black-color, 85.5) !default; // #d9d9d9

Finally, I built out the different colored buttons using the mixin and variables, and also created two size modifying classes (small and medium).

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
56
57
58
59
// Buttons
.btn{
    margin: 10px;
    padding: 14px 26px;
    font-size: 20px;
    font-weight: 100;
    line-height: 100%;
    display:inline-block;
    cursor: pointer;
    border-radius: 3px;
    outline: 0 none;
    text-decoration: none;
 
    &.btn-dark-gray {
        @include button($gray);
    }
 
    &.btn-light-gray {
        @include button($gray-lighter);
    }
 
    &.btn-blue {
        @include button($blue-color);
    }
 
    &.btn-red {
        @include button($red-color);
    }
 
    &.btn-green {
        @include button($green-color);
    }
 
    &.btn-orange {
        @include button($orange-color);
    }
 
    &.btn-pink {
        @include button($pink-color);
    }
 
    &.btn-hollow {
        background: none;
        color: $white-color;
        border: 1px $white-color solid;
    }   
 
    &.btn-small{
        padding: 10px !important;
        font-size: 0.75rem !important;
        box-shadow: none !important;
    }
 
    &.btn-medium{
        padding: 13px !important;
        font-size: 1.3rem !important;
        box-shadow: none !important;
    }
}
// Buttons
.btn{
    margin: 10px;
    padding: 14px 26px;
    font-size: 20px;
    font-weight: 100;
    line-height: 100%;
    display:inline-block;
    cursor: pointer;
    border-radius: 3px;
    outline: 0 none;
    text-decoration: none;

    &.btn-dark-gray {
        @include button($gray);
    }

    &.btn-light-gray {
        @include button($gray-lighter);
    }

    &.btn-blue {
        @include button($blue-color);
    }

    &.btn-red {
        @include button($red-color);
    }

    &.btn-green {
        @include button($green-color);
    }

    &.btn-orange {
        @include button($orange-color);
    }

    &.btn-pink {
        @include button($pink-color);
    }

    &.btn-hollow {
        background: none;
        color: $white-color;
        border: 1px $white-color solid;
    }   

    &.btn-small{
        padding: 10px !important;
        font-size: 0.75rem !important;
        box-shadow: none !important;
    }

    &.btn-medium{
        padding: 13px !important;
        font-size: 1.3rem !important;
        box-shadow: none !important;
    }
}

Here are the results…

Screenshot of the SCSS buttons in default size.
Screenshot of the SCSS buttons in default size.
Share This:
Tagged:  

Leave a Reply