Skip to content

Commit 31d57dc

Browse files
author
mrmrs
committed
Add templates for components and skins
1 parent f5b0dbd commit 31d57dc

File tree

4 files changed

+485
-32
lines changed

4 files changed

+485
-32
lines changed

‎src/components/forms/sign-in.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<main class="pa4 black-80">
5+
<form class="measure center">
6+
<fieldset id="sign_up" class="ba b--transparent ph0 mh0">
7+
<legend class="f4 fw6 ph0 mh0">Sign In</legend>
8+
<div class="mt3">
9+
<label class="db fw6 lh-copy f6" for="email-address">Email</label>
10+
<input class="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address" id="email-address">
11+
</div>
12+
<div class="mv3">
13+
<label class="db fw6 lh-copy f6" for="password">Password</label>
14+
<input class="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password" id="password">
15+
</div>
16+
<label class="pa0 ma0 lh-copy f6 pointer"><input type="checkbox"> Remember me</label>
17+
</fieldset>
18+
<div class="">
19+
<input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" type="submit" value="Sign in">
20+
</div>
21+
<div class="lh-copy mt3">
22+
<a href="#0" class="f6 link dim black db">Sign up</a>
23+
<a href="#0" class="f6 link dim black db">Forgot yor password?</a>
24+
</div>
25+
</form>
26+
</main>

‎src/components/lists/items-image-title-price.html

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<main class="mw6 center">
5+
<article>
6+
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
7+
<div class="dtc w3">
8+
<img src="http://mrmrs.io/images/0010.jpg" class="db w-100"/>
9+
</div>
10+
<div class="dtc v-top pl2">
11+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Grid Systems</h1>
12+
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
13+
<dl class="mt2 f6">
14+
<dt class="clip">Price</dt>
15+
<dd class="ml0">$75.00</dd>
16+
</dl>
17+
</div>
18+
</a>
19+
</article>
20+
<article>
21+
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
22+
<div class="dtc w3">
23+
<img src="http://mrmrs.io/images/0002.jpg" class="db w-100"/>
24+
</div>
25+
<div class="dtc v-top pl2">
26+
<h1 class="f6 f5-ns fw6 lh-title black mv0">History of the Poster</h1>
27+
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
28+
<dl class="mt2 f6">
29+
<dt class="clip">Price</dt>
30+
<dd class="ml0">$15.00</dd>
31+
</dl>
32+
</div>
33+
</a>
34+
</article>
35+
<article>
36+
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
37+
<div class="dtc w3">
38+
<img src="http://mrmrs.io/images/0004.jpg" class="db w-100"/>
39+
</div>
40+
<div class="dtc v-top pl2">
41+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Graphic Design in IBM: Typography, Photography, and Illustration</h1>
42+
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
43+
<dl class="mt2 f6">
44+
<dt class="clip">Price</dt>
45+
<dd class="ml0">$15.00</dd>
46+
</dl>
47+
</div>
48+
</a>
49+
</article>
50+
<article>
51+
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
52+
<div class="dtc w3">
53+
<img src="http://mrmrs.io/images/0006.jpg" class="db w-100"/>
54+
</div>
55+
<div class="dtc v-top pl2">
56+
<h1 class="f6 f5-ns fw6 lh-title black mv0">Fotoplakate: Von den Anfängen</h1>
57+
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
58+
<dl class="mt2 f6">
59+
<dt class="clip">Price</dt>
60+
<dd class="ml0">$15.00</dd>
61+
</dl>
62+
</div>
63+
</a>
64+
</article>
65+
<article>
66+
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
67+
<div class="dtc w3">
68+
<img src="http://mrmrs.io/images/0030.jpg" class="db w-100"/>
69+
</div>
70+
<div class="dtc v-top pl2">
71+
<h1 class="f6 f5-ns fw6 lh-title black mv0">The Graphic Artist</h1>
72+
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
73+
<dl class="mt2 f6">
74+
<dt class="clip">Price</dt>
75+
<dd class="ml0">$15.00</dd>
76+
</dl>
77+
</div>
78+
</a>
79+
</article>
80+
<article class="mt2">
81+
<a class="link dt w-100 bb b--black-10 dim blue" href="#0">
82+
<div class="dtc w3">
83+
<img src="http://mrmrs.io/images/0010.jpg" class="db w-100"/>
84+
</div>
85+
<div class="dtc v-top pl2">
86+
<h1 class="f6 f5-ns fw6 lh-title black mv0">A History of Visual Communication (Geschichte der visuellen Kommunikation)</h1>
87+
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
88+
<dl class="mt2 f6">
89+
<dt class="clip">Price</dt>
90+
<dd class="ml0">$15.00</dd>
91+
</dl>
92+
</div>
93+
</a>
94+
</article>
95+
</main>

