Paragon-framework NPM

Paragon

Styling framework

Browser Support

Chrome	Edge	Firefox	Opera	IE	Safari
Latest	Latest	Latest	Latest	IE 11+	Safari 8+

Getting Started

Install the Component

The Paragon Framework is delivered as a npm component.

Install the paragon npm component. This will install the Paragon files in your project's node_modules folder.

npm i paragon-framework

Setting up your project with SASS

Sass is a great way to keep your project clean, organized and easy-to-manage. If you are unfamiliar with the workings of Sass, learn more here.

Including Paragon Styles

Copy and paste the following code snippet into your project. This will pull in normalize, along with Paragon base and module styles.

Note: If you wish to overwrite Paragon styles to add customization your project, skip through this step and head to the next section.

@import "node_modules/paragon-framework/vendor/normalize";
@import "node_modules/paragon-framework/base/base";
@import "node_modules/paragon-framework/modules/modules";

Including Custom Styles

While the Paragon Style Framework does provide a lot of core modules for you to utilize, it most likely won't have everything you need. Follow the SMACSS syntax in order to add a clean, organized structure to your custom stylesheets.

Create five individual folders, named base, layout, modules, state and theme.
Within each folder, create a stylesheet to match. (e.g. You would create a base.scss file within your base folder).

Import everything to your main application folder. When you're all finished, it should look something like this:

@import "node_modules/paragon-framework/vendor/normalize";
@import "node_modules/paragon-framework/base/base";
@import "theme/theme";
@import "node_modules/paragon-framework/modules/modules";

@import "base/base";
@import "layout/layout";
@import "modules/modules";
@import "state/state";

Note: By including a theme file, your modules will now look to that for color theming, rather than base.

Setting up your HTML file and importing styles

We've provided a starter HTML file to help you get running. Paste this code into your index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- These previous two meta tags *must* come first in the head -->
    <title>Paragon Template</title>

    <!-- Working with CSS – Use this link if prefer to use the vanilla css, without any customization -->
    <link rel="stylesheet" href="/node_modules/paragon-framework/paragon.css">

    <!-- Working with SCSS – Use this if you'd like to add any customization to the paragon modules. Note: The path and file name may differ for your project. -->
    <link rel="stylesheet" href="styles/application.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>