mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 19:40:35 +02:00
Code Issues Releases Wiki Activity

Card module complete, fully responsive

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-03 23:00:23 +02:00
parent a6d2863683
commit 43f2cb7cbd
8 changed files with 190 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/v2/DEVLOG.md
View File

@@ -286,4 +286,15 @@
- Started developing `shell`. Added `shell` file and `mini-shell/card` file for the `card` module.
- Actually deleted `shell` file, moved everything to `core` file, renamed to `_mini.scss`.
- Played around with `card`s a little bit, got a few basic ideas down, tested centering in `row`, not worthwhile.
- Some minor styling for cards has been done, lots of work needed still.
- Some minor styling for cards has been done, lots of work needed still.
## 20161103
- Added some more info in issue #16 about breaking changes and cards etc.
- Added the proper features needed for media inside `card`s, images and other parts named as media will respond as required and images will resize and center properly. This, in turn broke support for certain browsers.
- Added flexbox properties to cards to `align-self` and `justify-content` so that contents and containers will display properly.
- Created `large` and `small` variants for `card`s.
- Optimized `card`s and added variables etc.
- Tested cards, seem to work properly.
- Minor restructure of `utility` for consistency and such.
- Created mixin `make-card-section-alt-color` for alternate background `card` `section`s. Added a couple of variants just for fluff.

BIN
docs/v2/catdemo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 806 KiB

56
docs/v2/index.html
View File

@@ -395,27 +395,49 @@
<h2>Cards <small>Modern content containers</small></h2>
<p>Cards are some of the most modern and stylish content containers and are widely used in many website types. <strong>mini.css</strong> provides you with the <code>.card</code> class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Below are some examples:</p>
<div class="container">
<div class="row cards">
<div class="card">
card 1
</div>
<div class="row">
<div class="card">
<img src="catdemo.jpg" class="section media">
<div class="section">
card 2
<h2>Chubby cat</h2>
<span>This is a lovely cat!</span>
</div>
<img src="favicon.png" style="height:64px; width: 100%; margin: auto;" class="section media">
<small class="section">03-11-2016, 09:44 PM</small>
</div>
<div class="card">
<h2 class="section">Chubby cat<small>Uploaded Nov, 3rd, 2016</small></h2>
<img src="catdemo.jpg" class="section media">
<p class="section">This cat is pretty amazing, right? Just look at it!</p>
</div>
<div class="card">
<p class="section">Cards are pretty awesome, as you can see.</p>
<p class="section">This is a card with three text sections.</p>
<p class="section">By the way, here's a link to the <strong>mini.css</strong> <a href="https://github.com/Chalarangelo/mini.css">project repository on Github</a>, just in case.</p>
</div>
<div class="card">
<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>
<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 small">
<h2>&nbsp;Small</h2>
<p>There are also <code>.small</code> cards. Tiny, cute, small cards.</p>
</div>
<div class="card large">
<div class="section">
test
</div>
</div>
<div class="card">
card 3
</div>
<div class="card">
card 4
</div>
<div class="card">
card 5
<h2>&nbsp;Large</h2>
<hr>
<p>And, of course, there are <code>.large</code> cards.</p>
<p>Because you'll need them.</p><br>
</div>
<input class="section" placeholder="Enter some text here...">
</div>
</div>
</div>

43
flavors/v2/mini-default.css
View File

