mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-01-17 21:08:13 +01:00
Code Issues Releases Wiki Activity

Cards module first test commit

Browse Source
This commit is contained in:
Angelos Chalaris 2016-11-03 00:38:08 +02:00
parent ad02c60db7
commit a6d2863683
6 changed files with 103 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v2/DEVLOG.md
View File

@ -284,4 +284,6 @@
- Explained utilities in demo page.
- Deployed demo page with utilities docs.
- 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`.
- 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.

29
docs/v2/index.html
View File

@ -391,7 +391,34 @@
<p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:</p>
<p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> &amp; <span class="bordered circular">&nbsp;2 </span>.</p>
<ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">are</a></li><li><a href="#">breadcrumbs</a></li></ul>
<p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p>
<p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p><br>
<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="card">
<div class="section">
card 2
</div>
<img src="favicon.png" style="height:64px; width: 100%; margin: auto;" class="section media">
<div class="section">
test
</div>
</div>
<div class="card">
card 3
</div>
<div class="card">
card 4
</div>
<div class="card">
card 5
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -785,6 +785,24 @@ progress {
progress[value="100"]::-moz-progress-bar {
border-radius: 1px; }
.card {
position: relative;
width: 100%;
background: #f5f5f5;
border: 1px solid #bdbdbd;
border-radius: 2px;
margin: 2px 10px 20px;
box-shadow: rgba(0, 0, 0, 0.19) 0 0 3px 0; }
.card > .section {
border-bottom: 1px solid #e0e0e0; }
.card > .section.media {
padding: 0; }
.card > .section:last-child {
border-bottom: 0; }
@media only screen and (min-width: 768px) {
.card {
max-width: 320px; } }
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: #1565c0;

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

File diff suppressed because one or more lines are too long

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

@ -314,7 +314,16 @@ $clearfix-name: 'clearfix'; // Class name for clearfix
$center-block-name: 'center-block'; // Class name for center block
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
// Variables for cards [1]
$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-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-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
// Notes:
// [1] - The cards module depends heavily on the grid system module.
// Enable mini.css

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

@ -1,2 +1,44 @@
// Definitions for cards and containers.
// Dependency: This module depends heavily on the grid system module.
// Dependency: This module depends heavily on the grid system module.
// Card styling
$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-name} {
position: relative;
width: 100%;
@if $card-back-color != $back-color {
background: $card-back-color;
}
@if $card-fore-color != $fore-color {
color: $card-fore-color;
}
@if $card-border-style != 0 {
border: $card-border-style;
}
@if $card-border-radius != 0 {
border-radius: $card-border-radius;
}
@if $card-margin != 0 {
margin: $card-margin;
}
box-shadow: rgba(0, 0, 0, 0.19) 0 0 3px 0;
& > .#{$card-section-name} {
border-bottom: $card-section-border-style;
&.#{$card-section-media-name} {
padding: 0;
}
}
& > .#{$card-section-name}:last-child {
border-bottom: 0;
}
}
$card-breakpoint: 800px !default; // Breakpoint for the card system
@media only screen and (min-width: #{$grid-small-breakpoint}) {
.#{$card-name} {
max-width: 320px;
}
}
// TODO: Add paddings etc etc
// TODO: Add different sizes for cards
// TODO: Test excessively