beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Card module update

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-04 11:39:20 +02:00
parent 9f4077833f
commit 93ba0c20b7
6 changed files with 132 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/v2/DEVLOG.md
View file

@ -300,3 +300,15 @@
- Created mixin `make-card-section-alt-color` for alternate background `card` `section`s. Added a couple of variants just for fluff.
- Opened issue for more mixins to be added to `card` module later.
- Deployed live page.
## 20161104
- Added mixin `make-card-alt-color` to `card` module. Supplied an example of a different card (`primary`).
- Added mixin `make-card-alt-size` for `card` sizes.
- Changed `card`'s `small` and `large` to use above mixin.
- Added `fluid` for `card`s.
- Fixed a bug with `fluid` `card`s, the new optimization and checking routine should work for all percentage-based values.
- Updated demo a little bit to showcase all of the new features of `card`s.
- For consistency reasons (inconsistent `margin`s might cause problems with `card`s of different types), there is no choice to change the `margin` of customized `card`s through via mixin.
- Created mixin `make-card-section-alt-style`, added `double-padded` style to add twice the `padding` to sections.

33
docs/v2/index.html
View file

@ -418,14 +418,18 @@
<div class="section">You can use <code>&lt;button&gt;</code>s and other similar elements as card sections. Like the button below.</div>
<button class="section">Button section</button>
</div>
<div class="card">
<p>Cards resize automatically to fit any and all content, allowing you to do anything you want with them. They also align the content automatically, so your sections will always look pretty. Nothing to worry about anymore!</p>
<div class="card primary">
<p>Cards resize automatically to fit any and all content, allowing you to do anything you want with them. They also align the content automatically, so your sections will always look pretty. Nothing to worry about anymore! By the way, this is a <code>.primary</code> card.</p>
</div>
<div class="card">
<h2 class="section dark"><code>.dark</code> heading</h2>
<p class="section">Totally normal text.</p>
<p class="section primary"><code>.primary</code> section text.</p>
</div>
<div class="card fluid">
<h1 class="section">Fluid</h1>
<p class="section">Yes, <code>.fluid</code> cards are also available! You might want to use these in combination with the grid system's columns to achieve a better effect. There's an example below, after the other size variants for the cards. Have a look.</p>
</div>
<div class="card small">
<h2>&nbsp;Small</h2>
<p>There are also <code>.small</code> cards. Tiny, cute, small cards.</p>
@ -439,6 +443,31 @@
</div>
<input class="section" placeholder="Enter some text here...">
</div>
<div class="card">
<p class="section double-padded">
These cards work quite well together, no matter the size. Well, except the <code>.fluid</code> ones which should be used together, without the other cards. Unless you want a fluid card to act as a separator of sorts, which might be desirable. Just use them in columns, like we show you below, it's the best way. By the way, this was a <code>.double-padded</code> section.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-3">
<div class="card fluid">
<h1 class="section double-padded">Card 1</h1>
<p>This is the first card. It is placed inside a column.</p>
</div>
</div>
<div class="col-sm-12 col-md">
<div class="card fluid">
<h1 class="section double-padded">Card 2</h1>
<p>This is the second card. It is placed inside a larger column. On smaller displays these will display like a list of cards.</p>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="card fluid">
<h1 class="section double-padded">Card 3</h1>
<p>This is the third card. It is placed inside a column.</p>
</div>
</div>
</div>
</div>
</div>

23
flavors/v2/mini-default.css
View file