‎src/components/pages/4x4-mixed-grid.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -50,62 +50,62 @@ <h2 class="lh-title f3 b mt0">
5050
<section class="fl w-100">
5151
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
5252
<div class="aspect-ratio aspect-ratio--3x4">
53-
<span style="background-image:url(http://mrmrs.io/photos/2_small.jpg);" class="cover bg-center aspect-ratio--object"></span>
53+
<span style="background-image:url(http://mrmrs.io/images/0008.jpg);" class="cover bg-center aspect-ratio--object"></span>
5454
</div>
5555
</div>
5656
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
5757
<div class="aspect-ratio aspect-ratio--3x4">
58-
<span style="background-image:url(http://mrmrs.io/photos/012.jpg);" class="cover bg-center aspect-ratio--object"></span>
58+
<span style="background-image:url(http://mrmrs.io/images/0012.jpg);" class="cover bg-center aspect-ratio--object"></span>
5959
</div>
6060
</div>
6161
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
6262
<div class="aspect-ratio aspect-ratio--3x4">
63-
<span style="background-image:url(http://mrmrs.io/photos/045.jpg);" class="cover bg-center aspect-ratio--object"></span>
63+
<span style="background-image:url(http://mrmrs.io/images/0045.jpg);" class="cover bg-center aspect-ratio--object"></span>
6464
</div>
6565
</div>
6666
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
6767
<div class="aspect-ratio aspect-ratio--3x4">
68-
<span style="background-image:url(http://mrmrs.io/photos/051.jpg);" class="cover bg-center aspect-ratio--object"></span>
68+
<span style="background-image:url(http://mrmrs.io/images/0051.jpg);" class="cover bg-center aspect-ratio--object"></span>
6969
</div>
7070
</div>
7171
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
7272
<div class="aspect-ratio aspect-ratio--3x4">
73-
<span style="background-image:url(http://mrmrs.io/photos/018.jpg);" class="cover bg-center aspect-ratio--object"></span>
73+
<span style="background-image:url(http://mrmrs.io/images/0018.jpg);" class="cover bg-center aspect-ratio--object"></span>
7474
</div>
7575
</div>
7676
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
7777
<div class="aspect-ratio aspect-ratio--3x4">
78-
<span style="background-image:url(http://mrmrs.io/photos/006.jpg);" class="cover bg-center aspect-ratio--object"></span>
78+
<span style="background-image:url(http://mrmrs.io/images/0019.jpg);" class="cover bg-center aspect-ratio--object"></span>
7979
</div>
8080
</div>
8181
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
8282
<div class="aspect-ratio aspect-ratio--3x4">
83-
<span style="background-image:url(http://mrmrs.io/photos/038.jpg);" class="cover bg-center aspect-ratio--object"></span>
83+
<span style="background-image:url(http://mrmrs.io/images/0038.jpg);" class="cover bg-center aspect-ratio--object"></span>
8484
</div>
8585
</div>
8686
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
8787
<div class="aspect-ratio aspect-ratio--3x4">
88-
<span style="background-image:url(http://mrmrs.io/photos/011.jpg);" class="cover bg-center aspect-ratio--object"></span>
88+
<span style="background-image:url(http://mrmrs.io/images/0011.jpg);" class="cover bg-center aspect-ratio--object"></span>
8989
</div>
9090
</div>
9191
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
9292
<div class="aspect-ratio aspect-ratio--3x4">
93-
<span style="background-image:url(http://mrmrs.io/photos/009.jpg);" class="cover bg-center aspect-ratio--object"></span>
93+
<span style="background-image:url(http://mrmrs.io/images/0004.jpg);" class="cover bg-center aspect-ratio--object"></span>
9494
</div>
9595
</div>
9696
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
9797
<div class="aspect-ratio aspect-ratio--3x4">
98-
<span style="background-image:url(http://mrmrs.io/photos/6_small.jpg);" class="cover bg-center aspect-ratio--object"></span>
98+
<span style="background-image:url(http://mrmrs.io/images/0002.jpg);" class="cover bg-center aspect-ratio--object"></span>
9999
</div>
100100
</div>
101101
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
102102
<div class="aspect-ratio aspect-ratio--3x4">
103-
<span style="background-image:url(http://mrmrs.io/photos/042.jpg);" class="cover bg-center aspect-ratio--object"></span>
103+
<span style="background-image:url(http://mrmrs.io/images/0020.jpg);" class="cover bg-center aspect-ratio--object"></span>
104104
</div>
105105
</div>
106106
<div class="fl w-100 w-50-m w-25-l pv3 pa3-m pa4-l">
107107
<div class="aspect-ratio aspect-ratio--3x4">
108-
<span style="background-image:url(http://mrmrs.io/photos/013.jpg);" class="cover bg-center aspect-ratio--object"></span>
108+
<span style="background-image:url(http://mrmrs.io/images/0013.jpg);" class="cover bg-center aspect-ratio--object"></span>
109109
</div>
110110
</div>
111111
</section>

0 commit comments

Comments
 (0)