Skip to content

Commit 77f1abb

Browse files
author
Umar Hansa
committed
initial commit
0 parents  commit 77f1abb

9 files changed

+1017
-0
lines changed

‎README

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Simple examples of CSS Flexbox.

‎css/styles.css

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
/* GENERAL STYLES */
2+
body {
3+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
4+
margin: 3%;
5+
font-size: 0.9em;
6+
}
7+
8+
#page-header {
9+
margin-top: 1%;
10+
}
11+
12+
#title {
13+
font-size: 1.2em;
14+
}
15+
16+
#link-to-article {
17+
font-size: 0.8em;
18+
}
19+
20+
#link-to-article a{
21+
padding: 3px 0 10px 35px;
22+
background: url(../images/nettuts-logo.jpg) no-repeat;
23+
display: inline-block;
24+
}
25+
26+
.example {
27+
min-height: 20px;
28+
padding: 2%;
29+
margin-bottom: 3%;
30+
background-color: whiteSmoke;
31+
border: 1px solid #EEE;
32+
border: 1px solid rgba(0, 0, 0, 0.05);
33+
-webkit-border-radius: 4px;
34+
-moz-border-radius: 4px;
35+
border-radius: 4px;
36+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
37+
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
38+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
39+
overflow: hidden;
40+
}
41+
42+
.example header {
43+
margin-bottom: 10px;
44+
}
45+
46+
.example header h1, .example header p {
47+
margin: 0 0 2% 0;
48+
padding: 0;
49+
font-size: 1.1em;
50+
}
51+
52+
.example header p {
53+
font-size: 1em;
54+
}
55+
56+
.flexbox-message {
57+
display: none;
58+
padding: 1% 3%;
59+
margin-bottom: 20px;
60+
color: #C09853;
61+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
62+
background-color: #FCF8E3;
63+
border: 1px solid #FBEED5;
64+
-webkit-border-radius: 4px;
65+
-moz-border-radius: 4px;
66+
border-radius: 4px;
67+
color: #B94A48;
68+
background-color: #F2DEDE;
69+
border-color: #EED3D7;
70+
}
71+
72+
.no-flexbox-legacy .flexbox-message{
73+
display: block;
74+
}
75+
76+
code {
77+
padding: 0 3px 2px;
78+
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
79+
font-size: 0.9em;
80+
color: #333;
81+
-webkit-border-radius: 3px;
82+
-moz-border-radius: 3px;
83+
border-radius: 3px;
84+
padding: 2px 4px;
85+
color: #D14;
86+
background-color: #F7F7F9;
87+
border: 1px solid #E1E1E8;
88+
}
89+
90+
91+
92+
93+
.btn {
94+
display: inline-block;
95+
padding: 4px 10px 4px;
96+
margin-bottom: 10px;
97+
font-size: 13px;
98+
line-height: 18px;
99+
color:
100+
#333;
101+
text-align: center;
102+
text-shadow: 0 1px 1px
103+
rgba(255, 255, 255, 0.75);
104+
vertical-align: middle;
105+
cursor: pointer;
106+
background-color:
107+
whiteSmoke;
108+
background-image: -ms-linear-gradient(top,
109+
white,
110+
#E6E6E6);
111+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(
112+
white), to(
113+
#E6E6E6));
114+
background-image: -webkit-linear-gradient(top,
115+
white,
116+
#E6E6E6);
117+
background-image: -o-linear-gradient(top,
118+
white,
119+
#E6E6E6);
120+
background-image: linear-gradient(top,
121+
white,
122+
#E6E6E6);
123+
background-image: -moz-linear-gradient(top,
124+
white,
125+
#E6E6E6);
126+
background-repeat: repeat-x;
127+
border: 1px solid
128+
#CCC;
129+
border-color:
130+
rgba(0, 0, 0, 0.1)
131+
rgba(0, 0, 0, 0.1)
132+
rgba(0, 0, 0, 0.25);
133+
border-color:
134+
#E6E6E6
135+
#E6E6E6
136+
#BFBFBF;
137+
border-bottom-color:
138+
#B3B3B3;
139+
-webkit-border-radius: 4px;
140+
-moz-border-radius: 4px;
141+
border-radius: 4px;
142+
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
143+
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
144+
-webkit-box-shadow: inset 0 1px 0
145+
rgba(255, 255, 255, 0.2), 0 1px 2px
146+
rgba(0, 0, 0, 0.05);
147+
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
148+
box-shadow: inset 0 1px 0
149+
rgba(255, 255, 255, 0.2), 0 1px 2px
150+
rgba(0, 0, 0, 0.05);
151+
}
152+
153+
.btn.active, .btn:active {
154+
background-color:
155+
#E6E6E6;
156+
background-color:
157+
#D9D9D9 9;
158+
background-image: none;
159+
outline: 0;
160+
-webkit-box-shadow: inset 0 2px 4px
161+
rgba(0, 0, 0, 0.15), 0 1px 2px
162+
rgba(0, 0, 0, 0.05);
163+
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
164+
box-shadow: inset 0 2px 4px
165+
rgba(0, 0, 0, 0.15), 0 1px 2px
166+
rgba(0, 0, 0, 0.05);
167+
}
168+
169+
170+
#example-5 .different-flex-example > div:nth-child(2),
171+
#example-5 .final-flex-example > div:nth-child(2),
172+
#example-6 .ordering-example > div:nth-child(1)
173+
{
174+
background-image: -webkit-linear-gradient(top,
175+
#62C462,
176+
#51A351);
177+
background-image: -o-linear-gradient(top,
178+
#62C462,
179+
#51A351);
180+
background-image: -moz-linear-gradient(top,
181+
#62C462,
182+
#51A351);
183+
background-image: linear-gradient(top,
184+
#62C462,
185+
#51A351);
186+
}
187+
188+
189+
190+
/* Smartphones (landscape) ----------- */
191+
@media only screen and (min-width : 321px) {
192+
/* Styles */
193+
}
194+
195+
/* Smartphones (portrait) ----------- */
196+
@media only screen and (max-width : 320px) {
197+
198+
.example header h1, .example header p {
199+
margin: 0 0 4% 0;
200+
padding: 0;
201+
font-size: 1.1em;
202+
}
203+
204+
.example {
205+
margin-bottom: 5%;
206+
}
207+
208+
209+
}

‎images/100x100.gif

334 Bytes
Loading

‎images/150x150.gif

514 Bytes
Loading

‎images/200x200.gif

723 Bytes
Loading

‎images/50x50.gif

187 Bytes
Loading

‎images/nettuts-logo.jpg

925 Bytes
Loading

0 commit comments

Comments
 (0)