The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.
To use the card module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the card module is heavily dependent on the grid module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To customize the card module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
The card module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $card-name | String | +Class name for card components | 'card' | +
| $card-back-color | Color | +Background color for card components | #fafafa | +
| $card-fore-color | Color | +Text color for card components | $fore-color | +
| $card-border-style | Border | +Border style for card components | 1px solid #9e9e9e | +
| $card-border-radius | Border radius | +Border radius for card components | 2px | +
| $card-margin | Margin | +Margin for card components | 16px | +
| $card-box-shadow | Box shadow | +Box shadow for card components | 0 1px 3px rgba(0,0,0, 0.1) | +
| $card-normal-width | Width | +Width for card components | 320px | +
| $card-section-name | String | +Class name for card components' sections | 'section' | +
| $card-section-border-style | Border | +Border style for card components' sections | 1px solid #bdbdbd | +
| $card-section-padding | Padding | +Padding for card components' sections | 6px | +
| $card-section-media-name | String | +Class name for card components' media sections | 'media' | +
| $card-section-media-height | Height | +Height for card components' media sections | 200px | +
The card module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.
| Mixin | Description |
|---|---|
| make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color, $card-alt-border-style, $card-alt-border-radius, $card-alt-section-border-style) | +Creates a new card color variant using the specified values. | +
| make-card-alt-size ($card-alt-size-name, $card-alt-size-width) | +Creates a new card size variant using the specified values. | +
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-alt-name | String | +Class name for the card color variant | 'inverse' | +
| $card-alt-back-color | Color | +Background color for the card color variant | #212121 | +
| $card-alt-fore-color | Color | +Text color for the card color variant | #fafafa | +
| $card-alt-border-style | Border | +(Optional) Border style for the card color variant | 1px solid #424242 | +
| $card-alt-border-radius | Border radius | +(Optional) Border radius for the card color variant | 2px | +
| $card-alt-section-border-style | Border | +(Optional) Border style for the card color variant's section borders | 1px solid #616161 | +
@include make-card-alt-color ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);+
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-alt-size-name | String | +Class name for the card size variant | 'large' | +
| $card-alt-size-width | Width | +Width for the card size variant | 480px | +
@include make-card-alt-size ('large', 480px);+
| Mixin | Description |
|---|---|
| make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color, $card-section-alt-fore-color, $card-section-alt-border-style + | Creates a new card section color variant using the specified values. | +
| make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) | +Creates a new card section style variant using the specified values. | +
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-section-alt-name | String | +Class name for the card section color variant | 'dark' | +
| $card-section-alt-back-color | Color | +Background color for the card section color variant | #e0e0e0 | +
| $card-section-alt-fore-color | Color | +Text color for the card section color variant | #212121 | +
| $card-section-alt-border-style | Border | +(Optional) Border style for the card section color variant | 1px solid #bdbdbd | +
@include make-card-section-alt-color ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);+
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-section-alt-name | String | +Class name for the card section style variant | 'double-padded' | +
| $card-section-alt-padding | Padding | +Padding for the card section style variant | 10px | +
@include make-card-section-alt-style ('double-padded', 10px);+
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.
diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html index 9f8c167..cf1f370 100644 --- a/docs/customization/contextual.html +++ b/docs/customization/contextual.html @@ -22,6 +22,8 @@ @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;} .box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;} + td:first-child, td:last-child { font-family: monospace, monospace; } + td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @@ -57,9 +59,8 @@Almost every piece of content present on the web has some sort of content that needs highlighting in one way or another. The contextual module provides you with simple semantic text highlighting that utilises the <mark> HTML element. Apart from that, this module contains styles and definitions for a simple .alert container, that you can use to show alerts on your websites and web apps. Alerts replace the traditional design paradigms of modals, messages and alerts by defining a simple, usable container that is also mobile friendly. Finally, a simple accessible .tooltip implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.
To use the contextual module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To customize the contextual module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
@include make-button-alt-style ('large', 2px solid #9e9e9e, 4px, 18px, 10px);
Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The progress module provides you with two essential tools to communicate this information: the <progress> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the .spinner-donut class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.
To use the progress module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To customize the progress module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.
diff --git a/docs/customization/tab.html b/docs/customization/tab.html index c69a13f..0618891 100644 --- a/docs/customization/tab.html +++ b/docs/customization/tab.html @@ -22,6 +22,8 @@ @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;} .box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;} + td:first-child, td:last-child { font-family: monospace, monospace; } + td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @@ -57,14 +59,13 @@Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the tab module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.
To use the tab module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To customize the tab module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.
diff --git a/docs/customization/utility.html b/docs/customization/utility.html index b5736ef..2d551eb 100644 --- a/docs/customization/utility.html +++ b/docs/customization/utility.html @@ -22,6 +22,8 @@ @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} .box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;} .box-colored { color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;} + td:first-child, td:last-child { font-family: monospace, monospace; } + td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @@ -57,14 +59,13 @@Every website or app has different needs and no CSS framework can predict them all. The utility module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.
To use the utility module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To customize the utility module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 6d89ec2..4e98b08 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -966,3 +966,10 @@ - Documented `navigation` module's customization page. - Resolved #63, replacing the `flex-grow` and `flex-shrink` properties with the `flex` shorthand. Everything should display properly across browsers now. - Fully documented `input_control` and `table` modules in terms of customization. + +## 20170417 + +- Merged couple of PRs into `master`, updated `dev211` with the new changes to make sure everything is up to date. +- Dealt with a couple of minor mistakes in existing modules. +- Documented `card` module's customization. +- Added base text and styles for all customization pages not yet finished.