mini.css provides you with cards, general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
`, + example: `This is a basic card with some sample content.
This is another card with some sample content.
This is one more card with some sample content.
<div class="row"> + <div class="card"></div> + <div class="card"></div> +</div>`], + notes: [`Due to the fact that fluid cards stretch to fill their parent container, they might not fully respect their margins sometimes, although this should not cause any noticable problems in your web apps' layouts.`], + customization: [ + `Text color for cards can be changed by changing the value of the
--card-fore-color variable.`,
+ `Background color for cards can be changed by changing the value of the --card-back-color variable.`,
+ `Border color for caards can be changed by changing the value of the --card-border-color variable.`,
+ `Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
+ `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.`
+ ],
+ modifiers: [
+ {
+ title : 'Alternative sizes',
+ description: `You can create small (.small, 240px wide) or large (.large, 480px wide) cards by applying the appropriate modifiers to a card. Apart from that, you can also create fluid (.fluid) cards, that take up as much space as is available, however you will have to place these cards inside a grid layout's columns, effectively adding one extra step for them to display properly.
Small cards are 240px wide.
Large cards are 480px wide.
Fluid cards scale their width based on the column that contains them.
<div class="row"> + <div class="card small"></div> + <div class="card large"></div> + <div class="col-sm-12"> + <div class="card fluid"></div> + </div> +</div>`] + }, + { + title : 'Color variants', + description: `
You can display warning (.warning) or error (.error) messages using cards, simply by adding the appropriate color modifiers to a card.
Warning cards are used to display important information to users.
Error cards are used to display error messages to users.
<div class="row"> + <div class="card warning"></div> + <div class="card error"></div> +</div>`] + } + ], + dos: [ + { + description: `You can create rows inside a card, which can in turn contain other cards.`, + sample: `
<div class="card"> + <div class="row"> + <div class="card"></div> + </div> +</div>` + } + ], + donts: [ + { + description: `An element cannot be a card and a row or column at the same time.`, + sample: `
<div class="card row"></div> +<div class="card col-sm"></div>` + }, + { + description: `Never forget to wrap your cards inside a row and your fluid cards inside a row and a column.`, + sample: `
<div> + <div class="card"></div> +</div>` + }, + { + description: `Try not to combine fixed-width and fluid cards. Instead, combine fixed-width cards with columns and place fluid cards inside them.`, + sample: `
<div class="row"> + <div class="card"></div> + <div class="card fluid"></div> +</div>` + }, + { + description: `Avoid applying two color modifiers on the same card.`, + sample: `
<div class="card warning error"></div>`
+ }
+ ]
}
-
-/*
- Modifiers:
- {
- title : '',
- description: '',
- example: '',
- samples: []
- }
- Dos/Donts:
- {
- description: '',
- sample: ''
- }
-*/
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index 79de940..ee65db4 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -171,3 +171,7 @@
- Improved the build script to actually render the `modifiers` section, it should be complete now, I think.
- Documented `grid`. The whole old module has been merged into one long card with all the information readily available. Hopefully it's less complicated now.
- Changed the color of `main` in the documentation to help the cards pop out a little bit more.
+
+## 20171117
+
+- Documented `card` and `card section` to complete the `layout` module's docs.
diff --git a/docs/v3/docs.html b/docs/v3/docs.html
index 13bc897..784b880 100644
--- a/docs/v3/docs.html
+++ b/docs/v3/docs.html
@@ -297,13 +297,48 @@
--universal-padding variable. This only affects the padding of the container.mini.css provides you with cards, general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
This is a basic card with some sample content.
This is another card with some sample content.
This is one more card with some sample content.
<div class="row"> + <div class="card"></div> + <div class="card"></div> +</div>
You can create small (.small, 240px wide) or large (.large, 480px wide) cards by applying the appropriate modifiers to a card. Apart from that, you can also create fluid (.fluid) cards, that take up as much space as is available, however you will have to place these cards inside a grid layout's columns, effectively adding one extra step for them to display properly.
Small cards are 240px wide.
Large cards are 480px wide.
Fluid cards scale their width based on the column that contains them.
<div class="row"> + <div class="card small"></div> + <div class="card large"></div> + <div class="col-sm-12"> + <div class="card fluid"></div> + </div> +</div>
You can display warning (.warning) or error (.error) messages using cards, simply by adding the appropriate color modifiers to a card.
Warning cards are used to display important information to users.
Error cards are used to display error messages to users.
<div class="row"> + <div class="card warning"></div> + <div class="card error"></div> +</div>
<div class="card"> + <div class="row"> + <div class="card"></div> + </div> +</div>
Do: You can create rows inside a card, which can in turn contain other cards.
<div class="card row"></div> +<div class="card col-sm"></div>
Don't: An element cannot be a card and a row or column at the same time.
<div> + <div class="card"></div> +</div>
Don't: Never forget to wrap your cards inside a row and your fluid cards inside a row and a column.
<div class="row"> + <div class="card"></div> + <div class="card fluid"></div> +</div>
Don't: Try not to combine fixed-width and fluid cards. Instead, combine fixed-width cards with columns and place fluid cards inside them.
<div class="card warning error"></div>Don't: Avoid applying two color modifiers on the same card.
--card-fore-color variable.--card-back-color variable.--card-border-color variable.--universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.--universal-border-radius variable.