mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
Docs: Fix typos
This commit is contained in:
Lucas Larroche
parent
001d1a9657
commit
837f29787c
1 changed files with 15 additions and 15 deletions
|
|
@ -182,7 +182,7 @@
|
|||
<section id="customization">
|
||||
<hgroup>
|
||||
<h2>Customization</h2>
|
||||
<h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
|
||||
<h3>You can customize themes with SCSS or, you can edit the CSS variables.</h3>
|
||||
</hgroup>
|
||||
<p>Example: <strong>pick a color!</strong></p>
|
||||
|
||||
|
|
@ -256,7 +256,7 @@
|
|||
|
||||
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
|
||||
<h4>Importing Pico SASS library</h4>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
|
||||
|
||||
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||
|
|
@ -282,7 +282,7 @@
|
|||
<em>…</em>
|
||||
</code></pre>
|
||||
|
||||
<p>This allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||
<p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||
</section><!-- ./ Docs: Customization -->
|
||||
|
||||
<!-- Docs: Classless -->
|
||||
|
|
@ -324,7 +324,7 @@
|
|||
<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>
|
||||
</<b>body</b>></code></pre>
|
||||
|
||||
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
|
||||
<p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
|
|
@ -396,11 +396,11 @@
|
|||
</svg>
|
||||
More about grids
|
||||
</summary>
|
||||
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
|
||||
<p>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.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
|
||||
<p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
|
||||
<p>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.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
|
||||
</details>
|
||||
</section><!-- ./ Docs: Grid -->
|
||||
|
||||
|
|
@ -480,7 +480,7 @@
|
|||
<section id="typography">
|
||||
<hgroup>
|
||||
<h2>Typography</h2>
|
||||
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.</h3>
|
||||
<h3>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h3>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
|
|
@ -708,10 +708,10 @@
|
|||
<section id="forms">
|
||||
<hgroup>
|
||||
<h2>Forms</h2>
|
||||
<h3>All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.</h3>
|
||||
<h3>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h3>
|
||||
</hgroup>
|
||||
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
|
||||
<p>All natives form elements are fully customizable and themable with CSS variables.</p>
|
||||
<p>All natives form elements are fully customizable and themeable with CSS variables.</p>
|
||||
<article aria-label="Form example">
|
||||
<form>
|
||||
<div class="grid">
|
||||
|
|
@ -778,7 +778,7 @@
|
|||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>fieldset</b>></code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
|
||||
<p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
|
||||
<p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
|
||||
<article aria-label="Select, radios, checkboxes, switch examples">
|
||||
<label for="fruit">Fruit</label>
|
||||
|
|
@ -861,7 +861,7 @@
|
|||
|
||||
</footer>
|
||||
</article>
|
||||
<p>You can change a checkbox to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<article aria-label="Indeterminate checkbox example">
|
||||
<label for="indeterminate-checkbox">
|
||||
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
|
||||
|
|
@ -1220,7 +1220,7 @@
|
|||
|
||||
</footer>
|
||||
</article>
|
||||
<p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<p>You can change a progress bar to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<article aria-label="Indeterminate progress bar example">
|
||||
<progress id="indeterminate-progress"></progress>
|
||||
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue