Skip to content

Instantly share code, notes, and snippets.

@mistergraphx

mistergraphx/SassMeister-input-HTML.jade

Last active February 18, 2018 15:26
Show Gist options
  • Save mistergraphx/4f24059058d7e49ebb54f0a304439d97 to your computer and use it in GitHub Desktop.
Save mistergraphx/4f24059058d7e49ebb54f0a304439d97 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
browserslist
> 1%
last 2 versions
Raw
SassMeister-input-HTML.jade
.card-grid
.card
.card-media
img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
.card-content
.title
| Titre de la card
.subtitle
| some sub informations
.description
| Description text for the item
.card-footer
Raw
SassMeister-input.scss
// ----
// libsass (v3.5.0.beta.2)
// ----
/** # Cards
https://www.nngroup.com/articles/cards-component/
Definition:
A card is container for a few short, related pieces of information.
It roughly resembles a playing card in size and shape, and is intended as a linked,
short representation of a conceptual unit.
Card actions : https://material.io/guidelines/components/cards.html#cards-actions
## Cards Bootstrap V4 revisited
Markup:
<div class="card" style="width:300px;">
<img class="card-thumbnail top" width="300" />
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="subtitle"></p>
<p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<h3>Card with Caps : Header & Footer</h3>
<div class="card" style="width:300px;">
<div class="card-header">
Featured
</div>
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="subtitle"></p>
<p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="card-footer">
<a href="#" class="action">Button</a>
Card footer
</div>
</div>
<h3>Card with Images Caps</h3>
<div class="card" style="width:300px;">
<img class="card-thumbnail top" width="300" />
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width:300px;">
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-thumbnail top" width="300" />
</div>
@see - <http://v4-alpha.getbootstrap.com/components/card/>
@see - https://vitalcss.com/layouts/ Exemple de structure et de declinaisons pour le card component
@see - http://zurb.com/article/1456/5-common-mistakes-designers-make-when-usi
@see - https://www.nngroup.com/articles/cards-component/
@see - http://line25.com/inspiration/card-grid-layouts-websites
@see - https://designshack.net/articles/layouts/the-complete-guide-to-an-effective-card-style-interface-design/
@see - https://codepen.io/sdthornton/pen/wBZdXq - MaterialDesigns shadow boxs
@bug - Sur l'élément title, le text overflow flex-childs https://css-tricks.com/flexbox-truncated-text/
@param $card-border-radius (3px !default) -
@param $card-spacer-x (1em !default) -
@param $card-spacer-y (1em !default) -
@param $card-bg (white !default) -
@param $card-border-width (1px !default) -
@param $card-border-color (silver !default) -
@param $card-cap-bg (lighten($black, 80)!default) -
@param $card-cap-color (white !default) -
@param $unstyled-components (false !default) -
Styleguide addons.uikit.cards
*/
@import "bourbon/bourbon";
@import "susy";
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 8,
gutters: .25,
column-width: false,
global-box-sizing: border-box,
last-flow: to,
debug: (
image: show baseline,
color: rgba(#66f, .25),
output: overlay,
toggle: top left,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
@import "include-media";
$breakpoints: (
'phone': 430px,
'tablet': 780px,
'desktop': 960px
);
$global-line-height: 1.5;
$base-line-height: $global-line-height * 1em;
$base-font-size: 1rem;
$base-spacing: $base-line-height !default;
$small-spacing: $base-spacing / 2;
$max-width: 1050px !default;
$card-border-radius: 3px !default;
$card-spacer-x: 1em !default;
$card-spacer-y: 1em !default;
$card-bg : white !default;
$card-border-width: 1px !default;
$card-border-color: silver !default;
$card-cap-bg: white !default;
$card-cap-color: black !default;
$unstyled-components: false !default;
// Reset
* {
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-size: $base-font-size;
line-height: $global-line-height;
}
@mixin card(){
position: relative;
width: 100%;
display: block;
margin-bottom: gutter();
@if $unstyled-components == false {
background-color: $card-bg;
border-width: $card-border-width;
border-style: solid;
border-color: $card-border-color;
border-radius: $card-border-radius;
}
&-media {
position: relative;
display: inline-block;
width: 100%;
height: $base-spacing * 10;
overflow: hidden;
img {
min-width: 100%;
height: 100%;
}
}
&-content {
display: table;
width: 100%;
min-height: $base-spacing * 3;
padding: 0 $card-spacer-x;
.title,.subtitle, .description {
display: inline-block;
width: 100%;
}
// 1- ne devrait être défni que pour la grille
// 2 - dans le theme
.title {
height: $base-spacing * 4;
padding: .5em 0;
min-width: 0;
display: flex; // [1]
align-items: center;
text-align: center;// [2]
overflow: hidden;
text-overflow: ellipsis;
& > * {
flex:1;
margin: 0;
padding: 0;
}
}
.subtitle {
position: relative;
margin-top: -15px;
margin-bottom: $small-spacing;
}
.description:last-child {
margin-bottom: 0; // appliqué au dernier paragraphe
}
}
//
// Optional textual caps
//
&-header {
padding: $small-spacing;
@if $unstyled-components == false {
background-color: $card-cap-bg;
color: $card-cap-color;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
border-radius: $card-border-radius $card-border-radius 0 0;
}
}
}
&-footer {
padding: $small-spacing;
@if $unstyled-components == false {
background-color: $card-cap-bg;
color: $card-cap-color;
border-top: $card-border-width solid $card-border-color;
&:last-child {
border-radius: 0 0 $card-border-radius $card-border-radius;
}
}
}
}
.card {
@include card();
}
// Card image caps
%card-media-top {
border-radius: $card-border-radius $card-border-radius 0 0;
}
%card-media-bottom {
border-radius: 0 0 $card-border-radius $card-border-radius;
img {
bottom: 0;
}
}
// layouts
$card-list-layout-s: layout(8 .25 inside) !default;
// With susy
.card-list-legacy {
@include container($max-width);
& > .card {
@include span(full);
.card-media {
@include span(3 $card-list-layout-s);
}
.card-content{
@include span(5 $card-list-layout-s);
}
}
}
/** # Cards layouts
.card-list - vue de l'objet card en mode liste
.card-list.media-right - le visuel est à droite
.card-list.media-left - le visuel est à gauche
.card-list.media-alternate - alterne les visuels gauche/droite
.card-grid - vue de l'objet card en grille
.card-grid.media-top - visuels en haut
.card-grid.media-bottom - visuel en bas
Markup
<div class="$modifierClass">
<div class="card">
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124"/>
</div>
<div class="card-content">
<div class="title">
<h2>Card title, le titre sur plusieures lignes</h2>
</div>
<div class="subtitle">My card subtitle, plus court</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
</div>
Styleguide cards.layouts
*/
.card-list {
@include container($max-width);
& > .card {
display: flex;
flex-flow: row;
flex-wrap: wrap;
align-self: center;
.card-header,
.card-footer {
@include span(full $card-list-layout-s);
}
@include media('>phone'){
.card-media {
width: span(3 $card-list-layout-s);
}
.card-content{
width: span(5 last $card-list-layout-s);
padding: gutter();
}
}
}
&.media-right > .card,
& > .card.media-right,
&.media-alternate > .card:nth-child(2n){
//flex-flow: row-reverse; // Pose un soucis avec les blocs header/footer, on contoure en spécifiant littéralement l'ordre
@include media('>phone'){
.card-content{
order: 3;
}
.card-media {
order: 4;
}
.card-footer {
order: 5;
}
}
}
& > .card.media-left{
flex-flow: row;
}
}
// Layout utility
$card-grid-layout-s: layout(6 split) !default;
$card-grid-layout-l: layout(9 split) !default;
.card-grid {
@include container($max-width);
padding-top: $base-spacing;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
& > .card {
display: flex;
flex-direction: column;
//padding-top: gutter();
@include media('>phone','<=tablet'){
@include span(3 $card-grid-layout-s);
}
@include media('>tablet'){
width: span(3 $card-grid-layout-l);
}
}
&.media-bottom > .card,
& .card.media-bottom {
flex-direction: column-reverse;
}
&.media-top > .card,
& .card.media-top {
flex-direction: column;
}
}
Raw
SassMeister-output.css
@charset "UTF-8";
/** # Cards
https://www.nngroup.com/articles/cards-component/
Definition:
A card is container for a few short, related pieces of information.
It roughly resembles a playing card in size and shape, and is intended as a linked,
short representation of a conceptual unit.
Card actions : https://material.io/guidelines/components/cards.html#cards-actions
## Cards Bootstrap V4 revisited
Markup:
<div class="card" style="width:300px;">
<img class="card-thumbnail top" width="300" />
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="subtitle"></p>
<p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<h3>Card with Caps : Header & Footer</h3>
<div class="card" style="width:300px;">
<div class="card-header">
Featured
</div>
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="subtitle"></p>
<p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="card-footer">
<a href="#" class="action">Button</a>
Card footer
</div>
</div>
<h3>Card with Images Caps</h3>
<div class="card" style="width:300px;">
<img class="card-thumbnail top" width="300" />
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width:300px;">
<div class="card-content">
<h4 class="title">Card title</h4>
<p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-thumbnail top" width="300" />
</div>
@see - <http://v4-alpha.getbootstrap.com/components/card/>
@see - https://vitalcss.com/layouts/ Exemple de structure et de declinaisons pour le card component
@see - http://zurb.com/article/1456/5-common-mistakes-designers-make-when-usi
@see - https://www.nngroup.com/articles/cards-component/
@see - http://line25.com/inspiration/card-grid-layouts-websites
@see - https://designshack.net/articles/layouts/the-complete-guide-to-an-effective-card-style-interface-design/
@see - https://codepen.io/sdthornton/pen/wBZdXq - MaterialDesigns shadow boxs
@bug - Sur l'élément title, le text overflow flex-childs https://css-tricks.com/flexbox-truncated-text/
@param $card-border-radius (3px !default) -
@param $card-spacer-x (1em !default) -
@param $card-spacer-y (1em !default) -
@param $card-bg (white !default) -
@param $card-border-width (1px !default) -
@param $card-border-color (silver !default) -
@param $card-cap-bg (lighten($black, 80)!default) -
@param $card-cap-color (white !default) -
@param $unstyled-components (false !default) -
Styleguide addons.uikit.cards
*/
* {
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-size: 1rem;
line-height: 1.5;
}
.card {
position: relative;
width: 100%;
display: block;
margin-bottom: 2.5641%;
background-color: white;
border-width: 1px;
border-style: solid;
border-color: silver;
border-radius: 3px;
}
.card-media {
position: relative;
display: inline-block;
width: 100%;
height: 15em;
overflow: hidden;
}
.card-media img {
min-width: 100%;
height: 100%;
}
.card-content {
display: table;
width: 100%;
min-height: 4.5em;
padding: 0 1em;
}
.card-content .title, .card-content .subtitle, .card-content .description {
display: inline-block;
width: 100%;
}
.card-content .title {
height: 6em;
padding: .5em 0;
min-width: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.card-content .title > * {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0;
padding: 0;
}
.card-content .subtitle {
position: relative;
margin-top: -15px;
margin-bottom: 0.75em;
}
.card-content .description:last-child {
margin-bottom: 0;
}
.card-header {
padding: 0.75em;
background-color: white;
color: black;
border-bottom: 1px solid silver;
}
.card-header:first-child {
border-radius: 3px 3px 0 0;
}
.card-footer {
padding: 0.75em;
background-color: white;
color: black;
border-top: 1px solid silver;
}
.card-footer:last-child {
border-radius: 0 0 3px 3px;
}
.card-list-legacy {
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}
.card-list-legacy:after {
content: " ";
display: block;
clear: both;
}
head {
display: block;
position: fixed;
left: 10px;
top: 10px;
z-index: 999;
color: #333;
background: rgba(255, 255, 255, 0.25);
}
head:before {
content: "|||";
display: block;
padding: 5px 10px;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
}
head:hover {
background: rgba(255, 255, 255, 0.5);
color: red;
}
head:hover ~ .card-list-legacy,
head:hover ~ body .card-list-legacy {
position: relative;
}
head:hover ~ .card-list-legacy:before,
head:hover ~ body .card-list-legacy:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
background-image: -webkit-linear-gradient( left , rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient(top, #000 1px, transparent 1px);
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), linear-gradient(to bottom, #000 1px, transparent 1px);
background-size: 12.82051%, 100% 1.5em;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.card-list-legacy > .card {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
.card-list-legacy > .card .card-media {
width: 37.5%;
float: left;
padding-left: 1.25%;
padding-right: 1.25%;
}
.card-list-legacy > .card .card-content {
width: 62.5%;
float: left;
padding-left: 1.25%;
padding-right: 1.25%;
}
/** # Cards layouts
.card-list - vue de l'objet card en mode liste
.card-list.media-right - le visuel est à droite
.card-list.media-left - le visuel est à gauche
.card-list.media-alternate - alterne les visuels gauche/droite
.card-grid - vue de l'objet card en grille
.card-grid.media-top - visuels en haut
.card-grid.media-bottom - visuel en bas
Markup
<div class="$modifierClass">
<div class="card">
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124"/>
</div>
<div class="card-content">
<div class="title">
<h2>Card title, le titre sur plusieures lignes</h2>
</div>
<div class="subtitle">My card subtitle, plus court</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
</div>
Styleguide cards.layouts
*/
.card-list {
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}
.card-list:after {
content: " ";
display: block;
clear: both;
}
head:hover ~ .card-list,
head:hover ~ body .card-list {
position: relative;
}
head:hover ~ .card-list:before,
head:hover ~ body .card-list:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
background-image: -webkit-linear-gradient( left , rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient(top, #000 1px, transparent 1px);
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), linear-gradient(to bottom, #000 1px, transparent 1px);
background-size: 12.82051%, 100% 1.5em;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.card-list > .card {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.card-list > .card .card-header,
.card-list > .card .card-footer {
width: 100%;
float: left;
padding-left: 1.25%;
padding-right: 1.25%;
}
@media (min-width: 431px) {
.card-list > .card .card-media {
width: 37.5%;
}
.card-list > .card .card-content {
width: 62.5%;
padding: 2.5641%;
}
}
@media (min-width: 431px) {
.card-list.media-right > .card .card-content,
.card-list > .card.media-right .card-content,
.card-list.media-alternate > .card:nth-child(2n) .card-content {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.card-list.media-right > .card .card-media,
.card-list > .card.media-right .card-media,
.card-list.media-alternate > .card:nth-child(2n) .card-media {
-webkit-box-ordinal-group: 5;
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
}
.card-list.media-right > .card .card-footer,
.card-list > .card.media-right .card-footer,
.card-list.media-alternate > .card:nth-child(2n) .card-footer {
-webkit-box-ordinal-group: 6;
-webkit-order: 5;
-ms-flex-order: 5;
order: 5;
}
}
.card-list > .card.media-left {
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
}
.card-grid {
max-width: 1050px;
margin-left: auto;
margin-right: auto;
padding-top: 1.5em;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.card-grid:after {
content: " ";
display: block;
clear: both;
}
head:hover ~ .card-grid,
head:hover ~ body .card-grid {
position: relative;
}
head:hover ~ .card-grid:before,
head:hover ~ body .card-grid:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
background-image: -webkit-linear-gradient( left , rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient(top, #000 1px, transparent 1px);
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), linear-gradient(to bottom, #000 1px, transparent 1px);
background-size: 12.82051%, 100% 1.5em;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.card-grid > .card {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@media (min-width: 431px) and (max-width: 780px) {
.card-grid > .card {
width: 46.66667%;
float: left;
margin-left: 1.66667%;
margin-right: 1.66667%;
}
}
@media (min-width: 781px) {
.card-grid > .card {
width: 31.11111%;
}
}
.card-grid.media-bottom > .card,
.card-grid .card.media-bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.card-grid.media-top > .card,
.card-grid .card.media-top {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
Raw
SassMeister-rendered.html
<!--
.card-list - vue de l'objet card en mode liste
.card-list.media-right - le visuel est à droite
.card-list.media-left - le visuel est à gauche
.card-list.media-alternate - alterne les visuels gauche/droite
.card-grid - vue de l'objet card en grille
.card-grid.media-top - visuels en haut
.card-grid.media-bottom - visuel en bas
-->
<div class="card-list">
<div class="card">
<div class="card-header"></div>
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header"></div>
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header"></div>
<div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
<div class="card-content">
<div class="title">
<h2>Card title</h2>
</div>
<div class="subtitle">My card subtitle</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer"></div>
</div>
<div class="card">
<div class="card-header"></div>
<div class="card-media"><img src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124"/></div>
<div class="card-content">
<div class="title">
<h2>Card title, le titre peut parfois passer sur plusieures lignes</h2>
</div>
<div class="subtitle">My card subtitle, plus court</div>
<div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
</div>
<div class="card-footer">some actions</div>
</div>
</div>
Raw
SassMeister-rendered.jade
.card-grid
.card
.card-header
.card-media
img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
.card-content
.title
h2 Card title
.subtitle
| My card subtitle
.description
| Card description , la description peut être un texte très long et parfois peut intéressant
.card-footer
.card
.card-header
.card-media
img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
.card-content
.title
h2 Card title
.subtitle
| My card subtitle
.description
| Card description , la description peut être un texte très long et parfois peut intéressant
.card-footer
.card
.card-header
.card-media
img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
.card-content
.title
h2 Card title
.subtitle
| My card subtitle
.description
| Card description , la description peut être un texte très long et parfois peut intéressant
.card-footer
.card
.card-header
.card-media
img(src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124")
.card-content
.title
h2 Card title, le titre peut parfois passer sur plusieures lignes
.subtitle
| My card subtitle, plus court
.description
| Card description , la description peut être un texte très long et parfois peut intéressant
.card-footer
| some actions
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment