Documentation proofreading

docs/card.html

@@ -134,7 +134,7 @@
                 </div>
               </div>
               <div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
-                <p>To start using cards in your layout, you need to be somewhat familiar with the <a href="grid.html"><strong>grid</strong></a> module, so if you aren't take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
+                <p>To start using cards in your layout, you need to be somewhat familiar with the <a href="grid.html"><strong>grid</strong></a> module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
                 <ol>
                   <li>At the outermost level of the card layout syntax is a <code>.row</code>, which serves as a wrapper for all the cards inside it.</li>
                   <li>Inside the <code>.row</code>, cards are defined as <code>&lt;div&gt;</code> elements of the <code>.card</code> class.</li>

docs/contextual.html

@@ -164,7 +164,7 @@
                   <pre>&lt;mark class=&quot;inline-block&quot;&gt;some 
   &lt;mark class=&quot;secondary&quot;&gt;text&lt;/mark&gt;
 &lt;/mark&gt;</pre>
-                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can only nest a <code>&lt;mark&gt;</code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code>&lt;mark&gt;</code> using any of the contextual color classses or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code>&lt;mark&gt;</code> an <code>.inline-block</code> as well.</p>
+                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can only nest a <code>&lt;mark&gt;</code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code>&lt;mark&gt;</code> using any of the contextual color classes or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code>&lt;mark&gt;</code> an <code>.inline-block</code> as well.</p>
                 </div>          
                 <div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
                   <pre>&lt;mark&gt;some 

docs/customization.html

@@ -98,11 +98,11 @@
       <div class="row">
         <div class="col-sm-12 col-md-6">
           <h3>Code optimization</h3>
-          <p>Building <strong>mini.css</strong> was no small task. Making it lightweight and customizable made things even harder, because these two things don't go well together most of the time. What we did was put more of the load on the preprocessor, instead of the final file. In order to accomplish this, we optimized as much of the code was possible, using conditions, flags and other tricks, so that compiling a flavor file might take one second longer, but loading won't. If you add any code to a flavor yourself, remember not only to make it customizable, but also to optimize it as best as possible.</p>
+          <p>Building <strong>mini.css</strong> was no small task. Making it lightweight and customizable made things even harder, because these two things don't go well together most of the time. What we did was put more of the load on the preprocessor, instead of the final file. In order to accomplish this, we optimized as much of the code as possible, using conditions, flags and other tricks, so that compiling a flavor file might take one second longer, but loading won't. If you add any code to a flavor yourself, remember not only to make it customizable, but also to optimize it as best as possible.</p>
         </div>
         <div class="col-sm-12 col-md-6">
           <h3>Mixins</h3>
-          <p>A lot of elements and components can be styled in many ways and a lot of the time we want a few styles to be available, without having to rewrite everything. We utilized the <code>@mixin</code> directive of Sass wherever we could to make it possible for you to easily create styles for pre-existing components and elements without having to tweak the base code for said elements or components. To use a mixin, simply <code>@include</code> it, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for <strong>mini.css</strong></p>
+          <p>A lot of elements and components can be styled in many ways and most of the time we want a few styles to be available, without having to rewrite everything. We utilized the <code>@mixin</code> directive of Sass wherever we could to make it possible for you to easily create styles for pre-existing components and elements without having to tweak the base code for said elements or components. To use a mixin, simply <code>@include</code> it, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for <strong>mini.css</strong>.</p>
         </div>
       </div>
       <div class="row">
@@ -132,7 +132,7 @@
               <h3>Grid</h3>
             </div>
             <div class="section">
-              <p>The <strong>grid</strong> module contains two importan variables, the boolean <code>$use-four-step-grid</code> which determines if the grid has 3 or 4 breakpoints and the <code>$grid-column-count</code> which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.</p>
+              <p>The <strong>grid</strong> module contains two important variables, the boolean <code>$use-four-step-grid</code> which determines if the grid has 3 or 4 breakpoints and the <code>$grid-column-count</code> which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.</p>
             </div>
           </div>
           <div class="card fluid">
@@ -140,7 +140,7 @@
               <h3>Navigation</h3>
             </div>
             <div class="section">
-              <p>The <strong>navigation</strong> module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing and similar things. Bear in mind that the presentation of buttons inside the <code>&lt;header&gt;</code> element will be affected by the styling of all button elements, as defined in the <code>input_control</code> module. The variable stands out in this module is <code>$nav-sublink-depth</code> which determines how deep a navigational hierarchy tree can be.</p>
+              <p>The <strong>navigation</strong> module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing or similar things. Bear in mind that the presentation of buttons inside the <code>&lt;header&gt;</code> element will be affected by the styling of all button elements, as defined in the <code>input_control</code> module. The variable that stands out in this module is <code>$nav-sublink-depth</code> which determines how deep a navigational hierarchy tree can be.</p>
             </div>
           </div>
           <div class="card fluid">
@@ -191,7 +191,7 @@
               <h3>Contextual</h3>
             </div>
             <div class="section">
-              <p>The <strong>contextual</strong> module features, apart from basic naming and styling variables, a few things of note. The boolean variable <code>$alert-include-animated</code> determines if animted alerts will be inluded or not. There are also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:</p>
+              <p>The <strong>contextual</strong> module features, apart from basic naming and styling variables, a few things of note. The boolean variable <code>$alert-include-animated</code> determines if animated alerts will be inluded or not. There is also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:</p>
               <ul>
                 <li><code>make-mark-alt-color</code> - mark color variants</li>
                 <li><code>make-mark-alt-style</code> - mark size and spacing variants</li>
@@ -211,7 +211,7 @@
                 <li><code>make-progress-alt-color</code> - progress color variants</li>
                 <li><code>make-progress-alt-style</code> - progress size and spacing variants</li>
                 <li><code>make-spinner-donut-alt-color</code> - spinner donut color variants</li>
