Update readme file

jfmdev · jfmdev · commit 371887dc1c1e · 2024-05-16T11:53:06.000-03:00
diff --git a/README.md b/README.md
@@ -4,16 +4,29 @@ A CSS library that provides utility CSS classes which complement [PureCSS](https
 
 [See Demo](https://jfmdev.github.io/purecss-utilities/demo.html)
 
-> Note: the library doesn't provide utilities for Flexbox containers, for that you can use the [Flexbox utility classes](https://gist.github.com/jfmdev/e3541b3d9e94866fe429b9baf89e6303) Gist.
+## Installation
 
+You can add this library to your page using the CDN from jsDelivr, just add a `<link>` element into your page's `<head>`, before your project's stylesheets but after PureCSS stylesheets. E.g.:
 
-## Installation
+```html
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/purecss-utilities@main/dist/all.css">
+</head>
+```
+
+You can also install the package using NPM:
+
+```
+npm install purecss purecss-utilities --save
+```
 
-TODO (first publish on NPM)
+And then reference the `css` files (from the `dist/` folder) or the `scss` files (from the `src/` folder), like:
 
-> https://cdn.jsdelivr.net/gh/jfmdev/purecss-utilities@main/dist/all.css
-> 
-> https://www.jsdelivr.com/documentation
+```js
+import 'purecss/build/pure-min.css'
+import 'purecss-utilities/dist/all.css'
+```
 
 ## Utilities
 
@@ -61,6 +74,9 @@ The library provides `pure-m-*` and `pure-p-*` classes for controlling an elemen
 
 To set the margin or padding to a single side, you can use classes `pure-mb-*` / `pure-ml-*` / `pure-mr-*` / `pure-mt-*` and `pure-pb-*` / `pure-pl-*` / `pure-pr-*` / `pure-pt-*`; and to set the margin or padding to the horizontal or vertical sides, you can use classes `pure-mx-*` / `pure-my-*` and `pure-px-*` / `pure-py-*`.
 
+### Flex
+
+The library doesn't provide utilities for Flexbox containers, for that you can use the [Flexbox utility classes](https://gist.github.com/jfmdev/e3541b3d9e94866fe429b9baf89e6303) Gist.
 
 ## Customization
 
@@ -72,20 +88,17 @@ You can override these variables to change the colors used, but on that case you
 
 Additionally, for the case of buttons, you may also need to override the variables `---pureBlackContrastRgb` / `---pureBlueContrastRgb` / `---pureCyanContrastRgb` / `---pureGreenContrastRgb` / `---pureGreyContrastRgb` / `---pureMagentaContrastRgb` / `---pureRedContrastRgb` / `---pureWhiteContrastRgb` / `---pureYellowContrastRgb` that define the color of the labels inside the buttons.
 
-
 ### Spacing
 
 The base spacing used is `0.25rem`, but you can change this value by overriding the value of the `--pureSpacingUnit` variable.
 
-
 ## Development
 
 The library was implemented using [Sass](https://sass-lang.com/), you can use the following commands to build it:
 
 * `npm run build`
 * `npm run dev`
 
-
 ## License
 
 PureCSS Utilities is free software; you can redistribute it and/or modify it under the terms of the Mozilla Public License v2.0. You should have received a copy of the MPL 2.0 along with this software, otherwise you can obtain one at http://mozilla.org/MPL/2.0/.