@@ -786,23 +786,50 @@ progress {
border-radius: 1px; }
.card {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: justify;
-webkit-box-align: center;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-self: center;
align-self: center;
position: relative;
width: 100%;
background: #f5f5f5;
border: 1px solid #bdbdbd;
border: 1px solid #9e9e9e;
border-radius: 2px;
margin: 2px 10px 20px;
box-shadow: rgba(0, 0, 0, 0.19) 0 0 3px 0; }
box-shadow: rgba(0, 0, 0, 0.25) 0 0 3px 0; }
.card > .section {
border-bottom: 1px solid #e0e0e0; }
box-sizing: border-box;
margin: 0;
border-bottom: 1px solid #bdbdbd;
padding: 6px 8px 6px;
width: 100%; }
.card > .section.media {
padding: 0; }
height: 200px;
padding: 0;
-o-object-fit: cover;
object-fit: cover; }
.card > button.section, .card .button.section, .card input.section {
border-radius: 0; }
.card > .section:last-child {
border-bottom: 0; }
@media only screen and (min-width: 768px) {
@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;
@@ -941,3 +968,9 @@ ul.breadcrumbs {
ul.breadcrumbs > li + li:before {
content: '\27e9';
padding: 0.125em; }
.card > .section.dark {
background: #bdbdbd; }
.card > .section.primary {
background: #0277bd; }

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

File diff suppressed because one or more lines are too long

25
flavors/v2/mini-default.scss
View File

@@ -317,13 +317,25 @@ $breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
$card-name: 'card'; // Class name for cards
$card-back-color: #f5f5f5; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #bdbdbd; // Border style for cards
$card-border-style: 1px solid #9e9e9e; // Border style for cards
$card-border-radius: 2px; // Border radius for cards
$card-margin: 2px 10px 20px; // Margin for cards
$card-section-name: 'section'; // Class name for card sections
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
$card-section-padding: 6px 8px 6px; // Padding for card sections
$card-section-media-name: 'media'; // Class name for card media sections
$card-section-border-style: 1px solid #e0e0e0; // Border style for card sections
$card-breakpoint: 800px; // Breakpoint for cards
$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-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
// Notes:
// [1] - The cards module depends heavily on the grid system module.
// Enable mini.css
@@ -364,4 +376,9 @@ $card-breakpoint: 800px; // Breakpoint for cards
@include make-floats ($float-prefix);
@include make-clearfix ($clearfix-name);
@include make-center-block ($center-block-name);
@include make-breadcrumbs ($breadcrumbs-name);
@include make-breadcrumbs ($breadcrumbs-name);
// Use mixins for cards
@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);

10
scss/v2/mini-core/_utility.scss
View File

@@ -56,7 +56,7 @@
// Clearfix mixin.
// Variables:
// - $clearfix-name : The name of the class used for the clearfix.
@mixin make-clearfix($clearfix-name) {
@mixin make-clearfix ($clearfix-name) {
.#{$clearfix-name} {
&:before, &:after {
content: ' ';
@@ -68,7 +68,7 @@
// Center block mixin.
// Variables:
// - $center-block-name : The name of the class used for the center block.
@mixin make-center-block($center-block-name) {
@mixin make-center-block ($center-block-name) {
.#{$center-block-name} {
display: block;
margin-left: auto;
@@ -78,17 +78,17 @@
// Breadcrumb mixin.
// Variables:
// - $breadcrumbs-name : The name of the class used for the breadcrumbs.
// - $use-right-angle-symbol : Should the right angle symbol be used as a separator (`true`/`false`).
// - $use-right-angle-symbol : (Optional) Should the right angle symbol be used as a separator (`true`/`false`).
// Value is `true` by default. If `false` a forward slash will be used.
@mixin make-breadcrumbs ($breadcrumbs-name, $use-right-angle-symbol : true) {
ul.#{$breadcrumbs-name}{
ul.#{$breadcrumbs-name} {
list-style: none;
& > li{
display: inline-block;
// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
padding-right: 0.125em;
& + li:before{
@if $use-right-angle-symbol{
@if $use-right-angle-symbol {
content: '\27e9';
}
@else {

82
scss/v2/mini-shell/_card.scss
View File

@@ -4,9 +4,30 @@
$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
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: justify;
-webkit-box-align: center;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-self: center;
align-self: center;
position: relative;
width: 100%;
// Actual styling for the cards
@if $card-back-color != $back-color {
background: $card-back-color;
}
@@ -22,23 +43,68 @@ $card-section-media-name: 'media' !default; // Class name for the cards'
@if $card-margin != 0 {
margin: $card-margin;
}
box-shadow: rgba(0, 0, 0, 0.19) 0 0 3px 0;
// Tasteful shadow
box-shadow: rgba(0, 0, 0, 0.25) 0 0 3px 0;
// Card sections
& > .#{$card-section-name} {
box-sizing: border-box;
margin: 0;
border-bottom: $card-section-border-style;
padding: $card-section-padding;
width: 100%;
// Card media sections
&.#{$card-section-media-name} {
height: $card-section-media-height;
padding: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
// Card input and button sections
& > button, .#{$button-class-name}, input {
&.#{$card-section-name} {
border-radius: 0; // Clean button and input gaps from border-radius
}
}
// Card sections - last
& > .#{$card-section-name}:last-child {
border-bottom: 0;
border-bottom: 0; // Clean the extra border for last section
}
}
$card-breakpoint: 800px !default; // Breakpoint for the card system
@media only screen and (min-width: #{$grid-small-breakpoint}) {
// Responsiveness (if the screen is larger than card, set max-width)
@media only screen and (min-width: #{$card-normal-width}) {
.#{$card-name} {
max-width: 320px;
max-width: $card-normal-width;
}
}
// TODO: Add paddings etc etc
// TODO: Add different sizes for cards
// TODO: Test excessively
@media only screen and (min-width: #{$card-large-width}) {
.#{$card-name}.#{$card-large-name} {
max-width: $card-large-width;
}
}
@media only screen and (min-width: #{$card-small-width}) {
.#{$card-name}.#{$card-small-name} {
max-width: $card-small-width;
}
}
// Mixin for alternate card sections (card section color variants).
// Variables:
// - $card-section-alt-name : The name of the class used for the alternate card section.
// - $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.
@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} {
@if $card-section-alt-back-color != $card-back-color {
background: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
color: $card-section-alt-fore-color;
}
@if $card-section-alt-border-style != $card-section-border-style {
border: $card-section-alt-border-style;
}
}
}