From cb2eda1b561c3dd993217b063c3f5690303af409 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 19 Dec 2016 23:28:23 +0200 Subject: [PATCH] Documentation proofreading --- docs/card.html | 2 +- docs/contextual.html | 2 +- docs/customization.html | 12 ++++++------ docs/grid.html | 2 +- docs/index.html | 6 +++--- docs/input_control.html | 4 ++-- docs/tab.html | 2 +- docs/table.html | 2 +- docs/v2/DEVLOG.md | 1 + 9 files changed, 17 insertions(+), 16 deletions(-) diff --git a/docs/card.html b/docs/card.html index 5a52ff1..7861dd4 100644 --- a/docs/card.html +++ b/docs/card.html @@ -134,7 +134,7 @@
-

To start using cards in your layout, you need to be somewhat familiar with the grid 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:

+

To start using cards in your layout, you need to be somewhat familiar with the grid 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:

  1. At the outermost level of the card layout syntax is a .row, which serves as a wrapper for all the cards inside it.
  2. Inside the .row, cards are defined as <div> elements of the .card class.
    3. diff --git a/docs/contextual.html b/docs/contextual.html index df7127e..f312b71 100644 --- a/docs/contextual.html +++ b/docs/contextual.html @@ -164,7 +164,7 @@ 
    <mark class="inline-block">some 
   <mark class="secondary">text</mark>
 </mark>
    -

    Do: You can only nest a <mark> inside another if the outer one is of the .inline-block class. You can color the inner <mark> using any of the contextual color classses or even make it a .tag. Be careful, however, to not make the inner <mark> an .inline-block as well.

    +

    Do: You can only nest a <mark> inside another if the outer one is of the .inline-block class. You can color the inner <mark> using any of the contextual color classes or even make it a .tag. Be careful, however, to not make the inner <mark> an .inline-block as well.

<mark>some 
diff --git a/docs/customization.html b/docs/customization.html
index ac89346..67baea2 100644
--- a/docs/customization.html
+++ b/docs/customization.html
@@ -98,11 +98,11 @@
       

         

           
Code optimization

-          
Building mini.css 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.

+          
Building mini.css 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.

         

         

           
Mixins

-          
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 @mixin 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 @include it, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for mini.css

+          
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 @mixin 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 @include it, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for mini.css.

         

       

       

@@ -132,7 +132,7 @@
               
Grid

             

             

-              
The grid module contains two importan variables, the boolean $use-four-step-grid which determines if the grid has 3 or 4 breakpoints and the $grid-column-count 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.

+              
The grid module contains two important variables, the boolean $use-four-step-grid which determines if the grid has 3 or 4 breakpoints and the $grid-column-count 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.
@@ -140,7 +140,7 @@

Navigation

-

The navigation 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 <header> element will be affected by the styling of all button elements, as defined in the input_control module. The variable stands out in this module is $nav-sublink-depth which determines how deep a navigational hierarchy tree can be.

+

The navigation 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 <header> element will be affected by the styling of all button elements, as defined in the input_control module. The variable that stands out in this module is $nav-sublink-depth which determines how deep a navigational hierarchy tree can be.

@@ -191,7 +191,7 @@

Contextual

-

The contextual module features, apart from basic naming and styling variables, a few things of note. The boolean variable $alert-include-animated 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:

+

The contextual module features, apart from basic naming and styling variables, a few things of note. The boolean variable $alert-include-animated 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:

diff --git a/docs/grid.html b/docs/grid.html index 4518fe1..2f44afc 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -252,7 +252,7 @@ 
<div class="row">
   <p>Content without columns...</p>
 </div>
-

Don't: Avoid using rows with content inside that is not in wrapped in columns. Try to use a single .col-sm to wrap the content inside these, otherwise there might be unexpected behavior.

+

Don't: Avoid using rows with content inside that is not wrapped in columns. Try to use a single .col-sm to wrap the content inside these, otherwise there might be unexpected behavior.

<div class="row">
diff --git a/docs/index.html b/docs/index.html
index d293356..09e8e04 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -121,7 +121,7 @@
             
npm install mini.css

-

If you are interested in tinkering with the flavor files and cooking your own flavor, check out the Customization page for information, tips on how to get started and general guidelines.

+

If you are interested in tinkering with the flavor files and cooking your own flavor, check out the Customization page for information, tips on how to get started and general guidelines.

@@ -197,7 +197,7 @@

Why does mini.css have so few modules?

-

Modules are what makes toolkits so powerful, by giving developers the essential components they need to structure and style their websites. mini.css 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.

+

Modules are what make toolkits so powerful, by giving developers the essential components they need to structure and style their websites. mini.css 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.

@@ -256,7 +256,7 @@
-

! Due to the way mini.css 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.

+

! Due to the way mini.css 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.

diff --git a/docs/input_control.html b/docs/input_control.html index 7d94071..e523326 100644 --- a/docs/input_control.html +++ b/docs/input_control.html @@ -95,7 +95,7 @@

Input Control

-

The input_control 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.

+

The input_control 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.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

@@ -507,7 +507,7 @@ <input type="file" id="file-input"> <label for="file-input" class="button">Upload file...</label> </div> -

Do: You can use an .input-group to wrap the file uplaod <input> and its linked <label>, if you wish.

+

Do: You can use an .input-group to wrap the file upload <input> and its linked <label>, if you wish.

diff --git a/docs/tab.html b/docs/tab.html index 9d88d55..97bcce8 100644 --- a/docs/tab.html +++ b/docs/tab.html @@ -281,7 +281,7 @@
-

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 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 aria-hidden="true" attribute to make your tabs fully accessible, as before.

+

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 the aria-hidden="true" attribute to make your tabs fully accessible, as before.

Sample code

<div class="tabs stacked">
   <input type="radio" name="accordion" id="a1" checked aria-hidden="true">
diff --git a/docs/table.html b/docs/table.html
index cc05a72..6ffd7da 100644
--- a/docs/table.html
+++ b/docs/table.html
@@ -353,7 +353,7 @@
-

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 acommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add the data-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.

+

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 the data-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">
   <caption>People</caption>
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 8b1a49d..fa2787c 100644
--- a/docs/v2/DEVLOG.md
+++ b/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.