diff --git a/dist/index.html b/dist/index.html index d387c44..5bb0c37 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,7 +3,7 @@ Flexbox Patterns Demo Page - + + +
+
+
+
+
Trial
+
+
Free!
+
+
+
+
+
Basic tier
(most popular)
+
+
$10.00
+
+
+
+
+
Advanced tier
(only for enterprise-level professionals)
+
+
$6,000.00
+
+
- -
-
-
-
-
-
Trial
-
-
Free!
-
-
-
-
-
Basic tier
(most popular)
-
-
$10.00
-
-
-
-
-
Advanced tier
(only for enterprise-level professionals)
-
-
$6,000.00
-
+
+ +
+
+
+
Science potion
+
+
Costs $5
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
Welcome to the app!
+
Thanks for signing up. Let’s take a look around.
+
Begin tour
+
+ +
+ +
+
+
+
+
The calendar feature makes scheduling a snap.
+
+
+
+
+
+
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
+
+
+
+
+
+
You can get notified by email or SMS.
+
+ +
+ +
+ +
+
+  Saving...
- - -
-
-
-
-
Science potion
-
-
Costs $5
-
+ +
+
Reset
+
Save
+
- -
-
-
+ +
+ +
+
Inbox
+
Contacts
+
Account
- - -
-
-
-
-
-
Welcome to the app!
-
Thanks for signing up. Let’s take a look around.
-
Begin tour
-
+ +
+
Legal
+
- -
-
-
-
-
-
The calendar feature makes scheduling a snap.
-
-
-
-
-
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
-
-
-
-
-
-
You can get notified by email or SMS.
+ +
+ +
+ +
Inbox
+
Sent
+
Trash
- - -
-
- -
-
-  Saving... -
-
- -
-
Reset
-
Save
-
-
+ +
+
Settings
+
- -
-
- -
-
Inbox
-
Contacts
-
Account
-
- -
-
Legal
-
-
+ +
+ + + +
- -
-
- -
- -
Inbox
-
Sent
-
Trash
-
- -
-
Settings
-
-
+ +
+
Tab 1
+
Tab 2
+
Tab 3
+
Tab 4
+
- -
-
- - -
-
- - -
-
-
Tab 1
-
Tab 2
-
Tab 3
-
Tab 4
-
-
- - + \ No newline at end of file diff --git a/package.json b/package.json index bf2d650..530397f 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,13 @@ }, "devDependencies": { "autoprefixer": "6.2.3", + "jade": "1.11.0", "postcss-cli": "2.3.3" }, "scripts": { - "build": "sass src/index.scss dist/styles.css && node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css && cp src/index.html dist/index.html" + "build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml", + "compileCss": "sass src/index.scss dist/styles.css", + "autoPrefixCss": "node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css", + "compileHtml": "./node_modules/.bin/jade src/index.jade -P -o dist" } } diff --git a/src/examples/card-group.html b/src/examples/card-group.html new file mode 100644 index 0000000..cea107c --- /dev/null +++ b/src/examples/card-group.html @@ -0,0 +1,23 @@ +
+
+
+
+
Trial
+
+
Free!
+
+
+
+
+
Basic tier
(most popular)
+
+
$10.00
+
+
+
+
+
Advanced tier
(only for enterprise-level professionals)
+
+
$6,000.00
+
+
diff --git a/src/examples/card.html b/src/examples/card.html new file mode 100644 index 0000000..910e46f --- /dev/null +++ b/src/examples/card.html @@ -0,0 +1,7 @@ +
+
+
+
Science potion
+
+
Costs $5
+
diff --git a/src/examples/centered-icon.html b/src/examples/centered-icon.html new file mode 100644 index 0000000..f38b01e --- /dev/null +++ b/src/examples/centered-icon.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/src/examples/centered-prompt.html b/src/examples/centered-prompt.html new file mode 100644 index 0000000..961de3c --- /dev/null +++ b/src/examples/centered-prompt.html @@ -0,0 +1,8 @@ +
+
+
+
+
Welcome to the app!
+
Thanks for signing up. Let’s take a look around.
+
Begin tour
+
diff --git a/src/examples/feature-list.html b/src/examples/feature-list.html new file mode 100644 index 0000000..2546603 --- /dev/null +++ b/src/examples/feature-list.html @@ -0,0 +1,18 @@ +
+
+
+
+
The calendar feature makes scheduling a snap.
+
+
+
+
+
+
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
+
+
+
+
+
+
You can get notified by email or SMS.
+
diff --git a/src/examples/form-footer.html b/src/examples/form-footer.html new file mode 100644 index 0000000..6786220 --- /dev/null +++ b/src/examples/form-footer.html @@ -0,0 +1,13 @@ +
+ +
+
+  Saving... +
+
+ +
+
Reset
+
Save
+
+
diff --git a/src/examples/side-bar.html b/src/examples/side-bar.html new file mode 100644 index 0000000..39b9bdb --- /dev/null +++ b/src/examples/side-bar.html @@ -0,0 +1,12 @@ +
+ +
+
Inbox
+
Contacts
+
Account
+
+ +
+
Legal
+
+
diff --git a/src/examples/site-header.html b/src/examples/site-header.html new file mode 100644 index 0000000..df7575b --- /dev/null +++ b/src/examples/site-header.html @@ -0,0 +1,15 @@ +
+ +
+ +
Inbox
+
Sent
+
Trash
+
+ +
+
Settings
+
+
diff --git a/src/examples/stepper-input.html b/src/examples/stepper-input.html new file mode 100644 index 0000000..56bbf1a --- /dev/null +++ b/src/examples/stepper-input.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/src/examples/tabs.html b/src/examples/tabs.html new file mode 100644 index 0000000..08ef746 --- /dev/null +++ b/src/examples/tabs.html @@ -0,0 +1,6 @@ +
+
Tab 1
+
Tab 2
+
Tab 3
+
Tab 4
+
diff --git a/src/index.jade b/src/index.jade new file mode 100644 index 0000000..171c830 --- /dev/null +++ b/src/index.jade @@ -0,0 +1,85 @@ +doctype html +html(lang='en') + head + + title Flexbox Patterns Demo Page + + meta( + name="viewport" + content="width=device-width, initial-scale=1" + ) + + //- Fonts + link( + href="http://fonts.googleapis.com/css?family=Lato:400" + rel="stylesheet" + type="text/css" + ) + + //- Font aweosome icons + link( + rel="stylesheet" + href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" + ) + + //- CSS + link( + href="styles.css" + rel="stylesheet" + type="text/css" + ) + + style. + body { + padding: 40px; + font-family: "Lato", "Helvetica", sans-serif; + font-size: 14px; + line-height: 1.5; + } + + .demo { + max-width: 500px; + margin-bottom: 40px; + } + + body + + // Card group + .demo + include ./examples/card-group.html + + // Card + .demo + include ./examples/card.html + + // Centered icon + .demo + include ./examples/centered-icon.html + + // Centered prompt + .demo + include ./examples/centered-prompt.html + + // Feature list + .demo + include ./examples/feature-list.html + + // Form footer + .demo + include ./examples/form-footer.html + + // Side bar + .demo + include ./examples/side-bar.html + + // Site header + .demo + include ./examples/site-header.html + + // Stepper input + .demo + include ./examples/stepper-input.html + + // Tabs + .demo + include ./examples/tabs.html