2017-04-06 13:33:56 +03:00
<!DOCTYPE html>
2017-05-03 11:00:04 +03:00
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Noto+Sans" >
2017-04-06 13:33:56 +03:00
< html lang = "en" >
< head >
2017-04-18 14:27:39 +03:00
< link rel = "stylesheet" href = "../mini-default.min.css" >
2017-04-06 13:33:56 +03:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
< title > mini.css - Card< / title >
< meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "mini.css - Minimal, responsive, style-agnostic CSS framework" >
< meta name = "keywords" content = "mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, card " >
< meta name = "author" content = "Angelos Chalaris (chalarangelo)" >
< meta property = "og:title" content = "mini.css - Minimal, responsive, style-agnostic CSS framework" >
< meta property = "og:description" content = "mini.css is a tiny CSS framework designed to build quick, modern and responsive websites." / >
< meta property = "og:type" content = "website" / > < meta property = "og:image" content = "../page_thumb.png" >
< meta property = "og:url" content = "https://chalarangelo.github.io/mini.css/" > < link rel = "icon" type = "image/png" href = "../favicon.png" >
< style >
2017-05-03 11:00:04 +03:00
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
2017-04-06 13:33:56 +03:00
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
2017-05-05 00:47:22 +03:00
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
2017-04-06 13:33:56 +03:00
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
2017-05-05 01:15:03 +03:00
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
2017-04-17 20:09:38 +03:00
td:first-child, td:last-child { font-family: monospace, monospace; }
2017-05-12 14:22:22 +03:00
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;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
2017-04-06 13:33:56 +03:00
< / style >
< / head >
< body >
2017-04-28 12:34:02 +03:00
< header class = "sticky" >
2017-06-14 12:23:29 +03:00
< a href = "../index" class = "logo" > < span id = "header-logo" > m< / span > < / a >
2017-05-12 14:22:22 +03:00
< label class = "drawer-toggle button" for = "navigation-toggle" > < / label >
2017-06-14 12:23:29 +03:00
< a href = "../index" class = "button hidden-sm" > Introduction< / a > < a href = "../modules" class = "button hidden-sm" > Modules< / a >
< a href = "../flavors" class = "button hidden-sm" > Flavors< / a > < a href = "../templates" class = "button hidden-sm" > Templates< / a >
< a href = "../customization" class = "button hidden-sm" > Customization< / a > < a href = "../quick_reference" class = "button hidden-sm" > Quick Reference< / a >
2017-04-06 13:33:56 +03:00
< a href = "https://github.com/Chalarangelo/mini.css" class = "button" > < i class = "fa fa-github" aria-hidden = "true" style = "font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;" > < / i > Github< / a >
< / header >
2017-04-28 12:34:02 +03:00
< div class = "container" style = "padding-left: 0.25rem;" >
2017-05-12 14:22:22 +03:00
< div class = "row" > < input type = "checkbox" id = "navigation-toggle" > < nav class = "drawer col-md-4 col-lg-2" >
< label class = "close" for = "navigation-toggle" > < / label >
2017-06-14 12:23:29 +03:00
< a href = "../index" > < h4 style = "margin-left: 0;" > Introduction< / h4 > < / a >
< a href = "../modules" > < h4 style = "margin-left: 0;" > Modules< / h4 > < / a >
< a href = "../flavors" > < h4 style = "margin-left: 0;" > Flavors< / h4 > < / a >
< a href = "../templates" > < h4 style = "margin-left: 0;" > Templates< / h4 > < / a >
< h4 style = "margin-left: 0;" > Customization< / h4 > < a href = "core#core-title" > Core< / a >
< a href = "core#typography-headings" class = "sublink-1" > Typography & headings< / a >
< a href = "core#common-elements" class = "sublink-1" > Common elements & fixes< / a >
< br / > < a href = "grid#grid-title" > Grid< / a >
< a href = "grid#classes-breakpoints" class = "sublink-1" > Classes & breakpoints< / a >
< br / > < a href = "input_control#input-control-title" > Input Control< / a >
< a href = "input_control#forms-input" class = "sublink-1" > Forms & input< / a > < a href = "input_control#checkbox-radio" class = "sublink-1" > Checkboxes & radio buttons< / a > < a href = "input_control#switch" class = "sublink-1" > Switches< / a >
< a href = "input_control#buttons" class = "sublink-1" > Buttons & button groups< / a > < a href = "input_control#button-mixins" class = "sublink-1" > Button mixins< / a > < a href = "input_control#switch-mixins" class = "sublink-1" > Switch mixins< / a >
< br / > < a href = "navigation#navigation-title" > Navigation< / a >
< a href = "navigation#header" class = "sublink-1" > Header< / a > < a href = "navigation#navigation-bar" class = "sublink-1" > Navigation bar< / a >
< a href = "navigation#drawer" class = "sublink-1" > Drawer< / a > < a href = "navigation#footer" class = "sublink-1" > Footer< / a >
< br / > < a href = "table#table-title" > Table< / a >
< a href = "table#table-styling" class = "sublink-1" > Table styling< / a >
< br / > < a href = "card#card-title" > Card< / a >
< a href = "card#cards-sections" class = "sublink-1" > Cards and sections< / a > < a href = "card#card-mixins" class = "sublink-1" > Card mixins< / a >
< br / > < a href = "tab#tab-title" > Tab< / a >
< a href = "tab#tab-styling" class = "sublink-1" > Tab styling< / a >
< br / > < a href = "contextual#contextual-title" > Contextual< / a >
< a href = "contextual#text-highlighting" class = "sublink-1" > Text highlighting< / a > < a href = "contextual#toasts" class = "sublink-1" > Toasts< / a >
< a href = "contextual#tooltips" class = "sublink-1" > Tooltips< / a > < a href = "contextual#modals" class = "sublink-1" > Modals< / a >
< a href = "contextual#highlighting-mixins" class = "sublink-1" > Text highlighting mixins< / a >
< a href = "contextual#toast-mixins" class = "sublink-1" > Toast mixins< / a > < a href = "contextual#tooltip-mixins" class = "sublink-1" > Tooltip mixins< / a >
< br / > < a href = "progress#progress-title" > Progress< / a >
< a href = "progress#progress-bar" class = "sublink-1" > Progress bar< / a > < a href = "progress#donut-spinner" class = "sublink-1" > Donut spinner< / a >
< a href = "progress#progress-mixins" class = "sublink-1" > Progress bar mixins< / a > < a href = "progress#spinner-mixins" class = "sublink-1" > Donut spinner mixins< / a >
< br / > < a href = "utility#utility-title" > Utility< / a >
< a href = "utility#visibility-legacy" class = "sublink-1" > Visibility helpers & legacy features< / a > < a href = "utility#breadcrumbs" class = "sublink-1" > Breadcrumbs< / a >
< a href = "utility#close-icon" class = "sublink-1" > Close icon< / a >
< a href = "utility#borders-shadows-mixins" class = "sublink-1" > Generic border & shadow mixins< / a >
< a href = "utility#responsive-sizing-mixins" class = "sublink-1" > Responsive sizing & spacing mixins< / a >
< a href = "utility#responsive-visibility-mixins" class = "sublink-1" > Responsive visibility helper mixins< / a >
< a href = "../quick_reference" > < h4 style = "margin-left: 0;" > Quick Reference< / h4 > < / a >
2017-05-12 14:22:22 +03:00
< / nav >
2017-04-28 12:34:02 +03:00
< div class = "col-sm-12 col-md-8 col-lg-10" > < main >
< div class = "row" style = "padding-top: 40px;" id = "card-title" >
< div class = "col-sm-12" >
2017-04-06 13:33:56 +03:00
< h1 > Card< / h1 >
2017-05-22 17:05:40 +03:00
< p style = "text-align:justify" > The < strong > card< / strong > module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.< / p > < br / >
2017-04-06 13:33:56 +03:00
< / div >
< / div >
< div class = "row" >
2017-04-28 12:34:02 +03:00
< div class = "col-sm-12" >
2017-04-06 13:33:56 +03:00
< div class = "card fluid" >
< div class = "section" >
< h2 > Quick overview< / h2 >
2017-06-14 12:23:29 +03:00
< p style = "text-align:justify" > 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 < strong > card< / strong > module seeks to help deal with this problem, by utilizing the < a href = "https://css-tricks.com/snippets/css/a-guide-to-flexbox/" > Flexbox Layout< / a > 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 < a href = "grid" > < strong > grid< / strong > < / a > module to deliver the best experience on any device.< / p > < br >
2017-04-06 13:33:56 +03:00
< / div >
< div class = "section" >
2017-04-17 20:09:38 +03:00
< h2 > Quick start< / h2 >
2017-05-22 17:05:40 +03:00
< p style = "text-align:justify" > To customize the < strong > card< / strong > module, duplicate an existing flavor file (we suggest you use the < code > mini-default.scss< / code > 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 < a href = "https://atom.io/packages/sass-autocompile" > sass-autocompile< / a > if you are working with < a href = "https://atom.io/" > Atom< / a > ).< / p > < br >
2017-04-06 13:33:56 +03:00
< / div >
< / div >
< / div >
< / div >
2017-04-28 12:34:02 +03:00
< div class = "row" id = "cards-sections" >
< div class = "col-sm-12" >
2017-04-17 20:09:38 +03:00
< div class = "card fluid" >
< div class = "section" > < h2 > Cards & sections< / h2 > < / div >
< div class = "section" >
2017-05-22 17:05:40 +03:00
< p style = "text-align:justify" > The < strong > card< / strong > 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.< / p > < br / >
2017-05-03 09:58:09 +03:00
< table style = "width: 100%" class = "striped" >
2017-04-17 20:09:38 +03:00
< caption > Variables< / caption >
< thead >
< tr > < th > Variable< / th > < th > Type< / th > < th > Description< / th > < th > Sample value< / th > < / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Variable" > $card-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for card components< / td > < td data-label = "Sample value" > 'card'< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-back-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Background color for card components< / td > < td data-label = "Sample value" > #fafafa< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-fore-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Text color for card components< / td > < td data-label = "Sample value" > $fore-color< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-border-style< / td > < td data-label = "Type" > Border< / td >
< td data-label = "Description" > Border style for card components< / td > < td data-label = "Sample value" > 1px solid #9e9e9e< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-border-radius< / td > < td data-label = "Type" > Border radius< / td >
< td data-label = "Description" > Border radius for card components< / td > < td data-label = "Sample value" > 2px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-margin< / td > < td data-label = "Type" > Margin< / td >
< td data-label = "Description" > Margin for card components< / td > < td data-label = "Sample value" > 16px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-box-shadow< / td > < td data-label = "Type" > Box shadow< / td >
< td data-label = "Description" > Box shadow for card components< / td > < td data-label = "Sample value" > 0 1px 3px rgba(0,0,0, 0.1)< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-normal-width< / td > < td data-label = "Type" > Width< / td >
< td data-label = "Description" > Width for card components< / td > < td data-label = "Sample value" > 320px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-section-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for card components' sections< / td > < td data-label = "Sample value" > 'section'< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-section-border-style< / td > < td data-label = "Type" > Border< / td >
< td data-label = "Description" > Border style for card components' sections< / td > < td data-label = "Sample value" > 1px solid #bdbdbd< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-section-padding< / td > < td data-label = "Type" > Padding< / td >
< td data-label = "Description" > Padding for card components' sections< / td > < td data-label = "Sample value" > 6px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-section-media-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for card components' media sections< / td > < td data-label = "Sample value" > 'media'< / td >
< / tr >
< tr >
< td data-label = "Variable" > $card-section-media-height< / td > < td data-label = "Type" > Height< / td >
< td data-label = "Description" > Height for card components' media sections< / td > < td data-label = "Sample value" > 200px< / td >
< / tr >
< / tbody >
< / table > < br / >
< / div >
< / div >
< / div >
< / div >
2017-04-28 12:34:02 +03:00
< div class = "row" id = "card-mixins" >
< div class = "col-sm-12" >
2017-04-17 20:09:38 +03:00
< div class = "card fluid" >
< div class = "section" > < h2 > Card mixins< / h2 > < / div >
< div class = "section" >
2017-05-22 17:05:40 +03:00
< p style = "text-align:justify" > The < strong > card< / strong > module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.< / p > < br / >
2017-05-03 09:58:09 +03:00
< table style = "width: 100%" class = "striped" >
2017-04-17 20:09:38 +03:00
< caption > Card mixin definitions< / caption >
< thead >
< tr > < th > Mixin< / th > < th > Description< / th > < / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Mixin" > make-card-alt-color (< span class = "fore-primary" > $card-alt-name< / span > , < span class = "fore-primary" > $card-alt-back-color< / span > , < span class = "fore-primary" > $card-alt-fore-color< / span > , < span class = "fore-tertiary" > $card-alt-border-style< / span > , < span class = "fore-tertiary" > $card-alt-border-radius< / span > , < span class = "fore-tertiary" > $card-alt-section-border-style< / span > )< / td >
< td data-label = "Description" > Creates a new card color variant using the specified values.< / td >
< / tr >
< tr >
< td data-label = "Mixin" > make-card-alt-size (< span class = "fore-primary" > $card-alt-size-name< / span > , < span class = "fore-primary" > $card-alt-size-width< / span > )< / td >
< td data-label = "Description" > Creates a new card size variant using the specified values.< / td >
< / tr >
< / tbody >
< / table > < br / >
2017-05-03 09:58:09 +03:00
< table style = "width: 100%" class = "striped" >
2017-04-17 20:09:38 +03:00
< caption style = "font-family: monospace, monospace" > make-card-alt-color< / caption >
< thead >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < th > Sample value< / th > < / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Parameter" > $card-alt-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for the card color variant< / td > < td data-label = "Sample value" > 'inverse'< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-alt-back-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Background color for the card color variant< / td > < td data-label = "Sample value" > #212121< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-alt-fore-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Text color for the card color variant< / td > < td data-label = "Sample value" > #fafafa< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-alt-border-style< / td > < td data-label = "Type" > Border< / td >
< td data-label = "Description" > (Optional) Border style for the card color variant< / td > < td data-label = "Sample value" > 1px solid #424242< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-alt-border-radius< / td > < td data-label = "Type" > Border radius< / td >
< td data-label = "Description" > (Optional) Border radius for the card color variant< / td > < td data-label = "Sample value" > 2px< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-alt-section-border-style< / td > < td data-label = "Type" > Border< / td >
< td data-label = "Description" > (Optional) Border style for the card color variant's section borders< / td > < td data-label = "Sample value" > 1px solid #616161< / td >
< / tr >
< / tbody >
< / table > < br / >
< h3 > Sample usage< / h3 >
< pre > < span class = "fore-secondary" > @include< / span > < span class = "fore-primary" > make-card-alt-color< / span > ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);< / pre >
< br / >
2017-05-03 09:58:09 +03:00
< table style = "width: 100%" class = "striped" >
2017-04-17 20:09:38 +03:00
< caption style = "font-family: monospace, monospace" > make-card-alt-size< / caption >
< thead >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < th > Sample value< / th > < / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Parameter" > $card-alt-size-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for the card size variant< / td > < td data-label = "Sample value" > 'large'< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-alt-size-width< / td > < td data-label = "Type" > Width< / td >
< td data-label = "Description" > Width for the card size variant< / td > < td data-label = "Sample value" > 480px< / td >
< / tr >
< / tbody >
< / table > < br / >
< h3 > Sample usage< / h3 >
< pre > < span class = "fore-secondary" > @include< / span > < span class = "fore-primary" > make-card-alt-size< / span > ('large', 480px);< / pre >
< br / >
2017-05-03 09:58:09 +03:00
< table style = "width: 100%" class = "striped" >
2017-04-17 20:09:38 +03:00
< caption > Card section mixin definitions< / caption >
< thead >
< tr > < th > Mixin< / th > < th > Description< / th > < / tr >
< / thead >
< tbody >
< tr >
2017-05-03 09:58:09 +03:00
< td data-label = "Mixin" > make-card-section-alt-color (< span class = "fore-primary" > $card-section-alt-name< / span > , < span class = "fore-primary" > $card-section-alt-back-color< / span > , < span class = "fore-primary" > $card-section-alt-fore-color< / span > , < span class = "fore-tertiary" > $card-section-alt-border-style< / span > )< / td >
2017-04-17 20:09:38 +03:00
< td data-label = "Description" > Creates a new card section color variant using the specified values.< / td >
< / tr >
< tr >
< td data-label = "Mixin" > make-card-section-alt-style (< span class = "fore-primary" > $card-section-alt-name< / span > , < span class = "fore-primary" > $card-section-alt-padding< / span > )< / td >
< td data-label = "Description" > Creates a new card section style variant using the specified values.< / td >
< / tr >
< / tbody >
< / table > < br / >
2017-05-03 09:58:09 +03:00
< table style = "width: 100%" class = "striped" >
2017-04-17 20:09:38 +03:00
< caption style = "font-family: monospace, monospace" > make-card-section-alt-color< / caption >
< thead >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < th > Sample value< / th > < / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Parameter" > $card-section-alt-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for the card section color variant< / td > < td data-label = "Sample value" > 'dark'< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-section-alt-back-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Background color for the card section color variant< / td > < td data-label = "Sample value" > #e0e0e0< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-section-alt-fore-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Text color for the card section color variant< / td > < td data-label = "Sample value" > #212121< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-section-alt-border-style< / td > < td data-label = "Type" > Border< / td >
< td data-label = "Description" > (Optional) Border style for the card section color variant< / td > < td data-label = "Sample value" > 1px solid #bdbdbd< / td >
< / tr >
< / tbody >
< / table > < br / >
< h3 > Sample usage< / h3 >
< pre > < span class = "fore-secondary" > @include< / span > < span class = "fore-primary" > make-card-section-alt-color< / span > ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);< / pre >
< br / >
2017-05-03 09:58:09 +03:00
< table style = "width: 100%" class = "striped" >
2017-04-17 20:09:38 +03:00
< caption style = "font-family: monospace, monospace" > make-card-section-alt-style< / caption >
< thead >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < th > Sample value< / th > < / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Parameter" > $card-section-alt-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for the card section style variant< / td > < td data-label = "Sample value" > 'double-padded'< / td >
< / tr >
< tr >
< td data-label = "Parameter" > $card-section-alt-padding< / td > < td data-label = "Type" > Padding< / td >
< td data-label = "Description" > Padding for the card section style variant< / td > < td data-label = "Sample value" > 10px< / td >
< / tr >
< / tbody >
< / table > < br / >
< h3 > Sample usage< / h3 >
< pre > < span class = "fore-secondary" > @include< / span > < span class = "fore-primary" > make-card-section-alt-style< / span > ('double-padded', 10px);< / pre >
< br / >
< / div >
< / div >
< / div >
< / div >
2017-04-06 13:33:56 +03:00
< div class = "row" style = "padding-bottom: 20px; padding-top:20px;" >
2017-04-28 12:34:02 +03:00
< div class = "col-sm-12" >
2017-06-14 12:23:29 +03:00
< p style = "text-align:justify" > If you want to learn more about customizing < strong > mini.css< / strong > , go back to the < a href = "../customization" > customization page< / a > or choose a module from the top menu to see its documentation.< / p >
2017-04-06 13:33:56 +03:00
< / div >
< / div >
2017-04-28 12:34:02 +03:00
< / main > < / div > < / div > < / div >
2017-05-22 17:05:40 +03:00
< footer style = "text-align:justify" > < strong > mini.css< / strong > was designed and built with < i class = "fa fa-heart-o" aria-hidden = "true" > < / i > by < a href = "https://github.com/Chalarangelo" > @Chalarangelo< / a > . It is licensed under the < a href = "https://github.com/Chalarangelo/mini.css/blob/master/LICENSE" > MIT License< / a > . You can view the project's source code on < a href = "https://github.com/Chalarangelo/mini.css" > Github< / a > .< / footer >
2017-04-06 13:33:56 +03:00
< / body >
< / html >
