mirror/flexbox-patterns
1
0
Fork 0
mirror of https://github.com/cjcenizal/flexbox-patterns.git synced 2025-08-22 23:53:10 +02:00
Code Issues Releases Wiki Activity

Compare commits

base: mirror:0.0.1
Branches Tags
mirror:master
mirror:0.3.0 mirror:0.2.0 mirror:0.1.3 mirror:0.1.2 mirror:0.1.1 mirror:0.1.0 mirror:0.0.1
..
compare: mirror:0.2.0
Branches Tags
mirror:master
mirror:0.3.0 mirror:0.2.0 mirror:0.1.3 mirror:0.1.2 mirror:0.1.1 mirror:0.1.0 mirror:0.0.1

19 Commits
0.0.1 ... 0.2.0

Author SHA1 Message Date
CJ Cenizal
a1b5188de0 Merge pull request #10 from cjcenizal/feature/wrapping-patterns 
Add wrapping patterns.
 2016-12-18 12:42:18 -08:00
CJ Cenizal
8379097f52 Bump to 0.2.0. 2016-12-18 12:40:49 -08:00
CJ Cenizal
7354301f6b Reorder properties so that justify-content is placed before align-items, which makes a little more sense conceptually. 2016-12-18 12:14:10 -08:00
CJ Cenizal
767630e3a7 Add Photo, Gallery, and Mosaic examples. 2016-12-18 12:09:12 -08:00
CJ Cenizal
7b708f1a56 Remove unused src/index.html file. 2016-12-17 19:07:10 -08:00
CJ Cenizal (MacBook Air)
32b10cdc27 Bump to 0.1.3. 2016-05-24 13:09:42 -07:00
CJ Cenizal (MacBook Air)
ec3a380dba Bump to 0.1.2. 2016-05-24 13:08:55 -07:00
CJ Cenizal
9b9336056f Merge pull request #9 from cjcenizal/2/improvement/simplify-site-header 
[2]: Add additional elements to demonstrate value of sections within Site Header and Sidebar examples.
 2016-05-24 13:08:22 -07:00
CJ Cenizal (MacBook Air)
0c8747d500 [2]: Add additional elements to demonstrate value of sections within Site Header and Sidebar examples. 2016-05-24 13:06:25 -07:00
CJ Cenizal
18db3b20df Merge pull request #6 from cjcenizal/1/bug/fix-card-group-ie11 
[1]: Fix IE11 flex shorthand bug with card and cardGroup.
 2016-04-30 18:43:22 -07:00
CJ Cenizal (MacBook Air)
45193b80d2 [1]: Fix IE11 flex shorthand bug with card and cardGroup. 2016-04-30 18:39:12 -07:00
CJ Cenizal (MacBook Air)
a455706b56 Bump to 0.1.1. 2016-04-23 20:11:19 -07:00
CJ Cenizal
7f03ade1f7 Merge pull request #5 from RoberMac/master 
Fix: flex-grow default value is 0 and flex-shrink default value is 1
 2016-04-23 20:09:13 -07:00
RoberMac
9b5c57a4d2 Fix: flex-grow default value is 0 and flex-shrink default value is 1 2016-04-23 10:33:31 +08:00
CJ Cenizal (MacBook Air)
ac3799a277 Update README with accessibility info. 2016-04-21 15:52:07 -07:00
CJ Cenizal (MacBook Air)
340ff0d6d7 Bump to 0.1.0. 2016-04-21 15:33:54 -07:00
CJ Cenizal
90a709f4af Merge pull request #4 from cjcenizal/improvement/individual-examples 
Split examples into individual HTML files.
 2016-04-21 15:33:03 -07:00
CJ Cenizal (MacBook Air)
c63f70c734 Remove SCSS dependency and convert all .scss files into .css. 2016-04-21 15:07:26 -07:00
CJ Cenizal (MacBook Air)
cf91c1ffef Split examples into individual HTML files. 2016-04-21 13:13:52 -07:00
45 changed files with 1254 additions and 701 deletions
Expand all files Collapse all files

20
README.md
View File

@@ -1,6 +1,6 @@
# Flexbox Patterns
This repository contains the original SCSS used for the
This repository contains the original CSS used for the
components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com).
Feel free to use these styles however you like!
@@ -10,14 +10,18 @@ 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.
This command will concatenate the source CSS files into a single CSS file, and
then use PostCSS to add various vendor-prefixed properties. Open up
`dist/index.html` to see a demo page of the various flexbox patterns in the
browser.
## Things to keep in mind
_I don't recommend copy-pasting these examples directly into production code._
I'm only trying to demonstrate different ways of using flexbox through these
examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the `role` attribute). Before using this
code in production you should make sure it meets your accessibility needs.

