Skip to content

Commit fd74fa2

Browse files
committed
clean up default CSS and layout
1 parent 311c0d6 commit fd74fa2

File tree

7 files changed

+112
-111
lines changed

7 files changed

+112
-111
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,92 +0,0 @@
1-
// import the CSS framework
2-
@import "foundation";
3-
4-
// override for the 'Home' navigation link
5-
.top-bar .name {
6-
font-size: rem-calc(13);
7-
line-height: 45px; }
8-
.top-bar .name a {
9-
font-weight: normal;
10-
color: white;
11-
padding: 0 15px; }
12-
13-
// THESE ARE EXAMPLES YOU CAN MODIFY
14-
// create mixins using Foundation classes
15-
@mixin twelve-columns {
16-
@extend .small-12;
17-
@extend .columns;
18-
}
19-
@mixin six-columns-centered {
20-
@extend .small-6;
21-
@extend .columns;
22-
@extend .text-center;
23-
}
24-
// create your own classes
25-
// to make views framework-neutral
26-
.column {
27-
@include six-columns-centered;
28-
}
29-
.form {
30-
@include grid-column(6);
31-
}
32-
.form-centered {
33-
@include six-columns-centered;
34-
}
35-
.submit {
36-
@extend .button;
37-
@extend .radius;
38-
}
39-
// apply styles to HTML elements
40-
// to make views framework-neutral
41-
main {
42-
@include twelve-columns;
43-
background-color: #eee;
44-
}
45-
section {
46-
@extend .row;
47-
margin-top: 20px;
48-
}
49-
50-
// Styles for form views
51-
// using Foundation
52-
// generated by the rails_layout gem
53-
.authform {
54-
padding-top: 30px;
55-
max-width: 320px;
56-
margin: 0 auto;
57-
}
58-
.authform form {
59-
@include panel();
60-
padding-bottom: 60px;
61-
}
62-
.authform form a {
63-
font-size: rem-calc(13);
64-
}
65-
.authform form p {
66-
font-size: rem-calc(13);
67-
}
68-
.authform .form-group {
69-
// for Bootstrap, not used for Foundation
70-
}
71-
.authform .form-control {
72-
// for Bootstrap, not used for Foundation
73-
}
74-
.authform .checkbox {
75-
// for Bootstrap, not used for Foundation
76-
}
77-
.authform fieldset {
78-
@include panel();
79-
}
80-
.authform #error_explanation {
81-
@extend .alert-box;
82-
@extend .alert;
83-
}
84-
.authform #error_explanation h2 {
85-
font-size: rem-calc(16);
86-
color: white;
87-
}
88-
.button-xs {
89-
@extend .button;
90-
@extend .radius;
91-
@extend .tiny;
92-
}

app/assets/stylesheets/layout.scss

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
@import "foundation";
2+
3+
@mixin twelve-columns {
4+
@extend .small-12;
5+
@extend .columns;
6+
}
7+
8+
@mixin six-columns-centered {
9+
@extend .small-6;
10+
@extend .columns;
11+
@extend .text-center;
12+
}
13+
14+
// create your own classes
15+
// to make views framework-neutral
16+
.column {
17+
@include six-columns-centered;
18+
}
19+
.form {
20+
@include grid-column(6);
21+
}
22+
.form-centered {
23+
@include six-columns-centered;
24+
}
25+
.submit {
26+
@extend .button;
27+
@extend .radius;
28+
}
29+
30+
[role="main"] {
31+
@include twelve-columns;
32+
padding: 1em 0;
33+
background-color: white;
34+
}
35+
section {
36+
@extend .row;
37+
margin-top: 20px;
38+
}
39+
40+
.top-bar .name {
41+
font-size: rem-calc(13);
42+
line-height: 45px;
43+
}
44+
.top-bar .name a {
45+
font-weight: normal;
46+
color: white;
47+
padding: 0 15px;
48+
}
49+
50+
.authform {
51+
padding-top: 30px;
52+
max-width: 320px;
53+
margin: 0 auto;
54+
}
55+
.authform form {
56+
@include panel();
57+
padding-bottom: 60px;
58+
}
59+
.authform form a {
60+
font-size: rem-calc(13);
61+
}
62+
.authform form p {
63+
font-size: rem-calc(13);
64+
}
65+
.authform .form-group {
66+
// for Bootstrap, not used for Foundation
67+
}
68+
.authform .form-control {
69+
// for Bootstrap, not used for Foundation
70+
}
71+
.authform .checkbox {
72+
// for Bootstrap, not used for Foundation
73+
}
74+
.authform fieldset {
75+
@include panel();
76+
}
77+
.authform #error_explanation {
78+
@extend .alert-box;
79+
@extend .alert;
80+
}
81+
.authform #error_explanation h2 {
82+
font-size: rem-calc(16);
83+
color: white;
84+
}
85+
.button-xs {
86+
@extend .button;
87+
@extend .radius;
88+
@extend .tiny;
89+
}
+14-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
<h2>Log in</h2>
1+
<div class="authform">
2+
<h2>Log in</h2>
23

3-
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
4-
<div class="form-inputs">
5-
<%= f.input :email, required: false, autofocus: true %>
6-
<%= f.input :password, required: false %>
7-
<%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
8-
</div>
4+
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
5+
<div class="form-inputs">
6+
<%= f.input :email, required: false, autofocus: true %>
7+
<%= f.input :password, required: false %>
8+
<%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
9+
</div>
910

10-
<div class="form-actions">
11-
<%= f.button :submit, "Log in" %>
12-
</div>
13-
<% end %>
11+
<div class="form-actions">
12+
<%= f.button :submit, "Log in" %>
13+
</div>
1414

15-
<%= render "devise/shared/links" %>
15+
<%= render "devise/shared/links" %>
16+
<% end %>
17+
</div>

app/views/layouts/admin.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
1111
<%= csrf_meta_tags %>
1212
</head>
13-
<body>
13+
<body class="admin-layout">
1414
<header>
1515
<%= render 'layouts/admin_navigation' %>
1616
</header>

app/views/layouts/application.html.erb

+6-4
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@
1414
<header>
1515
<%= render 'layouts/navigation' %>
1616
</header>
17-
<main role="main">
18-
<%= render 'layouts/messages' %>
19-
<%= yield %>
20-
</main>
17+
<div class="row">
18+
<main role="main">
19+
<%= render 'layouts/messages' %>
20+
<%= yield %>
21+
</main>
22+
</div>
2123
</body>
2224
</html>

app/views/pages/about.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<% content_for :title do %>About<% end %>
2-
<h3>About the Website</h3>
2+
<h2>About the Website</h2>
33
<p>
44
This web application is a demo for integrating <%= link_to('Memberful', 'https://memberful.com') %>
55
memberships with Rails via <%= link_to('OmniAuth', 'https://github.com/intridea/omniauth') %>.

app/views/visitors/index.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h3>Welcome</h3>
1+
<h2>Welcome</h2>
22

33
<% if user_signed_in? %>
44
You are signed in as <%= current_user.name %>

0 commit comments

Comments
 (0)