Created
June 9, 2015 05:05
-
-
Save iamajvillalobos/0f3db9e5deb89cb94505 to your computer and use it in GitHub Desktop.
Skyline CSS Architecture - this is currently a work in progress in our application. I use sass since this is a rails app, we are extending bootstrap framework, mostly I just used the grid, and I want to able to customized more the framework. My CSS architecture is based on how bootstrap structure itself, I mostly used the _variables.scss file to…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin-top: $header-height; | |
} | |
.main-content-container { | |
@include make-lg-column(10); | |
} | |
.main-content { | |
min-height: 78vh; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.dashboard { | |
margin-top: 30px; | |
margin-bottom: 30px; | |
.tabs-menu { | |
padding-left: 0; | |
.tabs-menu-item { | |
display: table-cell; | |
width: 1%; | |
border-top: $border-tabs-blue; | |
border-right: $border-tabs-blue; | |
border-bottom: $border-tabs-blue; | |
padding: $border-tabs-padding; | |
text-align: center; | |
text-transform: uppercase; | |
&:first-child { border-left: $border-tabs-blue; } | |
&.tab-active { background: $base-blue; } | |
&.tab-active a { color: $base-white; } | |
&:hover { background: $base-gray; } | |
&.tab-active:hover { background: $base-blue; } | |
a { text-decoration: none; } | |
} | |
} | |
.tabs-menu-content { | |
border: 1px solid $base-blue; | |
margin-top: 30px; | |
@include clearfix; | |
} | |
.tabs-content-wrapper { | |
float: left; | |
width: 50%; | |
padding: 15px; | |
} | |
.tab-content { | |
overflow: hidden; | |
border: $border-tabs-blue; | |
border-width: 3px; | |
background: $base-white; | |
border-top-left-radius: 6px; | |
border-bottom-right-radius: 6px; | |
cursor: pointer; | |
.tab-title { | |
color: $base-blue; | |
font-size: $font-size-h4; | |
text-align: center; | |
@include clearfix; | |
text-transform: uppercase; | |
font-weight: $font-bold; | |
} | |
.stats-title, | |
.stats-value { | |
color: $base-blue; | |
font-size: $font-size-h6; | |
text-transform: uppercase; | |
font-weight: $font-bold; | |
} | |
.stats-container { | |
float: left; | |
width: 33.33%; | |
text-align: center; | |
} | |
&.tab-content-inactive { | |
border: 3px solid $base-blue-light; | |
> .tab-title { | |
color: $base-blue-light; | |
} | |
.stats-title, | |
.stats-value { | |
color: $base-blue-light; | |
} | |
} | |
} | |
.tabs-content-stages-wrapper { | |
padding: 0px 15px; | |
overflow: hidden; | |
} | |
.tabs-content-stages { | |
float: left; | |
width: 33.333333%; | |
.stage-title { | |
border-top: 3px solid $base-blue; | |
border-right: 3px solid $base-blue; | |
border-bottom: 3px solid $base-blue; | |
font-size: $font-size-h4; | |
color: $base-blue; | |
text-transform: uppercase; | |
text-align: center; | |
padding: 5px; | |
margin-top: 0; | |
} | |
&:first-child > .stage-title { | |
border-left: 3px solid $base-blue; | |
} | |
.stage-stats { | |
background: $base-gray; | |
margin:10px; | |
padding: 10px; | |
font-size: $font-size-h6; | |
} | |
.stage-stats-count { | |
@extend .pull-right; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
header { | |
padding: 20px 0; | |
border-bottom: 3px solid #009B87; | |
@extend .navbar; | |
@extend .navbar-default; | |
@extend .navbar-fixed-top; | |
} | |
.header-container { | |
@extend .container; | |
} | |
.header-container--contents { | |
@include make-row; | |
.contents-logo { | |
@include make-lg-column(3); | |
@include make-md-column(3); | |
@include make-sm-column(3); | |
img { | |
width: 100%; | |
} | |
} | |
.contents-links { | |
@include make-lg-column(9); | |
@include make-md-column(9); | |
@include make-sm-column(9); | |
.contents-nav { | |
@extend .nav; | |
@extend .navbar-nav; | |
@extend .navbar-right; | |
.contents-nav-item { | |
@extend .text-center; | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@media (max-width: 1024px) { | |
.nav-menu-item { | |
display: table-cell; | |
width: 1%; | |
border-top: $border-tabs-blue !important; | |
border-left: none !important; | |
border-right: $border-tabs-blue !important; | |
border-bottom: $border-tabs-blue !important; | |
&:first-child { | |
border-left: $border-tabs-blue !important; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.icon-24 { | |
font-size: 24px; | |
} | |
.icon-36 { | |
font-size: 36px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Colors | |
$base-blue: #0068A0; | |
$base-gray: #F6F6F6; | |
$base-white: #FEFFFF; | |
$base-green: #009B87; | |
$base-black: #02174A; | |
$base-blue-light: #4097D3; | |
// Scaffolding | |
$body-bg: $base-white; | |
$text-color: $base-black; | |
$link-color: $base-blue; | |
// Typography | |
$font-family-sans-serif: "Source Sans Pro", Helvetica, Arial, sans-serif; | |
$font-size-base: 16px; | |
// font scale using 3:4 proportion | |
$font-size-h1: 67px; | |
$font-size-h2: 50px; | |
$font-size-h3: 37px; | |
$font-size-h4: 28px; | |
$font-size-h5: 21px; | |
$font-size-h6: 16px; // same as $font-size-base | |
$font-normal: 400; | |
$font-bold: 700; | |
$font-semi-bold: 600; | |
// Navbar | |
$navbar-default-color: $base-black; | |
$navbar-default-bg: $base-white; | |
$navbar-default-link-color: $base-blue; | |
$navbar-default-link-active-color: $base-black; | |
$navbar-default-link-hover-color: $base-blue; | |
$navbar-default-link-hover-bg: transparent; | |
$navbar-default-link-active-bg: transparent; | |
// Dropdowns | |
$dropdown-bg: $base-white; | |
$dropdown-border: $base-blue; | |
$dropdown-divider-bg: $base-blue; | |
$dropdown-link-color: $base-blue; | |
// Base Variables | |
$header-height: 121px; | |
$border-tabs-blue: 1px solid $base-blue; | |
$border-tabs-padding: 20px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Bootstrap overrides & mixins | |
@import "skyline/variables"; | |
// Core Bootstrap | |
@import "bootstrap-sprockets"; | |
@import "bootstrap"; | |
// Layouts | |
@import "skyline/base"; | |
@import "skyline/utilities"; | |
@import "skyline/layouts/header"; | |
@import "skyline/layouts/sidebar"; | |
@import "skyline/layouts/footer"; | |
// Individual pages | |
@import "skyline/dashboard"; | |
// Breakpoints | |
@import "skyline/breakpoints/sm"; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment