Merge pull request #281 from PhilippeVay/typos-1805

Typos + ligne vide entre règles

sass/_config/_variables.scss

@@ -5,7 +5,7 @@
 // ----------------
 
 // Warning: you should use your own values, regardless of the devices
-// Best practise is Mobile First: (min-width: $breakpoint)
+// Best practice is Mobile First: (min-width: $breakpoint)
 $tiny        : 480px !default; // or 'em' if you prefer, of course
 $small       : 576px !default;
 $medium      : 768px !default;

sass/_library/_layout.scss

@@ -8,7 +8,7 @@
   overflow: hidden;
 }
 
-/* blocks that needs to be placed under floats */
+/* blocks that need to be placed under floats */
 .clear {
   clear: both;
 }

sass/_library/grillade-flex.scss

@@ -7,7 +7,7 @@
 // Responsive breakpoints variables
 
 // Warning : you should use your own values, regardless of the devices
-// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
+// Best practice : (max-width: ($BP - 1)) and (min-width: $BP)
 
 $tiny: 480px !default; // or 'em' if you prefer, of course
 $small: 576px !default;

sass/_library/grillade-grid.scss

@@ -87,6 +87,7 @@ $medium: 768px !default;
       grid-column: auto / span #{$i};
     }
   }
+
   [class*="-small-all"] {
     grid-column: 1 / -1;
   }

sass/components/_alerts.scss

@@ -42,11 +42,13 @@
     width: 100% !important;
     display: block;
   }
+
   &.disabled,
   &--disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
+
   &:empty {
     display: none;
   }

sass/components/_badges.scss

@@ -44,6 +44,7 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+
   &:empty {
     display: none;
   }

sass/components/_buttons.scss

@@ -90,8 +90,8 @@ button {
 }
 
 // nav "burger" button
-// active it with a JS toggle-class to .is-active
+// activate it with a JS toggle-class to .is-active
-// recommanded HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
+// recommended HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
 // see doc : https://knacss.com/styleguide.html#buttons
 .nav-button {
   padding: 0;
@@ -141,7 +141,6 @@ button {
   }
 
   &.is-active {
-
     & > * {
       background-image: none;
       justify-content: center;
@@ -149,6 +148,7 @@ button {
       &::before {
         transform: translateY(50%) rotate3d(0,0,1,45deg);
       }
+
       &::after {
         transform: translateY(-50%) rotate3d(0,0,1,-45deg);
       }

sass/components/_checkbox.scss

@@ -2,9 +2,9 @@
 /* ==Checkbox, radio, switch     */
 /* ----------------------------- */
 /* use .checkbox class on input type=checkbox */
-/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
+/* recommended HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
 /* use .radio class on input type=radio */
-/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
+/* recommended HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
 /* use .switch class on input type=checkbox */
 // <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
 
@@ -31,7 +31,7 @@
   box-shadow: inset 0 0 0 1px $checkbox-color;
   background: #fff;
 
-  ~ label {
+  & ~ label {
     cursor: pointer;
   }
 
@@ -48,17 +48,21 @@
   font-size: 60%;
   box-shadow: inset -#{$switch-size} 0 0 $switch-color, inset 0 0 0 1px $switch-color;
   transition: box-shadow .15s;
+
   &::before, &::after {
     font-weight: bold;
     color: #fff;
   }
+
   &::before {
     content: "✕";
     float: right;
     margin-right: $switch-size /3;
   }
+
   &:checked {
     box-shadow: inset #{$switch-size} 0 0 $color-success, inset 0 0 0 1px $color-success;
+
     &::before {
       content: "✓";
       float: left;
@@ -73,6 +77,7 @@
   width: $checkbox-size;
   height: $checkbox-size;
   transition: background-color .15s;
+
   &:checked {
     background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
     background-size: 60% 60%;
@@ -87,6 +92,7 @@
   width: $checkbox-size;
   height: $checkbox-size;
   transition: background-color .15s;
+
   &:checked {
     background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
     background-size: 80% 80%;

sass/components/_media.scss

@@ -1,7 +1,7 @@
 /* ----------------------------- */
 /* ==Media object                */
 /* ----------------------------- */
-/* recommanded HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
+/* recommended HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
 /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
 
 @media (min-width: $tiny) {
@@ -17,6 +17,7 @@
     &-figure--center {
       align-self: center;
     }
+
     // reverse variant
     &--reverse {
       flex-direction: row-reverse;

sass/components/_tables.scss

@@ -40,6 +40,7 @@ table,
     text-align: left;
     cursor: default;
   }
+
   & thead {
     color: $table-head-color;
     background: $table-head-background;

sass/components/_tabs.scss

@@ -4,7 +4,6 @@
 /* see example on https://knacss.com/styleguide.html#tabs */
 /* NOTE : tabs need JavaScript to be activated */
 
-
 .tabs-menu {
   border-bottom: 2px solid $tabs-border;
 

sass/components/_tags.scss

@@ -39,11 +39,13 @@
     width: 100% !important;
     display: block;
   }
+
   &.disabled,
   &--disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
+
   &:empty {
     display: none;
   }

sass/knacss.scss

@@ -42,12 +42,12 @@
 @import "_library/base";         // basic styles
 @import "_library/print";        // print quick reset
 @import "_library/layout";       // alignment, modules, positionning
-@import "_library/utilities";    // width and spacers helpers
+@import "_library/utilities";    // width and spacer helpers
 @import "_library/responsive";   // Responsive Web Design helpers
 // @import "_library/wordpress"; // WordPress reset and basic styles
 
 // New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex"
-// Note that none of these file is prefixed by an underscore, in order to compile them.
+// Note that none of these files are prefixed by an underscore, in order to compile them.
 @import "_library/grillade-grid"; // grid system with Grid Layout
 
 // Components