@ -824,12 +824,6 @@ progress {
@media only screen and (min-width: 320px) {
.card {
max-width: 320px; } }
@media only screen and (min-width: 480px) {
.card.large {
max-width: 480px; } }
@media only screen and (min-width: 240px) {
.card.small {
max-width: 240px; } }
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: #1565c0;
@ -969,8 +963,25 @@ ul.breadcrumbs {
content: '\27e9';
padding: 0.125em; }
.card.large {
max-width: 480px; }
.card.small {
max-width: 160px; }
.card.fluid {
max-width: 100%; }
.card.primary {
background: #e1f5fe;
color: #263238;
border: 1px solid #01579b; }
.card > .section.dark {
background: #bdbdbd; }
.card > .section.primary {
background: #0277bd; }
.card > .section.double-padded {
padding: 12px 16px 12px; }

2
flavors/v2/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

24
flavors/v2/mini-default.scss
View file

@ -326,16 +326,24 @@ $card-section-padding: 6px 8px 6px; // Padding for card sections
$card-section-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions
$card-normal-width: 320px; // Width for normal cards
$card-large-name: 'large'; // Class name for large cards
$card-large-width: 480px; // Width for large cards
$card-small-name: 'small'; // Class name for small cards
$card-small-width: 240px; // Width for small cards
$card-size1-name: 'large'; // Class name for large cards
$card-size1-width: 480px; // Width for large cards
$card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 160px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'primary'; // Class name for card style 1
$card-style1-back-color: #e1f5fe; // Background color for card style 1
$card-style1-fore-color: #263238; // Text color for card style 1
$card-style1-border-style: 1px solid #01579b; // Border style for card style 1
$card-section-style1-name: 'dark'; // Class name for card section style 1
$card-section-style1-back-color:#bdbdbd; // Background color for card section style 1
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
$card-section-style2-name: 'primary'; // Class name for card section style 2
$card-section-style2-back-color:#0277bd; // Background color for card section style 2
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
$card-section-padding1-padding: 12px 16px 12px; // Padding for card section padding style 1
// Notes:
// [1] - The cards module depends heavily on the grid system module.
// Enable mini.css
@ -378,7 +386,13 @@ $card-section-style2-fore-color:$fore-color; // Text color for card sect
@include make-center-block ($center-block-name);
@include make-breadcrumbs ($breadcrumbs-name);
// Use mixins for cards
@include make-card-alt-size ($card-size1-name, $card-size1-width);
@include make-card-alt-size ($card-size2-name, $card-size2-width);
@include make-card-alt-size ($card-size3-name, $card-size3-width);
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
$card-style1-border-style);
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
$card-section-style1-fore-color);
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
$card-section-style2-fore-color);
$card-section-style2-fore-color);
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);

65
scss/v2/mini-shell/_card.scss
View file

@ -5,10 +5,6 @@ $card-name: 'card' !default; // Class name for the cards
$card-section-name: 'section' !default; // Class name for the cards' sections
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent)
$card-normal-width: 320px !default; // Width for normal cards
$card-large-name: 'large' !default; // Class name for large cards
$card-large-width: 480px !default; // Width for large cards
$card-small-name: 'small' !default; // Class name for small cards
$card-small-width: 240px !default; // Width for small cards
.#{$card-name} {
// Make cards display properly using flexbox tricks
// Old syntax
@ -73,18 +69,52 @@ $card-small-width: 240px !default; // Width for small cards
}
// Responsiveness (if the screen is larger than card, set max-width)
@media only screen and (min-width: #{$card-normal-width}) {
.#{$card-name} {
max-width: $card-normal-width;
.#{$card-name} {
max-width: $card-normal-width;
}
}
// Mixin for alternate card sizes.
// Variables:
// - $card-alt-size-name : The name of the class used for the alternate size card.
// - $card-alt-size-width : The width of the alternate size card.
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
@if type-of($card-alt-size-width) == 'number' && unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
@media only screen and (min-width: #{$card-large-width}) {
.#{$card-name}.#{$card-large-name} {
max-width: $card-large-width;
@else {
@media only screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
}
@media only screen and (min-width: #{$card-small-width}) {
.#{$card-name}.#{$card-small-name} {
max-width: $card-small-width;
}
// Mixin for alternate cards (card color variants).
// Variables:
// - $card-alt-name : The name of the class used for the alternate card.
// - $card-alt-back-color : The background color of the alternate card.
// - $card-alt-fore-color : The text color of the alternate card.
// - $card-alt-border-style : (Optional) The border style of the alternate card. Defaults to the value
// of $card-border-style.
// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
// of $card-border-radius.
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
background: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
color: $card-alt-fore-color;
}
@if $card-alt-border-style != $card-border-style {
border: $card-alt-border-style;
}
@if $card-alt-border-radius != $card-border-radius {
border-radius: $card-alt-border-radius;
}
}
}
// Mixin for alternate card sections (card section color variants).
@ -93,7 +123,7 @@ $card-small-width: 240px !default; // Width for small cards
// - $card-section-alt-back-color : The background color of the alternate card section.
// - $card-section-alt-fore-color : The text color of the alternate card section.
// - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
// the value of $card-border-style.
// the value of $card-section-border-style.
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@ -107,4 +137,13 @@ $card-small-width: 240px !default; // Width for small cards
border: $card-section-alt-border-style;
}
}
}
// Mixin for alternate card sections (card section padding variants).
// Variables:
// - $card-section-alt-name : The name of the class used for the alternate card section.
// - $card-section-alt-padding : The padding of the alternate card section.
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
}