BIN
dist/images/dog_1.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
dist/images/dog_2.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
dist/images/dog_3.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
dist/images/dog_4.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
dist/images/dog_5.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

290
dist/index.html vendored
View File

@@ -3,7 +3,7 @@
<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 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 href="styles.css" rel="stylesheet" type="text/css">
<style>
@@ -13,164 +13,194 @@
font-size: 14px;
line-height: 1.5;
}
.demo {
max-width: 500px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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 class="siteHeader__item siteHeaderButton">Log out</div>
</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>
<!-- 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>
<!-- 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>
<!-- Centered icon -->
<div class="demo">
<div class="centeredIcon">
<div class="icon fa fa-phone"></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>
<!-- 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>
<!-- This section gets pushed to the bottom-->
<div class="sideBar__section">
<div class="sideBar__item">Change theme</div>
<div class="sideBar__item">Legal</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>
<!-- 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>
<!-- 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>
<!-- Centered icon-->
<div class="demo"><div class="centeredIcon">
<div class="icon fa fa-phone"></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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- Photo-->
<div class="demo"><div class="photo photo1 photo--large">
Sup, dog
</div>
</div>
<!-- Gallery-->
<div class="demo"><div class="gallery">
<div class="photo photo1 photo--large">1</div>
<div class="photo photo2 photo--large">2</div>
<div class="photo photo3 photo--large">3</div>
<div class="photo photo4 photo--large">4</div>
<div class="photo photo5 photo--large">5</div>
<div class="photo photo6 photo--large">6</div>
<div class="photo photo7 photo--large">7</div>
<div class="photo photo8 photo--large">8</div>
<div class="photo photo9 photo--large">9</div>
<div class="photo photo10 photo--large">10</div>
</div>
</div>
<!-- Mosaic-->
<div class="demo"><div class="mosaic">
<div class="photo photo1 photo--small">1</div>
<div class="photo photo2 photo--medium">2</div>
<div class="photo photo3 photo--large">3</div>
<div class="photo photo4 photo--small">4</div>
<div class="photo photo5 photo--large">5</div>
<div class="photo photo6 photo--small">6</div>
<div class="photo photo7 photo--large">7</div>
<div class="photo photo8 photo--medium">8</div>
<div class="photo photo9 photo--medium">9</div>
<div class="photo photo10 photo--small">10</div>
<div class="photo photo11 photo--large">11</div>
<div class="photo photo12 photo--medium">12</div>
<div class="photo photo13 photo--large">13</div>
<div class="photo photo14 photo--medium">14</div>
</div>
</div>
</body>
</html>
</html>

847
dist/styles.css vendored
View File

File diff suppressed because it is too large Load Diff

7
dist/styles.css.map vendored
View File

@@ -1,7 +0,0 @@
{
"version": 3,
"mappings": "AAAA,aAAc;;;;;;;;EAQZ,OAAO,EAAE,IAAI;;AAGb,oBAAqB;EACnB,WAAW,EAAE,CAAC;EACd,YAAY,EAAE,CAAC;EACf,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;;AAGtB,OAAQ;EACN,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,QAAQ;EACjB,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO;EACzB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;;AAGpB,kBAAmB;EACjB,uBAAuB,EAAE,CAAC;EAC1B,0BAA0B,EAAE,CAAC;;AAG/B,mBAAoB;EAClB,sBAAsB,EAAE,CAAC;EACzB,yBAAyB,EAAE,CAAC;;AAG9B,MAAO;EACL,MAAM,EAAE,iBAAiB;EACzB,OAAO,EAAE,MAAM;EACf,aAAa,EAAE,CAAC;EAChB,UAAU,EAAE,IAAI;;AC1ClB,KAAM;;;;;;EAMJ,OAAO,EAAE,IAAI;EAEb,aAAa,EAAE,iBAAiB;;AAGhC,IAAK;EACH,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,QAAQ;EACjB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,qBAAqB;EAEpC,oBAAkB;IAChB,mBAAmB,EAAE,OAAO;;ACnBlC,WAAY;;;;;EAKV,OAAO,EAAE,IAAI;;;;;;EAOb,eAAe,EAAE,aAAa;EAE9B,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,OAAO;;AAGzB,oBAAqB;;;;;EAKnB,OAAO,EAAE,IAAI;;;;;;EAOb,WAAW,EAAE,MAAM;;AAGnB,iBAAkB;EAChB,OAAO,EAAE,QAAQ;EACjB,SAAS,EAAE,IAAI;EAEf,qCAAM;IACJ,WAAW,EAAE,GAAG;EAGlB,8CAA+B;IAC7B,KAAK,EAAE,OAAO;IACd,gBAAgB,EAAE,OAAO;IACzB,aAAa,EAAE,GAAG;;AAItB,eAAgB;EACd,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,CAAC;EACd,KAAK,EAAE,KAAK;;AAGd,iBAAkB;EAChB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;;ACxDpB,WAAY;;;;;EAKV,OAAO,EAAE,IAAI;;;;;EAMb,WAAW,EAAE,MAAM;;;;;;EAOnB,eAAe,EAAE,aAAa;EAE9B,UAAU,EAAE,iBAAiB;EAC7B,OAAO,EAAE,IAAI;;AAGb,oBAAqB;;;;EAInB,OAAO,EAAE,IAAI;;;;EAKb,WAAW,EAAE,MAAM;;AAIjB,qCAAM;EACJ,WAAW,EAAE,GAAG;;AAIpB,mBAAoB;EAClB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,CAAC;;AAGhB,kBAAmB;EAChB,SAAS,EAAE,2CAA2C;;AAG7D,4BAGC;EAFC,EAAK;IAAE,SAAS,EAAE,YAAY;EAC9B,IAAK;IAAE,SAAS,EAAE,cAAc;AAGlC,cAAe;EACb,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,iBAAiB;;AC5D3B,QAAS;;;;;;EAMP,OAAO,EAAE,IAAI;;;;;;EAOb,cAAc,EAAE,MAAM;;;;;;EAOtB,eAAe,EAAE,aAAa;EAE9B,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,iBAAiB;EAC/B,gBAAgB,EAAE,OAAO;EACzB,OAAO,EAAE,IAAI;;AAGb,cAAe;EACb,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,QAAQ;EACjB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EAEf,wCAA4B;IAC1B,gBAAgB,EAAE,OAAO;IACzB,aAAa,EAAE,GAAG;;ACrCxB,eAAgB;;;;;EAKd,OAAO,EAAE,IAAI;;;;;;EAOb,cAAc,EAAE,MAAM;;;;;;;EAQtB,WAAW,EAAE,MAAM;;;;;;EAOnB,eAAe,EAAE,MAAM;EAEvB,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,IAAI;;AAIX,6CAAM;EACJ,UAAU,EAAE,GAAG;;AAIjB,mBAAoB;EAClB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,CAAC;;AAGhB,oBAAqB;EACnB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;;AAGpB,sBAAuB;EACrB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;;AAGxB,KAAM;EACJ,KAAK,EAAE,OAAO;;AC3DhB,aAAc;;;;;EAKZ,OAAO,EAAE,IAAI;;;;;;EAOb,cAAc,EAAE,MAAM;;;;;EAMtB,WAAW,EAAE,MAAM;;;;;EAMnB,eAAe,EAAE,MAAM;EAEvB,MAAM,EAAE,iBAAiB;EACzB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,UAAU,EACR,2FAE6B;;AClCjC,gBAAiB;;;;;EAKf,OAAO,EAAE,IAAI;;;;;EAMb,WAAW,EAAE,MAAM;EAEnB,SAAS,EAAE,KAAK;EAChB,OAAO,EAAE,IAAI;EAEb,mCAAM;IACJ,UAAU,EAAE,iBAAiB;;AAIjC,yBAA0B;;;;;;;EAOxB,cAAc,EAAE,WAAW;;AAG3B;6BAC8B;EAC5B,OAAO,EAAE,QAAQ;;AAGnB,sBAAuB;EACrB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,CAAC;;AAGhB,6BAA8B;EAC5B,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AC3CnB,KAAM;;;;;EAKJ,OAAO,EAAE,IAAI;;;;;EAMb,cAAc,EAAE,MAAM;EAEtB,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,MAAM;;AAGhB,kBAAmB;;;;;EAKjB,OAAO,EAAE,IAAI;;;;;;;EAQb,cAAc,EAAE,MAAM;;;;;;EAOtB,WAAW,EAAE,MAAM;;;;;;EAOnB,eAAe,EAAE,MAAM;EAEvB,OAAO,EAAE,IAAI;;AAGb,sBAAuB;EACrB,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,IAAI;;AAGrB,sBAAuB;EACrB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;;AAGtB,YAAa;EACX,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,QAAQ;EACjB,UAAU,EAAE,iBAAiB;EAC7B,gBAAgB,EAAE,OAAO;;AAG7B,iBAAkB;EAChB,SAAS,EAAE,KAAK;;ACxElB,UAAW;;;;;EAKT,OAAO,EAAE,IAAI;EAEb,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,MAAM;;AAGhB,gBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Bf,IAAI,EAAE,KAAK;EAEX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,CAAC;EAEhB,mCAAM;IACJ,WAAW,EAAE,iBAAiB;;AAIlC,2BAA4B;;;;;;;EAO1B,IAAI,EAAE,QAAQ",
"sources": ["../src/styles/stepper-input.scss","../src/styles/tabs.scss","../src/styles/site-header.scss","../src/styles/form-footer.scss","../src/styles/side-bar.scss","../src/styles/centered-prompt.scss","../src/styles/centered-icon.scss","../src/styles/feature-list.scss","../src/styles/card.scss","../src/styles/card-group.scss"],
"names": [],
"file": "styles.css"
}

11
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "flexbox-patterns",
"version": "0.0.1",
"version": "0.2.0",
"description": "Patterns for using flexbox CSS to build awesome UI components",
"repository": "cjcenizal/flexbox-patterns",
"author": {
@@ -10,9 +10,16 @@
},
"devDependencies": {
"autoprefixer": "6.2.3",
"css-concat": "0.0.4",
"cpx": "1.3.1",
"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 copyImages && npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
"copyImages": "cpx \"src/images/**/*\" dist/images",
"compileCss": "css-concat src/index.css dist/styles.css",
"autoPrefixCss": "postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css",
"compileHtml": "jade src/index.jade -P -o dist"
}
}

