mirror of
https://github.com/cjcenizal/flexbox-patterns.git
synced 2025-08-02 22:27:36 +02:00
Split examples into individual HTML files.
This commit is contained in:
CJ Cenizal (MacBook Air)
260
dist/index.html
vendored
260
dist/index.html
vendored
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Flexbox Patterns Demo Page</title>
|
<title>Flexbox Patterns Demo Page</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700|Ubuntu+Mono" rel="stylesheet" type="text/css">
|
<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
|
||||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||||
<style>
|
<style>
|
||||||
@@ -13,164 +13,154 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo {
|
.demo {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Card group-->
|
||||||
|
<div class="demo"><div class="cardGroup">
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Trial</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">Free!</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-trophy card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$10.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-bolt card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$6,000.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Card group -->
|
</div>
|
||||||
<div class="demo">
|
<!-- Card-->
|
||||||
<div class="cardGroup">
|
<div class="demo"><div class="card card--fixedWidth">
|
||||||
<div class="card cardGroup__card">
|
<div class="card__description">
|
||||||
<div class="card__description cardGroup__cardDescription">
|
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
||||||
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
|
<div class="card__descriptionText">Science potion</div>
|
||||||
<div class="card__descriptionText">Trial</div>
|
</div>
|
||||||
</div>
|
<div class="card__price">Costs $5</div>
|
||||||
<div class="card__price">Free!</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="card cardGroup__card">
|
</div>
|
||||||
<div class="card__description cardGroup__cardDescription">
|
<!-- Centered icon-->
|
||||||
<div class="icon fa fa-trophy card__descriptionIcon"></div>
|
<div class="demo"><div class="centeredIcon">
|
||||||
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
|
<div class="icon fa fa-phone"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card__price">$10.00</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card cardGroup__card">
|
<!-- Centered prompt-->
|
||||||
<div class="card__description cardGroup__cardDescription">
|
<div class="demo"><div class="centeredPrompt">
|
||||||
<div class="icon fa fa-bolt card__descriptionIcon"></div>
|
<div class="centeredPrompt__item centeredPromptIcon">
|
||||||
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
|
<div class="icon fa fa-smile-o"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card__price">$6,000.00</div>
|
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
||||||
</div>
|
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
||||||
|
<div class="centeredPrompt__item button">Begin tour</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Feature list-->
|
||||||
|
<div class="demo"><div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-calendar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem featureListItem--reverse">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-dashboard"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-envelope"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Form footer-->
|
||||||
|
<div class="demo"><div class="formFooter">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item formFooterFeedback">
|
||||||
|
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
<!-- Card -->
|
<div class="formFooter__section">
|
||||||
<div class="demo">
|
<div class="formFooter__item button button--clear">Reset</div>
|
||||||
<div class="card card--fixedWidth">
|
<div class="formFooter__item button">Save</div>
|
||||||
<div class="card__description">
|
|
||||||
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
|
||||||
<div class="card__descriptionText">Science potion</div>
|
|
||||||
</div>
|
|
||||||
<div class="card__price">Costs $5</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Centered icon -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="centeredIcon">
|
|
||||||
<div class="icon fa fa-phone"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Side bar-->
|
||||||
|
<div class="demo"><div class="sideBar">
|
||||||
|
<!-- This section gets pushed to the top-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
||||||
|
<div class="sideBar__item">Contacts</div>
|
||||||
|
<div class="sideBar__item">Account</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- This section gets pushed to the bottom-->
|
||||||
<!-- Centered prompt -->
|
<div class="sideBar__section">
|
||||||
<div class="demo">
|
<div class="sideBar__item">Legal</div>
|
||||||
<div class="centeredPrompt">
|
|
||||||
<div class="centeredPrompt__item centeredPromptIcon">
|
|
||||||
<div class="icon fa fa-smile-o"></div>
|
|
||||||
</div>
|
|
||||||
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
|
||||||
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
|
||||||
<div class="centeredPrompt__item button">Begin tour</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Feature list -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="featureListItem">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-calendar"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="featureListItem featureListItem--reverse">
|
<!-- Site header-->
|
||||||
<div class="featureListItem__icon">
|
<div class="demo"><div class="siteHeader">
|
||||||
<div class="icon fa fa-dashboard"></div>
|
<!-- This section gets pushed to the left side-->
|
||||||
</div>
|
<div class="siteHeader__section">
|
||||||
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
<div class="siteHeader__item siteHeaderLogo">
|
||||||
</div>
|
<div class="fa fa-inbox"></div>
|
||||||
<div class="featureListItem">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-envelope"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
<!-- Form footer -->
|
<div class="siteHeader__section">
|
||||||
<div class="demo">
|
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
||||||
<div class="formFooter">
|
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item formFooterFeedback">
|
|
||||||
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item button button--clear">Reset</div>
|
|
||||||
<div class="formFooter__item button">Save</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Side bar -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="sideBar">
|
|
||||||
<!-- This section gets pushed to the top-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
|
||||||
<div class="sideBar__item">Contacts</div>
|
|
||||||
<div class="sideBar__item">Account</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the bottom-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item">Legal</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Stepper input-->
|
||||||
|
<div class="demo"><div class="stepperInput">
|
||||||
|
<button class="button button--addOnLeft">-</button>
|
||||||
|
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
||||||
|
<button class="button button--addOnRight">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Site header -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="siteHeader">
|
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderLogo">
|
|
||||||
<div class="fa fa-inbox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Tabs-->
|
||||||
|
<div class="demo"><div class="tabs">
|
||||||
|
<div class="tab is-tab-selected">Tab 1</div>
|
||||||
|
<div class="tab">Tab 2</div>
|
||||||
|
<div class="tab">Tab 3</div>
|
||||||
|
<div class="tab">Tab 4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Stepper input -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="stepperInput">
|
|
||||||
<button class="button button--addOnLeft">-</button>
|
|
||||||
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
|
||||||
<button class="button button--addOnRight">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tabs -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="tabs">
|
|
||||||
<div class="tab is-tab-selected">Tab 1</div>
|
|
||||||
<div class="tab">Tab 2</div>
|
|
||||||
<div class="tab">Tab 3</div>
|
|
||||||
<div class="tab">Tab 4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -10,9 +10,13 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "6.2.3",
|
"autoprefixer": "6.2.3",
|
||||||
|
"jade": "1.11.0",
|
||||||
"postcss-cli": "2.3.3"
|
"postcss-cli": "2.3.3"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
23
src/examples/card-group.html
Normal file
23
src/examples/card-group.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<div class="cardGroup">
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Trial</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">Free!</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-trophy card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$10.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-bolt card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$6,000.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
7
src/examples/card.html
Normal file
7
src/examples/card.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<div class="card card--fixedWidth">
|
||||||
|
<div class="card__description">
|
||||||
|
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Science potion</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">Costs $5</div>
|
||||||
|
</div>
|
||||||
3
src/examples/centered-icon.html
Normal file
3
src/examples/centered-icon.html
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<div class="centeredIcon">
|
||||||
|
<div class="icon fa fa-phone"></div>
|
||||||
|
</div>
|
||||||
8
src/examples/centered-prompt.html
Normal file
8
src/examples/centered-prompt.html
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<div class="centeredPrompt">
|
||||||
|
<div class="centeredPrompt__item centeredPromptIcon">
|
||||||
|
<div class="icon fa fa-smile-o"></div>
|
||||||
|
</div>
|
||||||
|
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
||||||
|
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
||||||
|
<div class="centeredPrompt__item button">Begin tour</div>
|
||||||
|
</div>
|
||||||
18
src/examples/feature-list.html
Normal file
18
src/examples/feature-list.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-calendar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem featureListItem--reverse">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-dashboard"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-envelope"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
||||||
|
</div>
|
||||||
13
src/examples/form-footer.html
Normal file
13
src/examples/form-footer.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<div class="formFooter">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item formFooterFeedback">
|
||||||
|
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item button button--clear">Reset</div>
|
||||||
|
<div class="formFooter__item button">Save</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
12
src/examples/side-bar.html
Normal file
12
src/examples/side-bar.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<div class="sideBar">
|
||||||
|
<!-- This section gets pushed to the top-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
||||||
|
<div class="sideBar__item">Contacts</div>
|
||||||
|
<div class="sideBar__item">Account</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the bottom-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item">Legal</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
15
src/examples/site-header.html
Normal file
15
src/examples/site-header.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<div class="siteHeader">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="siteHeader__section">
|
||||||
|
<div class="siteHeader__item siteHeaderLogo">
|
||||||
|
<div class="fa fa-inbox"></div>
|
||||||
|
</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
|
<div class="siteHeader__section">
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
5
src/examples/stepper-input.html
Normal file
5
src/examples/stepper-input.html
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<div class="stepperInput">
|
||||||
|
<button class="button button--addOnLeft">-</button>
|
||||||
|
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
||||||
|
<button class="button button--addOnRight">+</button>
|
||||||
|
</div>
|
||||||
6
src/examples/tabs.html
Normal file
6
src/examples/tabs.html
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<div class="tabs">
|
||||||
|
<div class="tab is-tab-selected">Tab 1</div>
|
||||||
|
<div class="tab">Tab 2</div>
|
||||||
|
<div class="tab">Tab 3</div>
|
||||||
|
<div class="tab">Tab 4</div>
|
||||||
|
</div>
|
||||||
85
src/index.jade
Normal file
85
src/index.jade
Normal file
@@ -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
|
||||||
Reference in New Issue
Block a user