Skip to content

Commit 25249ff

Browse files
JellyfishboyJellyfishboy
committed
New product sass stylesheet. Continued development on the search/category page design.
1 parent b460f82 commit 25249ff

8 files changed

+164
-42
lines changed

‎app/layouts/default.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<head>
77
<meta charset="utf-8">
88
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9-
<title></title>
9+
<title>Redlight - Responsive e-commerce template</title>
1010
<meta name="description" content="">
1111
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
1212
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic' rel='stylesheet' type='text/css'>

‎app/pages/search.hbs

+48-21
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
11
<div class="row">
2-
{{!
3-
Filter options
4-
}}
5-
<section id="sidebar" class="threecol">
6-
7-
</section>
82
{{!
93
Search results
104
}}
11-
<section id="content" class="ninecol last">
5+
<section id="content" class="twelvecol">
6+
<div class="row">
7+
<div class="twelvecol">
8+
<h2>Search</h2>
9+
</div>
10+
</div>
1211
<div class="row">
1312
{{!
14-
Search header
13+
Query
14+
}}
15+
<div class="fourcol">
16+
<div>Search results for "<b>12v power</b>"</div>
17+
</div>
18+
{{!
19+
Result count
1520
}}
1621
<div class="fourcol">
22+
<div><b>28</b> results found</div>
1723
</div>
1824
{{!
19-
Select sort by
25+
Sort by
2026
}}
21-
<div class="fivecol last">
22-
27+
<div class="fourcol last">
28+
<select id="isotopeSorting" class="form-control">
29+
<option value="{&quot;sortBy&quot;:&quot;price&quot;, &quot;sortAscending&quot;:&quot;true&quot;}">By Price (Low to High) ↑</option>
30+
<option value="{&quot;sortBy&quot;:&quot;price&quot;, &quot;sortAscending&quot;:&quot;false&quot;}">By Price (High to Low) ↓</option>
31+
<option value="{&quot;sortBy&quot;:&quot;name&quot;, &quot;sortAscending&quot;:&quot;true&quot;}">By Name (Low to High) ↑</option>
32+
<option value="{&quot;sortBy&quot;:&quot;name&quot;, &quot;sortAscending&quot;:&quot;false&quot;}">By Name (High to Low) ↓</option>
33+
<option value="{&quot;sortBy&quot;:&quot;popularity&quot;, &quot;sortAscending&quot;:&quot;true&quot;}">By Popularity (Low to High) ↑</option>
34+
<option value="{&quot;sortBy&quot;:&quot;popularity&quot;, &quot;sortAscending&quot;:&quot;false&quot;}">By Popularity (High to Low) ↓</option>
35+
</select>
2336
</div>
2437
</div>
2538
{{!
@@ -29,36 +42,50 @@
2942
<div class="threecol">
3043
<div class="single-product">
3144
<img src="http://placehold.it/250x250"/>
32-
<h2>Product name</h2>
33-
<h3>£90.23</h3>
45+
<h3>Product name</h3>
46+
<h4>from £90.23</h4>
47+
</div>
48+
</div>
49+
<div class="threecol">
50+
<div class="single-product">
51+
<img src="http://placehold.it/250x250"/>
52+
<h3>12v power supply</h3>
53+
<h4>£90.23</h4>
54+
</div>
55+
</div>
56+
<div class="threecol">
57+
<div class="single-product">
58+
<img src="http://placehold.it/250x250"/>
59+
<h3>Product name</h3>
60+
<h4>£90.23</h4>
3461
</div>
3562
</div>
3663
<div class="threecol">
3764
<div class="single-product">
3865
<img src="http://placehold.it/250x250"/>
39-
<h2>Product name</h2>
40-
<h3>£90.23</h3>
66+
<h3>Product name</h3>
67+
<h4>£90.23</h4>
4168
</div>
4269
</div>
4370
<div class="threecol">
4471
<div class="single-product">
4572
<img src="http://placehold.it/250x250"/>
46-
<h2>Product name</h2>
47-
<h3>£90.23</h3>
73+
<h3>Product name</h3>
74+
<h4>£90.23</h4>
4875
</div>
4976
</div>
5077
<div class="threecol">
5178
<div class="single-product">
5279
<img src="http://placehold.it/250x250"/>
53-
<h2>Product name</h2>
54-
<h3>£90.23</h3>
80+
<h3>Product name</h3>
81+
<h4>£90.23</h4>
5582
</div>
5683
</div>
5784
<div class="threecol">
5885
<div class="single-product">
5986
<img src="http://placehold.it/250x250"/>
60-
<h2>Product name</h2>
61-
<h3>£90.23</h3>
87+
<h3>Product name</h3>
88+
<h4>£90.23</h4>
6289
</div>
6390
</div>
6491
</div>

‎app/src/sass/_base.scss

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ html, body
1010
}
1111
body
1212
{
13+
// font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
1314
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
1415
font-weight: normal;
1516
font-style: normal;
@@ -44,6 +45,7 @@ h2
4445
font-size:14px;
4546
font-weight: bold;
4647
margin:0 0 20px;
48+
text-transform: uppercase;
4749
}
4850
p
4951
{

‎app/src/sass/_breadcrumb.scss

+1-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
background-color: #e7e8e8;
44
position: relative;
55
top:80px;
6-
padding:5px 0;
6+
padding:7px 0;
77
margin-bottom: 30px;
88
z-index:1;
99

@@ -33,12 +33,6 @@
3333
{
3434
padding:0 15px 0 0;
3535
font-size:16px;
36-
37-
i
38-
{
39-
position: relative;
40-
top: 1px;
41-
}
4236
}
4337
&:last-child
4438
{

‎app/src/sass/_form.scss

+14-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
form
22
{
33

4-
.form-control
5-
{
6-
height:33px;
7-
display: inline-block;
8-
width:215px;
9-
padding:8px 10px;
10-
vertical-align: middle;
11-
background-color: #fff;
12-
border:1px solid #ebebeb;
13-
outline: 0;
14-
@include border-radius(3px);
15-
line-height: 1.428571429;
16-
}
4+
5+
}
6+
.form-control
7+
{
8+
height:33px;
9+
display: inline-block;
10+
width:215px;
11+
padding:8px 10px;
12+
vertical-align: middle;
13+
background-color: #fff;
14+
border:1px solid #ebebeb;
15+
outline: 0;
16+
@include border-radius(3px);
17+
line-height: 1.428571429;
1718
}

‎app/src/sass/_product.scss

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
section#content
2+
{
3+
4+
.row
5+
{
6+
7+
h2
8+
{
9+
font-size:16px;
10+
margin: 0 0 10px;
11+
}
12+
.threecol
13+
{
14+
15+
&:nth-child(4n)
16+
{
17+
margin-right:0;
18+
}
19+
}
20+
&:nth-child(2)
21+
{
22+
border-bottom:1px solid $grey;
23+
margin-bottom:10px;
24+
25+
.fourcol:not(.last)
26+
{
27+
display: table;
28+
height:43px;
29+
30+
div
31+
{
32+
display: inline-block;
33+
display: table-cell;
34+
vertical-align: middle;
35+
}
36+
}
37+
38+
select {
39+
margin-bottom:10px;
40+
float:right;
41+
}
42+
}
43+
}
44+
}
45+
.single-product
46+
{
47+
48+
h3, h4
49+
{
50+
font-size: 13px;
51+
}
52+
h3
53+
{
54+
margin:1px 0 0;
55+
font-family: 'Lato', sans-serif;
56+
letter-spacing: 2px;
57+
font-weight: bold;
58+
text-transform: uppercase;
59+
}
60+
h4
61+
{
62+
margin:3px 0 25px;
63+
font-weight: 100;
64+
}
65+
}

‎app/src/sass/_responsive.scss

+32
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,38 @@
3232
margin-top:0;
3333
}
3434
}
35+
section#content
36+
{
37+
38+
.row
39+
{
40+
41+
.threecol
42+
{
43+
text-align: center;
44+
}
45+
&:nth-child(2)
46+
{
47+
48+
.fourcol
49+
{
50+
51+
&:nth-child(2)
52+
{
53+
margin-bottom: 7px;
54+
}
55+
&:not(.last)
56+
{
57+
height:33px;
58+
}
59+
}
60+
select
61+
{
62+
float:left;
63+
}
64+
}
65+
}
66+
}
3567
}
3668
}
3769
@media handheld, only screen and (max-width: 685px)

‎app/src/sass/application.scss

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ $dark-grey: #444444;
1616
@import "button";
1717
@import "sprite";
1818
@import "breadcrumb";
19+
@import "product";
1920

2021

2122
@import "retina";

0 commit comments

Comments
 (0)