Skip to content

Styling with Bourbon and neat #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hchood wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Styling with Bourbon and neat #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a91baef
Add bourbon and neat
hchood Jan 27, 2015
02601b8
Add responsive grid
hchood Jan 27, 2015
c7f7e14
Add menu styling
hchood Jan 27, 2015
af56d3f
Modify color scheme for sidebar
hchood Jan 27, 2015
b2dd39f
Add styling for topbar
hchood Jan 28, 2015
8b97ac6
Style projects index list
hchood Jan 28, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions frontend/app/styles/app.css
View file
Open in desktop

This file was deleted.

203 changes: 203 additions & 0 deletions frontend/app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
@import "bourbon";
@import "bower_components/neat/app/assets/stylesheets/neat";

$mobile: new-breakpoint(max-width 480px);
$desktop: new-breakpoint(min-width 850px);

$base-accent-color: #bff073 !default;
$base-color: #ffd041 !default;
$base-font-color: #f05b47;
$hover-font-color: #7f7f7f;

#page {
@include outer-container;

#content {
@include media($mobile) {
@include span-columns(12);
}
@include media($desktop) {
@include span-columns(8);
}
}

#sidebar {
@include media($mobile) {
@include span-columns(12);
}
@include media($desktop) {
@include span-columns(4);
}
}

.sidebar-content {
///////////////////////////////////////////////////////////////////////////////////

ul {
padding: 0;
margin: 0;
}

li {
list-style: none;
}

a {
text-decoration: none;
}
//////////////////////////////////////////////////////////////////////////////////

$sidebar-border-color: $base-color;
$sidebar-background: lighten($sidebar-border-color, 20%);
$sidebar-color: $base-font-color;
$sidebar-border: 1px solid $sidebar-border-color;
$sidebar-background-hover: lighten($base-accent-color, 15%);
$sidebar-color-hover: darken($base-font-color, 20%);
$sidebar-background-focus: lighten($sidebar-background, 5%);

background: $sidebar-background;

li a {
border-bottom: $sidebar-border;
color: $sidebar-color;
display: block;
font-weight: bold;
padding: 1em;

&:focus {
background-color: $sidebar-background-focus;
}

&:hover {
background-color: $sidebar-background-hover;
color: $sidebar-color-hover;
}
}
}
}

div.header {
@include span-columns(12);
background: $base-accent-color;
padding: 0.5em;

.title {
margin-left: 10px;
margin-top: 5px;
@include media($mobile) {
@include span-columns(12);
}
@include media($desktop) {
@include span-columns(8);
}
font-size: 36px;
}

nav ul {
@include media($mobile) {
@include span-columns(4);
}

padding: 0;
margin: 0;

li {
list-style: none;
display: inline-block;
}

a {
text-decoration: none;
}
//////////////////////////////////////////////////////////////////////////////////

$topbar-border-color: $base-accent-color;
$topbar-background: $topbar-border-color;
$topbar-color: $base-font-color;
$topbar-border: 1px solid $topbar-border-color;
$topbar-background-hover: lighten($base-accent-color, 15%);
$topbar-color-hover: darken($base-font-color, 20%);
$topbar-background-focus: lighten($topbar-background, 5%);

background: $topbar-background;

li a {
border-bottom: $topbar-border;
color: $topbar-color;
display: inline-block;
font-weight: bold;
padding: 1em;

&:focus {
background-color: $topbar-background-focus;
}

&:hover {
background-color: $topbar-background-hover;
color: $topbar-color-hover;
}
}
}
}

// accordion component from Refills - stole their CSS
.item-list {
///////////////////////////////////////////////////////////////////////////////////
$base-border-color: gainsboro !default;
$base-line-height: 1.5em !default;
$base-spacing: 1.5em !default;
$dark-gray: #333 !default;
$base-font-color: $dark-gray !default;

margin: 0;
padding: 0;

ul {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

p {
color: $base-font-color;
line-height: $base-line-height;
}

a {
text-decoration: none;
}
//////////////////////////////////////////////////////////////////////////////////

$item-list-border-color: $base-border-color;
$item-list-color: $base-font-color;
$item-list-border: 1px solid $item-list-border-color;
$item-list-background: lighten($item-list-border-color, 10%);
$item-list-hover: lighten($item-list-background, 2%);
$item-list-list-padding: ($base-spacing / 2) $gutter;

background-color: $item-list-background;
border: $item-list-border;
margin-bottom: $base-spacing;

li {
border-bottom: $item-list-border;

> a {
color: $item-list-color;
display: block;
padding: $item-list-list-padding;
}

&:last-child {
border: none;
}

&:focus,
&:hover {
background-color: $item-list-hover;
}
}
}
49 changes: 33 additions & 16 deletions frontend/app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,37 @@
<h2 id="title">Mastermind</h2>
<div id="page">
<div class="header">
<div class="banner">
<span class="title">Masterminder</span>

{{#if session.isAuthenticated}}
<h3>Welcome, {{session.currentUser.firstName}}!</h3>
{{/if}}
<nav>
<ul>
{{#if session.isAuthenticated}}
<li>Welcome, {{session.currentUser.firstName}}!</li>
{{/if}}

<ul>
<li>{{link-to 'Projects' 'projects.index'}}</li>
<li>{{link-to 'Users' 'users.index'}}</li>
{{#if session.isAuthenticated}}
<li><a href="#" {{ action 'invalidateSession' }}>Logout</a></li>
{{else}}
<li>{{link-to 'Login' 'login'}}</li>
<li>{{link-to 'Sign Up' 'sign-up'}}</li>
{{/if}}
</ul>
</nav>
</div>
</div>

{{#if session.isAuthenticated}}
<li>{{link-to 'Add a project' 'projects.new'}}</li>
<li><a href="#" {{ action 'invalidateSession' }}>Logout</a></li>
{{else}}
<li>{{link-to 'Login' 'login'}}</li>
<li>{{link-to 'Sign Up' 'sign-up'}}</li>
{{/if}}
</ul>
<div id="sidebar" class="sidebar-content">
<ul>
{{#if session.isAuthenticated}}
<li>{{link-to 'Add a project' 'projects.new'}}</li>
{{/if}}

{{outlet}}
<li>{{link-to 'Projects' 'projects.index'}}</li>
<li>{{link-to 'Users' 'users.index'}}</li>
</ul>
</div>

<div id="content">
{{outlet}}
</div>
</div>
2 changes: 1 addition & 1 deletion frontend/app/templates/projects/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<h3>All World Domination Schemes</h3>

<ul>
<ul class="item-list">
{{#each project in model}}
<li>{{link-to project.name 'projects.show' project}}</li>
{{/each}}
Expand Down
4 changes: 3 additions & 1 deletion frontend/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
"ember-qunit-notifications": "0.0.4",
"qunit": "~1.15.0",
"pretender": "0.1.0",
"ember-simple-auth": "0.7.2"
"ember-simple-auth": "0.7.2",
"neat": "~1.7.1",
"bourbon": "3.2.1"
}
}
2 changes: 2 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@
"devDependencies": {
"broccoli-asset-rev": "^2.0.0",
"broccoli-ember-hbs-template-compiler": "^1.6.1",
"broccoli-sass": "0.3.3",
"ember-cli": "0.1.7",
"ember-cli-6to5": "0.2.1",
"ember-cli-bourbon": "0.0.5",
"ember-cli-content-security-policy": "0.3.0",
"ember-cli-dependency-checker": "0.0.7",
"ember-cli-ic-ajax": "0.1.1",
Expand Down