23
src/examples/card-group.html Normal file
View 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
View 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
View File

@@ -0,0 +1,3 @@
<div class="centeredIcon">
<div class="icon fa fa-phone"></div>
</div>

8
src/examples/centered-prompt.html Normal file
View 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&rsquo;s take a look around.</div>
<div class="centeredPrompt__item button">Begin tour</div>
</div>

18
src/examples/feature-list.html Normal file
View 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&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>

13
src/examples/form-footer.html Normal file
View 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>&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>

12
src/examples/gallery.html Normal file
View File

@@ -0,0 +1,12 @@
<div class="gallery">
<div class="photo photo1 photo--large">1</div>
<div class="photo photo2 photo--large">2</div>
<div class="photo photo3 photo--large">3</div>
<div class="photo photo4 photo--large">4</div>
<div class="photo photo5 photo--large">5</div>
<div class="photo photo6 photo--large">6</div>
<div class="photo photo7 photo--large">7</div>
<div class="photo photo8 photo--large">8</div>
<div class="photo photo9 photo--large">9</div>
<div class="photo photo10 photo--large">10</div>
</div>

16
src/examples/mosaic.html Normal file
View File

@@ -0,0 +1,16 @@
<div class="mosaic">
<div class="photo photo1 photo--small">1</div>
<div class="photo photo2 photo--medium">2</div>
<div class="photo photo3 photo--large">3</div>
<div class="photo photo4 photo--small">4</div>
<div class="photo photo5 photo--large">5</div>
<div class="photo photo6 photo--small">6</div>
<div class="photo photo7 photo--large">7</div>
<div class="photo photo8 photo--medium">8</div>
<div class="photo photo9 photo--medium">9</div>
<div class="photo photo10 photo--small">10</div>
<div class="photo photo11 photo--large">11</div>
<div class="photo photo12 photo--medium">12</div>
<div class="photo photo13 photo--large">13</div>
<div class="photo photo14 photo--medium">14</div>
</div>

