Core documentation update

dist/mini-default.css

@@ -39,7 +39,7 @@ input {
   overflow: visible; }
 
 img {
-  width: 100%;
+  max-width: 100%;
   height: auto; }
 
 dfn {

docs/v2/DEVLOG.md

@@ -571,3 +571,5 @@
 - Added some information and demos about `card` `section`s.
 - Changed values for some `card` module variables used in mixins.
 - Fully documented `card` module.
+- Updated `img` responsiveness in `core` to use `max-width` instead of `width`.
+- Added documentation for responsive `img` and general typography rules in the `core` doc page.

docs/v2/core.html

@@ -103,6 +103,26 @@
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col-sm">
+          <div class="card fluid">
+            <div class="section">
+              <h2>Typography</h2>
+            </div>
+            <div class="section row">
+              <div class="col-sm-12">
+                <p>For the basic typography rules we did the following, along with other things presented below:</p>
+                <ul>
+                  <li>We use a <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> to figure out the best font for your device.</li>
+                  <li>We set the colors to <code>background: #f5f5f5;</code> and <code>color: #212121;</code>.</li>
+                  <li>We use a <code>font-size</code> of <code>16px</code> for the root element.</li>
+                  <li>We set <code>line-height</code> to <code>1.5</code>.</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="col-sm">
           <div class="card fluid">
@@ -207,6 +227,27 @@
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col-sm">
+          <div class="card fluid">
+            <div class="section">
+              <h2>Image responsiveness</h2>
+            </div>
+            <div class="section row">
+              <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
+                <div>
+                  <img src="http://placehold.it/800x600">
+                </div>
+              </div>
+              <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
+                <p>Image elements (<code>&lt;img&gt;</code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p>
+                <h3>Sample code</h3>
+                <pre>&lt;img src=&quot;...&quot;&gt;</pre><br>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm">
           <p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>

docs/v2/playground.html

@@ -91,14 +91,14 @@
                   <br>
                   <div class="row">
                     <div class="card"><div class="section"><h3>Small Card</h3><p>Small cards are <code>240px</code> wide.</p></div></div>
-                    
+
                   <div class="col-sm" style="justify-content: space-around;">
                       <div class="card fluid" style="margin: 2px 10px 20px;"><div class="section"><h3>Fluid Card</h3><p>Fluid cards scale their width based on their container. This one is inside a</p></div><img class="section media" src="http://placehold.it/800x600"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0"></iframe></div>
                       </div>
                   </div>
                   <br>
                 </div>
-
+                <img src="http://placehold.it/800x600">
     <br><br>
     <h4>Contextual tests</h4>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer <mark class="inline-block">took a galley of type and scrambled  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularisedin the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

src/mini/_core.scss

@@ -62,7 +62,7 @@ input {
 
 // Make images responsive by default.
 img {
-	width: 100%;
+	max-width: 100%;
  	height: auto;
 }
 

src/mini/_utility.scss

@@ -3,7 +3,7 @@
 .#{$hidden-name}{
 	display: none !important;
 }
-// Visually hidden elements class. ATTENTIONS: Uses !important.
+// Visually hidden elements class. ATTENTION: Uses !important.
 .#{$visually-hidden-name} {
 	position: absolute !important;
 	width: 1px !important;