From 837f29787ce285fb2a99f8ed66ce631d3c1556a9 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sun, 24 Oct 2021 11:20:23 +0700 Subject: [PATCH] Docs: Fix typos --- docs/index.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/index.html b/docs/index.html index 78392ff9..ada8c771 100644 --- a/docs/index.html +++ b/docs/index.html @@ -182,7 +182,7 @@

Customization

-

You can customize themes with SCSS or you can simply edit the CSS variables.

+

You can customize themes with SCSS or, you can edit the CSS variables.

Example: pick a color!

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

You can find all the CSS variables used in the default theme here: css/themes/default.css

Importing Pico SASS library

-

It is recommended to customize Pico by importing SASS source files into your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.

+

We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.

Compile the SASS file to CSS to get a custom version of Pico.

/* Custom  version */
@@ -282,7 +282,7 @@
 …
-

This allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

+

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

@@ -324,7 +324,7 @@ <main class="container"></main> </body> -

Pico use the same breakpoints and viewports sizes as Bootstrap.

+

Pico uses the same breakpoints and viewports sizes as Bootstrap.

@@ -396,11 +396,11 @@  More about grids -

As Pico focus on native HTML elements, we kept this grid system very minimalist.

-

A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be heavier than the total size of the Pico library. Not really in the Pico spirit.

-

If you need a quick way to prototyping or build a complex layouts, you can look about Flexbox grid layouts. For example: Bootstrap Grid System only or Flexbox Grid.

-

If you need a light and custom grid, you can look about CSS Grid Generators. For example: CSS Grid Generator, Layoutit! or Griddy.

-

Alternatively you can Learn about CSS Grid.

+

As Pico focuses on native HTML elements, we kept this grid system very minimalist.

+

A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.

+

If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

+

If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

+

Alternatively, you can learn about CSS Grid.

@@ -480,7 +480,7 @@

Typography

-

All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.

+

All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.

@@ -708,10 +708,10 @@

Forms

-

All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.

+

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

Inputs are width: 100%; by default. You can use .grid inside a form.

-

All natives form elements are fully customizable and themable with CSS variables.

+

All natives form elements are fully customizable and themeable with CSS variables.

@@ -778,7 +778,7 @@
-

<fieldset> are unstyled and act as a container for radios and checkboxes providing a consistent margin-bottom for the set.

+

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

@@ -861,7 +861,7 @@
-

You can change a checkbox to indeterminate state by setting the indeterminate property to true

+

You can change a checkbox to an indeterminate state by setting the indeterminate property to true

-

You can change a progress bar to indeterminate state by setting the indeterminate property to true

+

You can change a progress bar to an indeterminate state by setting the indeterminate property to true