3
src/examples/photo.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="photo photo1 photo--large">
Sup, dog
</div>

13
src/examples/side-bar.html Normal file
View File

@@ -0,0 +1,13 @@
<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">Change theme</div>
<div class="sideBar__item">Legal</div>
</div>
</div>

16
src/examples/site-header.html Normal file
View File

@@ -0,0 +1,16 @@
<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 class="siteHeader__item siteHeaderButton">Log out</div>
</div>
</div>

5
src/examples/stepper-input.html Normal file
View 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
View 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>

BIN
src/images/dog_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/images/dog_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/images/dog_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/images/dog_4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/images/dog_5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

17
src/index.css Normal file
View File

@@ -0,0 +1,17 @@
* {
box-sizing: border-box;
}
@import url("./styles/stepper-input.css");
@import url("./styles/tabs.css");
@import url("./styles/site-header.css");
@import url("./styles/form-footer.css");
@import url("./styles/side-bar.css");
@import url("./styles/centered-prompt.css");
@import url("./styles/centered-icon.css");
@import url("./styles/feature-list.css");
@import url("./styles/card.css");
@import url("./styles/card-group.css");
@import url("./styles/photo.css");
@import url("./styles/gallery.css");
@import url("./styles/mosaic.css");

176
src/index.html
View File