-                <li><code>make-spinner-donutt-alt-style</code> - spinner donut size and spacing variants</li>
+                <li><code>make-spinner-donut-alt-style</code> - spinner donut size and spacing variants</li>
               </ul>
             </div>
           </div>

docs/grid.html

@@ -252,7 +252,7 @@
                   <pre>&lt;div class=&quot;row&quot;&gt;
   &lt;p&gt;Content without columns...&lt;/p&gt;
 &lt;/div&gt;</pre>
-                  <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using rows with content inside that is not in wrapped in columns. Try to use a single <code>.col-sm</code> to wrap the content inside these, otherwise there might be unexpected behavior.</p>
+                  <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using rows with content inside that is not wrapped in columns. Try to use a single <code>.col-sm</code> to wrap the content inside these, otherwise there might be unexpected behavior.</p>
                 </div>
                 <div class="col-sm-12 col-md-6 col-lg-4">
                   <pre>&lt;div class=&quot;row&quot;&gt;

docs/index.html

@@ -121,7 +121,7 @@
             <pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre>
           </div>
         </div><br>
-        <p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="#">Customization</a> page for information, tips on how to get started and general guidelines.</p>
+        <p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="customization.html">Customization</a> page for information, tips on how to get started and general guidelines.</p>
         <hr>
       </div>
       <div class="row">
@@ -197,7 +197,7 @@
         </div>
         <div class="col-sm-12 col-md">
           <h3>Why does <strong>mini.css</strong> have so few modules?</h3>
-          <p>Modules are what makes toolkits so powerful, by giving developers the essential components they need to structure and style their websites. <strong>mini.css</strong> simplifies the crafting and learning process for new developers by providing a handful of very powerful modules that can do many different things. This way, new developers will only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. For example, cards can be used for almost any type of layout and can be customized to do exactly what the developer wants. Tabs, on the other hand, are very responsive on mobile, collapsing to a stack below a certain width, but they can also be forced into a stack, allowing accordions and collapses to be built using the same building block as tabs.</p>
+          <p>Modules are what make toolkits so powerful, by giving developers the essential components they need to structure and style their websites. <strong>mini.css</strong> simplifies the crafting and learning process for new developers by providing a handful of very powerful modules that can do many different things. This way, new developers will only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. For example, cards can be used for almost any type of layout and can be customized to behave exactly as the developer needs them to. Tabs, on the other hand, are very responsive on mobile, collapsing to a stack below a certain width, but they can also be forced into a stack, allowing accordions and collapses to be built using the same building block as tabs.</p>
         </div>
       </div>
       <div class="col-sm-12">
@@ -256,7 +256,7 @@
             </tr>
           </tbody>
         </table><br>
-        <p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark>&nbsp;Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the above table, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not display or behave properly due to the browsers themselves.</p>
+        <p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark>&nbsp;Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p>
         <hr>
       </div>
       <div class="row" style="padding-bottom: 40px;">

docs/input_control.html

@@ -95,7 +95,7 @@
       <div class="row" style="padding-top: 40px;">
         <div class="col-sm">
           <h1>Input Control</h1>
-          <p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
+          <p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
           <p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
           <ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Input Control</li></ul>
         </div>
@@ -507,7 +507,7 @@
   &lt;input type=&quot;file&quot; id=&quot;file-input&quot;&gt;
   &lt;label for=&quot;file-input&quot; class=&quot;button&quot;&gt;Upload file...&lt;/label&gt;
 &lt;/div&gt;</pre>
-                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can use an <code>.input-group</code> to wrap the file uplaod <code>&lt;input&gt;</code> and its linked <code>&lt;label&gt;</code>, if you wish.</p>
+                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can use an <code>.input-group</code> to wrap the file upload <code>&lt;input&gt;</code> and its linked <code>&lt;label&gt;</code>, if you wish.</p>
                 </div>
               </div>
             </div>

docs/tab.html

@@ -281,7 +281,7 @@
                 </div>       
               </div>
               <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
-                <p>Apart from the normal tab layout, you can make your tabs stacked instead, using the <code>.stacked</code> class in your <code>.tabs</code> container element. Stacked tabs are more vesatile, 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 the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> attribute to make your tabs fully accessible, as before.</p>
+                <p>Apart from the normal tab layout, you can make your tabs stacked instead, using the <code>.stacked</code> class in your <code>.tabs</code> 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 the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> attribute to make your tabs fully accessible, as before.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;div class=&quot;tabs stacked&quot;&gt;
   &lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a1&quot; checked aria-hidden=&quot;true&quot;&gt;

docs/table.html

@@ -353,7 +353,7 @@
                 </div>
               </div>
               <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
-                <p>Horizontal tables can be created, by simply adding the <code>.horizontal</code> class to the root element of your table (i.e. the <code>&lt;table&gt;</code> element). Horizontal tables are flexible, so they can acommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add the <code>data-label</code> attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that <code>.horizontal</code> tables do not support the <code>&lt;tfoot&gt;</code> element.</p>
+                <p>Horizontal tables can be created, by simply adding the <code>.horizontal</code> class to the root element of your table (i.e. the <code>&lt;table&gt;</code> 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 the <code>data-label</code> attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that <code>.horizontal</code> tables do not support the <code>&lt;tfoot&gt;</code> element.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;table class=&quot;horizontal&quot;&gt;
   &lt;caption&gt;People&lt;/caption&gt;

docs/v2/DEVLOG.md

@@ -677,3 +677,4 @@
 - Created codepens until the end of `contextual`, `progress` and `utility` will be done later today.
 - *TODO* Notes for `quick reference`.
 - *TODO* Readme, demo image etc.
+- Extensive proofreading and fixes.