This repository has been archived by the owner on Feb 5, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
186 lines (185 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
---
layout: "default"
title: "siimple: minimal and responsive CSS Framework for flat and clean designs"
root: "./"
---
<!-- Icons -->
<link rel="stylesheet" href="/assets/css/icons.css">
<title>{{ page.title }}</title>
<div class="siimple-jumbotron siimple-jumbotron--large siimple--color-primary siimple--bg-grey-light" align="center">
<div class="docs-welcome-title1">
A <strong>flat</strong>, <strong>minimal</strong> and <strong>different</strong> CSS framework.</div>
<div class="docs-welcome-title2">
That is <strong class="siimple-brand">siimple</strong>.
</div>
<div class="docs-welcome-buttons">
<a href="https://docs.siimple.xyz" class="siimple-btn siimple--color-white siimple--bg-primary">
Get started
</a>
<a href="https://github.com/siimple/siimple/releases" class="siimple-btn siimple--color-white siimple--bg-primary">
Download
</a>
</div>
<div class="docs-welcome-detail">Current version: <strong>{{ site.version }}</strong></div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5" align="center">
<div class="siimple--py-4">
<div class="siimple-h2 siimple--mb-2 siimple--text-normal">
Why <strong class="siimple-brand">siimple</strong>?
</div>
<div class="siimple-paragraph siimple-paragraph--lead">
Build responsive, flat and clean web designs with the minimalist and flexible <strong>siimple</strong> CSS framework.
</div>
<div class="siimple-grid-row">
{% for feature_id in site.data.features.all %}
{% assign feature = site.data.features[feature_id] %}
<div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col-sm--12 website-feature">
<div class="website-feature-image website-icons website-icons-{{ feature_id }}"></div>
<div class="website-feature-title">{{ feature.title }}</div>
<div class="website-feature-description">{{ feature.description }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5">
<div align="center">
<div class="siimple-h3 siimple--mb-2 siimple--text-normal">
So <strong>siiiimple</strong> to use!
</div>
<div class="siimple-paragraph siimple-paragraph--lead">
<strong>siimple</strong> provides intuitive classes to style your elements.
</div>
</div>
<div class="siimple-grid-row">
<div class="siimple-grid-col siimple-grid-col--5 siimple-grid-col--sm-12">
<div class="siimple-field">
<div class="siimple-field-label">Your email</div>
<input type="email" class="siimple-input siimple-input--fluid" value="bob.smith@email.com">
<div class="siimple-field-helper">Provide a valid email</div>
</div>
<div class="siimple-field">
<div class="siimple-field-label">Your message</div>
<textarea class="siimple-textarea siimple-textarea--fluid" rows="4">Siimple is awesome!</textarea>
</div>
<div class="siimple-field">
<span class="siimple-btn siimple-btn--success">Submit</span>
<span class="siimple-btn siimple-btn--error">Cancel</span>
</div>
</div>
<div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
<pre class="siimple-pre theme-code theme-code--small">
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-field-label"</span><span class="b">></span>Your email<span class="b"></div></span>
<span class="b"><input </span><span class="y">type=</span><span class="g">"email"</span> <span class="y">class=</span><span class="g">"siimple-input siimple-input--fluid"</span> <span class="y">value=</span><span class="g">"bob.smith@email.com"</span><span class="b">></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-field-helper"</span><span class="b">></span>Provide a valid email<span class="b"></div></span>
<span class="b"></div></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-field-label"</span><span class="b">></span>Your message<span class="b"></div></span>
<span class="b"><textarea </span><span class="y">class=</span><span class="g">"siimple-textarea siimple-textarea--fluid"</span> <span class="y">rows=</span><span class="g">"4"</span><span class="b">></span>Siimple is awesome!<span class="b"></textarea></span>
<span class="b"></div></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">></span>
<span class="b"><span </span><span class="y">class=</span><span class="g">"siimple-btn siimple-btn--success"</span><span class="b">></span>Submit<span class="b"></span></span>
<span class="b"><span </span><span class="y">class=</span><span class="g">"siimple-btn siimple-btn--error"</span><span class="b">></span>Cancel<span class="b"></span></span>
<span class="b"></div></span>
<span class="b"></div></span>
</pre>
</div>
</div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5">
<div align="center">
<div class="siimple-h3 siimple--mb-2 siimple--text-normal">
With a flexible <strong>grid</strong> system!
</div>
<div class="siimple-paragraph siimple-paragraph--lead">
Build responsive layouts using our twelve-columns grid system.
</div>
</div>
<div class="siimple-grid-row">
<div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
<pre class="siimple-pre theme-code theme-code--small">
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-grid"</span><span class="b">></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-grid-row"</span><span class="b">></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--5"</span><span class="b">></span>5<span class="b"></div></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--7"</span><span class="b">></span>7<span class="b"></div></span>
<span class="b"></div></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-grid-row"</span><span class="b">></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--8"</span><span class="b">></span>8<span class="b"></div></span>
<span class="b"><div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--4"</span><span class="b">></span>4<span class="b"></div></span>
<span class="b"></div></span>
<span class="b"></div></span>
</pre>
</div>
<div class="siimple-grid-col siimple-grid-col--5 siimple-grid-col--sm-12">
<div class="siimple-grid example-grid">
<div class="siimple-grid-row">
<div class="siimple-grid-col siimple-grid-col--5">
<div class="example-grid-content">5</div>
</div>
<div class="siimple-grid-col siimple-grid-col--7">
<div class="example-grid-content">7</div>
</div>
</div>
<div class="siimple-grid-row">
<div class="siimple-grid-col siimple-grid-col--8">
<div class="example-grid-content">8</div>
</div>
<div class="siimple-grid-col siimple-grid-col--4">
<div class="example-grid-content">4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5 siimple--mb-4" align="center">
<div class="siimple-h3 siimple--mb-2 siimple--text-normal">
Let's get started with <strong class="siimple-brand">siimple</strong>
</div>
<div class="siimple-paragraph siimple-paragraph--lead">
You can get started with <strong>siimple</strong> reading the official documentation:
learn how to add <strong>siimple</strong> to your project and discover how to style your buttons, forms and more!
</div>
<div align="center">
<a href="https://docs.siimple.xyz" class="siimple-btn siimple-btn--primary">
Read the documentation
</a>
</div>
</div>
<div class="siimple-content siimple-content--large siimple--bg-grey-light siimple--py-5">
<div align="center">
<div class="website-icons website-icons-announcement"></div>
</div>
<div class="siimple-h3 siimple--mb-2 siimple--text-normal" align="center">
What people say about <strong class="siimple-brand">siimple</strong>?
</div>
<div class="siimple-grid-row siimple--py-4">
{% for review in site.data.reviews limit:3 %}
<div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col--sm-12 docs-reviews-column">
<div class="siimple-h5">{{ review.site }}</div>
<div class="siimple-paragraph docs-reviews-content">
<strong class="docs-reviews-quote">“</strong> {{ review.content }} <strong class="docs-reviews-quote">”</strong>
</div>
<a href="{{ review.url }}" class="siimple-btn siimple-btn--primary docs-reviews-btn" target="_blank">
Read more <strong>»</strong>
</a>
</div>
{% endfor %}
</div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5" align="center">
<div class="siimple--py-4">
<div class="siimple-h3 siimple--mb-2 siimple--text-normal">
Contribute to <strong class="siimple-brand">siimple</strong>
</div>
<div class="siimple-paragraph siimple-paragraph--lead">
Contribute to our repository on <strong>GitHub</strong>. Bug reports, improvements and new ideas are always welcome!
</div>
<div>
<a href="https://github.com/siimple/siimple" class="siimple-btn siimple-btn--primary" target="_blank">
Contribute to <strong>siimple</strong>
</a>
</div>
</div>
</div>