@@ -1,176 +0,0 @@
<!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>

97
src/index.jade Normal file
View File

@@ -0,0 +1,97 @@
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
// Stepper input
.demo
include ./examples/stepper-input.html
// Tabs
.demo
include ./examples/tabs.html
// Site header
.demo
include ./examples/site-header.html
// Form footer
.demo
include ./examples/form-footer.html
// Side bar
.demo
include ./examples/side-bar.html
// Centered prompt
.demo
include ./examples/centered-prompt.html
// Centered icon
.demo
include ./examples/centered-icon.html
// Feature list
.demo
include ./examples/feature-list.html
// Card
.demo
include ./examples/card.html
// Card group
.demo
include ./examples/card-group.html
// Photo
.demo
include ./examples/photo.html
// Gallery
.demo
include ./examples/gallery.html
// Mosaic
.demo
include ./examples/mosaic.html

11
src/index.scss
View File

@@ -1,11 +0,0 @@
@import "styles/stepper-input";
@import "styles/tabs";
@import "styles/site-header";
@import "styles/form-footer";
@import "styles/side-bar";
@import "styles/centered-prompt";
@import "styles/centered-icon";
@import "styles/feature-list";
@import "styles/card";
@import "styles/card-group";

26
src/styles/card-group.scss → src/styles/card-group.css
View File

@@ -17,13 +17,13 @@
* properties. These properties control how the
* element resizes to fill its container.
*
* We'll also set flex-grow to 1 so that it
* will expand to fill its container. (The
* default value is 1.)
* We'll set flex-grow to 1 so that it will
* expand to fill its container. (The default
* default value is 0.)
*
* We'll set flex-shrink to 1 so that the element
* will shrink as its container gets smaller.
* (The default value is 0.)
* We'll also set flex-shrink to 1 so that the
* element will shrink as its container gets
* smaller. (The default value is 1.)
*
* Last, we set flex-basis to 0 so that its
* size is solely determined by the size of
@@ -36,15 +36,21 @@
* shrink with its container and siblings, but
* they will all have the same size, even if they
* have different amounts of content.
*
* NOTE: IE11 ignores flex short-hand declarations
* with unitless flex-basis values. So we have to
* use 0% instead of 0 as a workaround. You can
* find more info at:
* github.com/philipwalton/flexbugs.
*/
flex: 1 1 0;
flex: 1 1 0%;
border: none;
border-radius: 0;
}
& + & {
border-left: 1px solid #D7DBDD;
}
.cardGroup__card + .cardGroup__card {
border-left: 1px solid #D7DBDD;
}
.cardGroup__cardDescription {

23
src/styles/card.scss → src/styles/card.css
View File

@@ -26,26 +26,26 @@
/**
* We're going to lay out this element's children
* just like in the "Centered prompt" example.
* First we'll rotate the main axis so that the
* First we'll rotate the main axis so that the
* children are laid out vertically.
*/
flex-direction: column;
/**
* Just like in the "Centered prompt" example,
* we'll align the children in the center, along
* the main axis.
*/
align-items: center;
/**
* And just like in the "Centered prompt", we'll
* Just like in the "Centered prompt", we'll
* group the children in the center of their
* container.
*/
justify-content: center;
padding: 15px;
/**
* And just like in the "Centered prompt" example,
* we'll align the children in the center, along
* the main axis.
*/
align-items: center;
padding: 15px 0;
}
.card__descriptionIcon {
@@ -57,6 +57,7 @@
color: #57727C;
font-size: 12px;
text-align: center;
max-width: calc(100% - 30px);
}
.card__price {
@@ -71,4 +72,4 @@
.card--fixedWidth {
max-width: 120px;
}
}

