Add examples

README.md

@@ -21,8 +21,11 @@
 
 
 - **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
+
 - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
+
 - **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices.
+
 - **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference.
 
 ## Usage
@@ -50,14 +53,27 @@ npm install @picocss/pico
 
 ## Examples
 
-<a href="https://picocss.com/#examples">
-  <img src="https://picocss.com/img/examples.jpg">
-</a>
+[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples)
 
-- [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes`
-- [**Company**](https://picocss.com/examples/company/): A classic company or blog layout with a sidebar.
-- [**Google Amp**](https://picocss.com/examples/google-amp/): A simple layout for Google Amp, with inlined CSS.
-- [**Sign in**](https://picocss.com/examples/sign-in/): A minimalist layout for Login pages.
+- **[Class-less](https://picocss.com/examples/classless/)**  
+  Just a pure semantic HTML markup, without `.classes`
+
+- **[Company](https://picocss.com/examples/company/)**  
+  A classic company or blog layout with a sidebar
+
+- **[Google Amp](https://picocss.com/examples/google-amp/)**   
+  A simple layout for Google Amp, with inlined CSS
+
+- **[Sign in](https://picocss.com/examples/sign-in/)**  
+  A minimalist layout for Login pages
+
+- **[Form elements](https://picocss.com/examples/form-elements/)**  
+  Semantic HTML form markup, without any `.classes` or `JavaScript`
+
+- **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**  
+  Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
+
+All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
 
 ## Documentation
 

docs/index.html

@@ -328,6 +328,7 @@
 
             </article>
             <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
+            <p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
             <details>
               <summary>
                 <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -338,7 +339,7 @@
                 &nbsp;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 +140% of the whole Pico library size. Not really in the Pico spirit.</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>
@@ -754,6 +755,7 @@
 &lt;/<b>fieldset</b>&gt;</code></pre>
 
             </article>
+            <p>Advanced example with all form elements supported in Pico <a href="https://picocss.com/examples/form-elements/">here</a>.</p>
           </section><!-- ./ Docs: Form -->
 
           <!-- Docs: Accordions -->