diff --git a/docs/card.html b/docs/card.html index de19905..f1bfbb5 100644 --- a/docs/card.html +++ b/docs/card.html @@ -19,8 +19,8 @@ .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;} - .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .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;}} .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;} diff --git a/docs/contextual.html b/docs/contextual.html index be7adda..d3ecb53 100644 --- a/docs/contextual.html +++ b/docs/contextual.html @@ -19,8 +19,10 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; } + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} + .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;}} .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;} @@ -156,14 +158,14 @@
Make sure you read this!
Make absolutely sure you read this!
Make certain you read and actually understand this!
Alerts replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm. To create an alert, use a <div>
element, which will contain one or more elements (for example a <h3>
and a <p>
) and add the .alert
class to it. For more urgent alerts, use the .urgent
class and for critical alerts, use the .critical
class.
<div class="alert"> @@ -207,14 +209,14 @@Notes
Animated alerts
-+-This is an alert
Make sure you read this!
This is an urgent alert
Make absolutely sure you read this!
This is a critical alert
Make certain you read and actually understand this!
+Alerts can be animated, so that they pop out a little more to make sure your users can see them. To animate an alert box, use the
.animated
class on an existing.alert
and it shall periodically scale up a little bit to make users notice it.Sample code
<div class="alert animated"> diff --git a/docs/core.html b/docs/core.html index 7c79c7d..27f2f8a 100644 --- a/docs/core.html +++ b/docs/core.html @@ -142,7 +142,7 @@Sample code
Common textual elements
-This is a paragraph with some sample text. Did you know mini.css v2.1 is codenamed Fermion? No? Well, now you do! Oh, by the way, that was some Bold text and here is some text in Italics. Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some
inline code
or some sample input. Oh, also small text is cool, along with its siblings: the subscripthi! and the superscripthello!. Finally, check out the horizontal rule, preformatted code block and quotation below.
+This is a paragraph with some sample text. Did you know mini.css v2 is codenamed Fermion? No? Well, now you do! Oh, by the way, that was some Bold text and here is some text in Italics. Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some
inline code
or some sample input. Oh, also small text is cool, along with its siblings: the subscripthi! and the superscripthello!. Finally, check out the horizontal rule, preformatted code block and quotation below.
function sum(num1, num2) { var num3 = num1 + num2; console.log('Result: ' + num3); diff --git a/docs/customization/card.html b/docs/customization/card.html index 473e4cb..3ff1792 100644 --- a/docs/customization/card.html +++ b/docs/customization/card.html @@ -20,8 +20,8 @@ .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;} - .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .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;}} .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;} td:first-child, td:last-child { font-family: monospace, monospace; } diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html index de72d82..012d9be 100644 --- a/docs/customization/contextual.html +++ b/docs/customization/contextual.html @@ -19,8 +19,8 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; } + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} .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;} td:first-child, td:last-child { font-family: monospace, monospace; } diff --git a/docs/customization/core.html b/docs/customization/core.html index c267077..baa67d9 100644 --- a/docs/customization/core.html +++ b/docs/customization/core.html @@ -20,8 +20,8 @@ .box-centered { text-align: center; } .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } } + .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; } + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; } } 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;} diff --git a/docs/customization/grid.html b/docs/customization/grid.html index 38df404..e9330de 100644 --- a/docs/customization/grid.html +++ b/docs/customization/grid.html @@ -19,12 +19,12 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;} } + .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} } .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; } - .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;margin-bottom: 16px;padding-bottom: 12px;} - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; margin-bottom: 0;}} + .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;} + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}} 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;} diff --git a/docs/customization/index.html b/docs/customization/index.html index 86d6899..bbb1890 100644 --- a/docs/customization/index.html +++ b/docs/customization/index.html @@ -19,8 +19,8 @@ .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;} - .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #bdbdbd;} - @media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;} + @media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}} .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;} diff --git a/docs/customization/input_control.html b/docs/customization/input_control.html index 21cc738..1123d8e 100644 --- a/docs/customization/input_control.html +++ b/docs/customization/input_control.html @@ -19,8 +19,8 @@ .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;} - .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}} .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;} .responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}} diff --git a/docs/customization/navigation.html b/docs/customization/navigation.html index b03aec1..e3bc964 100644 --- a/docs/customization/navigation.html +++ b/docs/customization/navigation.html @@ -19,8 +19,8 @@ .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;} - .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #bdbdbd;} - @media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;} + @media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}} .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;} td:first-child, td:last-child { font-family: monospace, monospace; } diff --git a/docs/customization/progress.html b/docs/customization/progress.html index 7aaad98..3637a09 100644 --- a/docs/customization/progress.html +++ b/docs/customization/progress.html @@ -21,8 +21,8 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}} .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;} td:first-child, td:last-child { font-family: monospace, monospace; } diff --git a/docs/customization/tab.html b/docs/customization/tab.html index c33f9d7..8e291a9 100644 --- a/docs/customization/tab.html +++ b/docs/customization/tab.html @@ -19,8 +19,8 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} .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;} td:first-child, td:last-child { font-family: monospace, monospace; } diff --git a/docs/customization/table.html b/docs/customization/table.html index b581a26..f5909d9 100644 --- a/docs/customization/table.html +++ b/docs/customization/table.html @@ -19,16 +19,10 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} .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; } - table#carded { border-collapse: collapse;border: 0;width: 100%; box-shadow: none; } - table#carded thead, table#carded th { border: 0;height: 1px;width: 1px; margin: -1px; overflow: hidden; padding: 0;position: absolute;clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); } - table#carded tr {display: block;border: 1px solid #bdbdbd;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);background: #fafafa;margin-bottom: 10px; } - table#carded td {display: block;border: 0; border-bottom: 1px solid #bdbdbd; text-align: right; } - table#carded td:before { content: attr(data-label); float: left; font-weight: 700; } - table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; } 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;} diff --git a/docs/customization/utility.html b/docs/customization/utility.html index 4872d8f..ebbf229 100644 --- a/docs/customization/utility.html +++ b/docs/customization/utility.html @@ -19,8 +19,8 @@ .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #b71c1c; } .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; } + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} .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;} td:first-child, td:last-child { font-family: monospace, monospace; } diff --git a/docs/grid.html b/docs/grid.html index 4a99305..00b3ea0 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -19,12 +19,12 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;} } + .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} } .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; } - .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;margin-bottom: 16px;padding-bottom: 12px;} - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; margin-bottom: 0;}} + .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;} + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}} @@ -499,7 +499,7 @@Notes
Column reordering
-+-@@ -520,7 +520,7 @@Notes
+Additionally, if you want to reorder your columns, you can do that to some extent using the
.col-SCR_SZ-first
,.col-SCR_SZ-last
and.col-SCR_SZ-normal
classes to your columns, replacingSCR_SZ
with one of the available screen size names (sm
,md
orlg
). These classes will change the ordering of your columns appropriately to allow you to move content around any way you want (e.g. moving a navigation sidebar from the left of the content on larger displays to the end of the content on smaller displays).Sample code
<div class="container"> diff --git a/docs/input_control.html b/docs/input_control.html index 95a2b5f..882d12f 100644 --- a/docs/input_control.html +++ b/docs/input_control.html @@ -19,8 +19,9 @@ .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;} - .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-lg-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}} + @media (max-width: 1269px) and (min-width: 768px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-bottom: 1px solid #c9c9c9;}} .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;} .responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}} @@ -98,7 +99,7 @@Quick start
Forms & input
-+-+Forms are structured the same way you would structure a normal form in HTML5. Simply create a root
<form>
element and add your<input>
elements inside. Link them to<label>
elements for ease of acces and you are pretty much set. We highly recommend using the<fieldset>
and<legend>
elements to annotate your forms as well, but you can skip them if you wish.Forms are inline by default. Use the
.input-group
class on a<div>
wrapping inside it an<input>
and<label>
pair to make sure they always display together in one line. You can make your.input-group
s respond to viewport changes, by adding the.fluid
class to them. Finally, if you want to create aligned forms with a preset layout, you can utilize the grid module's rows and columns.Sample code
@@ -270,7 +271,7 @@Notes
Checkboxes & radio buttons
-+-
@@ -285,7 +286,7 @@Notes
+Checkboxes and radio buttons come pre-styled, using the checkbox hack, while remaining fully accessible. To create a checkbox or radio button, start using a
<div>
that implements the.input-group
class, and then add an<input>
of the propertype
inside it ("checkbox"
or"radio"
), followed immediately by a<label>
linking to it. Remember to addtabindex="0"
to your<input>
, so that it will register properly for screen readers.Sample code
<div class="input-group"> @@ -358,7 +359,7 @@Notes
Buttons & button groups
-+@@ -370,7 +371,7 @@-Notes
Button group
+All button types have been stylized by default, while maintaining accessiblity. Simply add any
<button>
or an<input>
with a buttontype
(i.e."button"
,"submit"
or"reset"
) and they will be styled accordingly. You can also use the.button
class or therole="button"
attribute for links, labels and other elements of your choice to make them look like buttons.Color variants are available in the form of the
.primary
,.secondary
,.tertiary
and.inverse
classes. Size variants are available as well in the form of.small
and.large
classes.Finally, you can create responsive groups of buttons by wrapping them inside a
@@ -439,7 +440,7 @@<div>
with the.button-group
class.Notes
File upload buttons
-+-
@@ -447,7 +448,7 @@Notes
+File upload buttons are commonly a sore spot in CSS frameworks. We try to remedy this problem by hiding the
<input type="file">
, while maintaining accessibility and using a linked<label>
of the.button
class to display it in a modern way.Sample code
<input type="file" id="file-input"> diff --git a/docs/navigation.html b/docs/navigation.html index e282d0e..73a5ac2 100644 --- a/docs/navigation.html +++ b/docs/navigation.html @@ -19,10 +19,13 @@ .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;} - .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #bdbdbd;} - @media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-lg-4.col-md-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}} + @media (min-width:768px) and (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-md-normal {border: 0;border-bottom: 1px solid #c9c9c9;}} .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;} + .box-colored { color: #f5f5f5;} .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;}} + @media (min-width: 1280px) {.col-sm-12.col-sm-last.col-md-12.col-md-normal.col-lg-4.col-lg-normal {border:0; border-right: 1px solid #c9c9c9; }} @@ -97,7 +100,7 @@Quick start
Header
-+-+The
<header>
HTML element is used for a page's top horizontal navigation menu. It can contain a unique.logo
element as its first child (this structure is not mandatory, but still recommended as a best practice), which can be either text (with or without a link) or an image. The rest of the elements inside the<header>
must be button elements (i.e.<button>
,<input type="button">
,role="button"
or.button
) in order to be styled properly. Textual separators between those can be added using<span>
elements.Sample code
<header> @@ -156,7 +159,7 @@Notes
Navigation bar
-+-
+To add vertical navigation to your websites, use the
<nav>
HTML element. Adding links is pretty simple, just use<a>
elements, no lists or anything else required. In order to add subcategories to your vertical navigation, use any normal textual element as the title of the subcategory and follow it with its links as normal, adding the.sublink-1
class to them. Similarly, you can create a subcategory with a depth of 2, using a similar structure and the.sublink-2
class.Sample code
<nav> @@ -209,12 +212,12 @@Notes
Footer
-+-
+The
<footer>
element is used to create your page's footer. As normal, add the<footer>
at or near the end of your<body>
element and add content to it like you would otherwise.Sample code
<footer> diff --git a/docs/progress.html b/docs/progress.html index bdb0060..ae116d5 100644 --- a/docs/progress.html +++ b/docs/progress.html @@ -21,8 +21,8 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}} .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;} diff --git a/docs/quick_reference.html b/docs/quick_reference.html index f149ab8..ff263d1 100644 --- a/docs/quick_reference.html +++ b/docs/quick_reference.html @@ -19,8 +19,8 @@ .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; } .box-left { text-align: left; } [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} - .col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #bdbdbd;}} + .col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #c9c9c9;}} h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;} diff --git a/docs/tab.html b/docs/tab.html index cc458ce..f29ce23 100644 --- a/docs/tab.html +++ b/docs/tab.html @@ -19,10 +19,10 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-lg-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} .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;} + .box-colored {color: #f5f5f5;} @media (max-width: 1279px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box; border: 0; 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;}} @@ -97,7 +97,7 @@Quick start
Basic syntax
-+-@@ -113,7 +113,7 @@Quick start
Tab 4
This is the fourth tab's content.
+The tab container's basic sytanx is composed of two components, presented below in the order they should be added to the DOM tree:
- At the outermost level of the tab container is a
@@ -213,7 +213,7 @@<div>
element implementing the.tabs
class. This serves as the wrapper of the tab container.Notes
Stacked tabs
-+-@@ -231,7 +231,7 @@Notes
This is the second collapse section's content.
+Apart from the normal tab layout, you can make your tabs stacked instead, using the
.stacked
class in your.tabs
container element. Stacked tabs are more versatile, allowing you to use checkboxes and/or radio buttons to implement collapses, accordions and spoilers. Carousel-styled elements can also be displayed in this fashion, if you wish. Remember to use thearia-hidden="true"
attribute to make your tabs fully accessible, as before.Sample code
<div class="tabs stacked"> diff --git a/docs/table.html b/docs/table.html index 15e4c43..370a7e0 100644 --- a/docs/table.html +++ b/docs/table.html @@ -19,16 +19,16 @@ .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;} - @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;} + @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} .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; } table#carded { border-collapse: collapse;border: 0;width: 100%; box-shadow: none; } table#carded thead, table#carded th { border: 0;height: 1px;width: 1px; margin: -1px; overflow: hidden; padding: 0;position: absolute;clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); } - table#carded tr {display: block;border: 1px solid #bdbdbd;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);background: #fafafa;margin-bottom: 10px; } - table#carded td {display: block;border: 0; border-bottom: 1px solid #bdbdbd; text-align: right; } + table#carded tr {display: block;border: 1px solid #c9c9c9;box-shadow: none;background: #fafafa; margin-bottom: 0.625rem; } + table#carded td {display: block;border: 0; border-bottom: 1px solid #c9c9c9; text-align: right; } table#carded td:before { content: attr(data-label); float: left; font-weight: 700; } - table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; } + table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }.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;}} @@ -103,7 +103,7 @@Quick start
Basic syntax & responsiveness
-+Medium/Large screen layout
@@ -133,7 +133,7 @@
Small screen layout
-+Table layout utilizes the
<table>
HTML element with the following structure (usual tabular structure):
- On the outermost level, there is the
@@ -232,7 +232,7 @@<table>
element.Notes
Horizontal tables
-+-
People @@ -248,7 +248,7 @@Horizontal tables
+Horizontal tables can be created, by simply adding the
.horizontal
class to the root element of your table (i.e. the<table>
element). Horizontal tables are flexible, so they can accommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add thedata-label
attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that.horizontal
tables do not support the<tfoot>
element.Sample code
<table class="horizontal"> @@ -307,7 +307,7 @@Notes
Table variants & matrices
-+-
Star Wars Character Alignment Table @@ -320,7 +320,7 @@Notes
+Tables are responsive by default, however you can disable this functionality for one or more tables (normal or
.horizontal
), using the.preset
class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have<th>
elements inside the<tbody>
element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the.striped
class.Sample code
The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.
diff --git a/docs/utility.html b/docs/utility.html index a56f789..c5362fe 100644 --- a/docs/utility.html +++ b/docs/utility.html @@ -19,8 +19,10 @@ .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #b71c1c; } .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;} - .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}} + .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; } + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}} + .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;}} .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;} @@ -249,12 +251,12 @@Notes
Breadcrumbs
-+-
+Breadcrumbs are usually used to show the navigational hierarchy of pages or folders. To use them, simply create a
<ul>
element that implements the.breadcrumbs
class. Inside this unordered list, add as many<li>
elements as needed to show your hierarchy. You can add links to the list elements, as necessary.Sample code
<ul class="breadcrumbs"> diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index ffff647..27ea7f2 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -1086,3 +1086,6 @@ - Fixed a typo in `core`'s code, nothing was really affected, but it's nice to have it fixed. - Optimized certain pieces of code in the `grid` module, including the pre-defined layouts in shared rules, actually saving a little bit of space. Size is now `6.50KB`, a noticeable improvement over the previous size. - Dramatically improved `input_control`'s `.button-group` styling, by reworking the way the combinatory selectors (`element + element`) inside it work, based on the fact that we are just styling the last element and we don't care about what the previous one was. This shaved off quite a lot of size, shrinking `mini-default` down to `6.37KB`. **Hugging cat** is especially happy with this. +- Tried improving `:checked` styling for checkboxes, radios and `.tabs`, but decided it was not worth the lack of specificity due to very little space saved in reality. +- Updated doc layout for consistency and better display on most screens. +- Updated custom `border` styling for docs to be consistent in terms of coloring.