21
src/styles/centered-icon.scss → src/styles/centered-icon.css
View File

@@ -12,25 +12,26 @@
*/
flex-direction: column;
/**
* And just like in that example, align the children
* in the center, along the main axis.
*/
align-items: center;
/**
* Same thing here as before: group the children
* together in the center of their container.
*/
justify-content: center;
/**
* Just like in the "Centered prmopt" example,
* align the children in the center, along the
* main axis.
*/
align-items: center;
border: 1px solid #D7DBDD;
font-size: 40px;
width: 90px;
height: 90px;
border-radius: 100%;
box-shadow:
0 2px 1px rgba(#000000, 0.05),
0 2px 3px rgba(#000000, 0.05),
0 4px 8px rgba(#000000, 0.05);
}
0 2px 1px rgba(0, 0, 0, 0.05),
0 2px 3px rgba(0, 0, 0, 0.05),
0 4px 8px rgba(0, 0, 0, 0.05);
}

22
src/styles/centered-prompt.scss → src/styles/centered-prompt.css
View File

@@ -12,6 +12,13 @@
*/
flex-direction: column;
/**
* Instead of pushing the children apart, as in
* previous examples, we will group them together
* in the center of their container.
*/
justify-content: center;
/**
* Align the children in the center, along
* the main axis. Because the direction is
@@ -20,21 +27,12 @@
*/
align-items: center;
/**
* Instead of pushing the children apart, as in
* previous examples, we will group them together
* in the center of their container.
*/
justify-content: center;
min-height: 300px;
padding: 10px;
}
.centeredPrompt__item {
& + & {
margin-top: 5px;
}
.centeredPrompt__item + .centeredPrompt__item {
margin-top: 5px;
}
.centeredPromptIcon {
@@ -58,4 +56,4 @@
.icon {
color: #BCD2DA;
}
}

14
src/styles/feature-list.scss → src/styles/feature-list.css
View File

@@ -4,7 +4,7 @@
* flexbox, which is horizontal by default.
*/
display: flex;
/**
* Align the children in the center, along
* the main axis, which is horizontal in this case.
@@ -13,10 +13,10 @@
max-width: 400px;
padding: 10px;
& + & {
border-top: 1px solid #D7DBDD;
}
}
.featureListItem + .featureListItem {
border-top: 1px solid #D7DBDD;
}
.featureListItem--reverse {
@@ -29,7 +29,7 @@
flex-direction: row-reverse;
}
.featureListItem__icon,
.featureListItem__icon,
.featureListItem__description {
padding: 5px 15px;
}
@@ -42,4 +42,4 @@
.featureListItem__description {
color: #86969C;
font-size: 12px;
}
}

24
src/styles/form-footer.scss → src/styles/form-footer.css
View File

@@ -6,18 +6,18 @@
display: flex;
/**
* Align the children in the center, along
* the main axis, which is horizontal in this case.
*/
align-items: center;
/**
* Make the container put as much space as possible
* between its children, with the children at either
* end laying flush against the container's edges.
*/
justify-content: space-between;
/**
* Align the children in the center, along
* the main axis, which is horizontal in this case.
*/
align-items: center;
border-top: 1px solid #D7DBDD;
padding: 10px;
}
@@ -27,17 +27,15 @@
* This container orders items horizontally.
*/
display: flex;
/**
* It aligns them vertically in the center.
*/
align-items: center;
}
.formFooter__item {
& + & {
margin-left: 5px;
}
.formFooter__item + .formFooter__item {
margin-left: 5px;
}
.formFooterFeedback {
@@ -47,7 +45,7 @@
}
.formFooterSpinner {
animation: formFooterSpinner 1s infinite steps(8, end);
animation: formFooterSpinner 1s infinite steps(8, end);
}
@keyframes formFooterSpinner {
@@ -59,4 +57,4 @@
color: #16A2D7;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}
}

54
src/styles/gallery.css Normal file
View File

@@ -0,0 +1,54 @@
.gallery {
/**
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: flex;
/**
* Allow the children to wrap to the next "row",
* instead of trying to squeeze them all into
* a single row.
*/
flex-wrap: wrap;
width: 478px;
padding: 5px;
border: 1px solid #D7DBDD;
}
.photo2 {
background-image: url('../images/dog_2.jpg');
}
.photo3 {
background-image: url('../images/dog_3.jpg');
}
.photo4 {
background-image: url('../images/dog_4.jpg');
}
.photo5 {
background-image: url('../images/dog_5.jpg');
}
.photo6 {
background-image: url('../images/dog_1.jpg');
}
.photo7 {
background-image: url('../images/dog_2.jpg');
}
.photo8 {
background-image: url('../images/dog_3.jpg');
}
.photo9 {
background-image: url('../images/dog_4.jpg');
}
.photo10 {
background-image: url('../images/dog_5.jpg');
}

78
src/styles/mosaic.css Normal file
View File

@@ -0,0 +1,78 @@
.mosaic {
/**
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: flex;
/**
* Set the main axis to be vertical instead of
* horizontal, so now the children are laid out
* vertically, from top to bottom.
*/
flex-direction: column;
/**
* Now when the children wrap, they'll wrap to the
* next "column".
*/
flex-wrap: wrap;
width: 478px;
height: 370px;
padding: 6px;
border: 1px solid #D7DBDD;
overflow: auto;
}
.photo:last-child {
/**
* This is the first part of a flexbox hack.
* It addresses a problem flexbox has with scrolling
* content. Without this hack, the children on the
* far right of the container will be flush against
* the container's right edge.
*/
position: relative;
}
.photo:last-child::after {
/**
* This is the second part of the hack. It creates
* an invisible element on the last child that
* forces a space between the child and the right
* edge of the container.
*/
display: block;
width: 11px;
height: 1px;
position: absolute;
top: 0;
left: 100%;
visibility: hidden;
content: "";
}
.photo--small {
height: 70px;
}
.photo--medium {
height: 90px;
}
.photo11 {
background-image: url('../images/dog_1.jpg');
}
.photo12 {
background-image: url('../images/dog_2.jpg');
}
.photo13 {
background-image: url('../images/dog_3.jpg');
}
.photo14 {
background-image: url('../images/dog_4.jpg');
}

38
src/styles/photo.css Normal file
View File

@@ -0,0 +1,38 @@
.photo {
/**
* Lay out the children of this container with
* flexbox, which is horizontal by default.
*/
display: flex;
/**
* Align all the children to the end of the main
* axis. This is the right side, by default.
*/
justify-content: flex-end;
/**
* Align all the children to the end of the
* secondary axis. This is the bottom, by default.
*/
align-items: flex-end;
width: 145px;
margin: 5px;
padding: 5px 10px;
font-size: 18px;
font-weight: bold;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
color: #FFFFFF;
background-size: cover;
background-position: center;
border-radius: 4px;
}
.photo--large {
height: 130px;
}
.photo1 {
background-image: url('../images/dog_1.jpg');
}

10
src/styles/side-bar.scss → src/styles/side-bar.css
View File

@@ -32,9 +32,9 @@
padding: 5px 10px;
color: #16A2D7;
font-size: 12px;
}
&.is-side-bar-item-selected {
background-color: #EEF3F5;
border-radius: 4px;
}
}
.sideBar__item.is-side-bar-item-selected {
background-color: #EEF3F5;
border-radius: 4px;
}

18
src/styles/site-header.scss → src/styles/site-header.css
View File

@@ -34,16 +34,16 @@
.siteHeader__item {
padding: 5px 15px;
font-size: 12px;
}
& + & {
margin-left: 5px;
}
.siteHeader__item + .siteHeader__item {
margin-left: 5px;
}
&.is-site-header-item-selected {
color: #FFFFFF;
background-color: #415F69;
border-radius: 4px;
}
.siteHeader__item.is-site-header-item-selected {
color: #FFFFFF;
background-color: #415F69;
border-radius: 4px;
}
.siteHeaderLogo {
@@ -55,4 +55,4 @@
.siteHeaderButton {
cursor: pointer;
color: #D9E9EF;
}
}

0
src/styles/stepper-input.scss → src/styles/stepper-input.css
View File

8
src/styles/tabs.scss → src/styles/tabs.css
View File

@@ -15,8 +15,8 @@
color: #16A2D7;
font-size: 12px;
border-bottom: 2px solid transparent;
&.is-tab-selected {
border-bottom-color: #4EBBE4;
}
}
.tab.is-tab-selected {
border-bottom-color: #4EBBE4;
}