mirror of
https://github.com/cjcenizal/flexbox-patterns.git
synced 2025-08-29 18:40:28 +02:00
Add Photo, Gallery, and Mosaic examples.
This commit is contained in:
CJ Cenizal
214
dist/index.html
vendored
214
dist/index.html
vendored
@@ -22,77 +22,39 @@
|
||||
</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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- Centered icon-->
|
||||
<div class="demo"><div class="centeredIcon">
|
||||
<div class="icon fa fa-phone"></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>
|
||||
<!-- Centered prompt-->
|
||||
<div class="demo"><div class="centeredPrompt">
|
||||
<div class="centeredPrompt__item centeredPromptIcon">
|
||||
<div class="icon fa fa-smile-o"></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 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>
|
||||
<!-- Feature list-->
|
||||
<div class="demo"><div class="featureListItem">
|
||||
<div class="featureListItem__icon">
|
||||
<div class="icon fa fa-calendar"></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 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>
|
||||
@@ -128,39 +90,115 @@
|
||||
</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>
|
||||
<!-- Centered prompt-->
|
||||
<div class="demo"><div class="centeredPrompt">
|
||||
<div class="centeredPrompt__item centeredPromptIcon">
|
||||
<div class="icon fa fa-smile-o"></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 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>
|
||||
<!-- Centered icon-->
|
||||
<div class="demo"><div class="centeredIcon">
|
||||
<div class="icon fa fa-phone"></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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- Photo-->
|
||||
<div class="demo"><div class="photo photo1 photo--large">
|
||||
Sup, dog
|
||||
</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>
|
||||
<!-- 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>
|
||||
|
||||
Reference in New Issue
Block a user