Skip to content

Commit

Permalink
Initial commit: a bunch of patterns and a build command.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjcenizal
cjcenizal committed Jan 3, 2016
0 parents commit 6f5b31c
Show file tree
Hide file tree
Showing 18 changed files with 1,415 additions and 0 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
.DS_Store
.sass-cache
*.log
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Flexbox Patterns

This repository contains the original SCSS used for the
components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com).
Feel free to use these styles however you like!

## Getting started

Assuming you have Node installed, you can install the project dependencies with
`npm install`. This will install PostCSS and Autoprefixer; two critical tools
for making your CSS cross-browser compatible.

This project also requires you have [SASS](http://sass-lang.com/) installed
(`sudo gem install sass`).

## Commands

`npm run build`

I've chosen to write the styles with SCSS since it's widely adopted and I've
found that it makes me more productive. This command will compile the SCSS into
CSS and add various vendor-prefixed properties. Open up `dist/index.html`
to see a demo page of the various flexbox patterns in the browser.
176 changes: 176 additions & 0 deletions dist/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox Patterns Demo Page</title>
<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 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">
<style>
body {
padding: 40px;
font-family: "Lato", "Helvetica", sans-serif;
font-size: 14px;
line-height: 1.5;
}

.demo {
max-width: 500px;
margin-bottom: 40px;
}
</style>
</head>
<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>
</div>

<!-- Card -->
<div class="demo">
<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>
</div>

<!-- Centered icon -->
<div class="demo">
<div class="centeredIcon">
<div class="icon fa fa-phone"></div>
</div>
</div>

<!-- Centered prompt -->
<div class="demo">
<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&rsquo;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&rsquo;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>&nbsp;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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>
</html>
Loading

0 comments on commit 6f5b31c

Please sign in to comment.