Landing Page SASS Library

Table of contents

• Directory Layout
• Installation
• Start Dev Server
• Build Prod Version
• Adding New JS
• Versioning
• Release Steps
• Storybook
• Features

Directory Layout

.
├── dist                    # Compiled files
│   ├── em-lp-styles.css    # Minified CSS file
│   └── ......              # Individual Minified CSS
├── src                     # Source files
│   ├── index.scss          # Main SASS file
│   ├── index.html          # HTML Template
│   └── modules             # Individual SASS files
├── webpack
├── package.json
└── README.md

Installation

npm install

Start Dev Server

npm start

• Kellogg
• • Artificial Intelligence http://localhost:8080/KAI.html
• • Digital Marketing Strategies http://localhost:8080/KDMS.html
• • Product Strategy http://localhost:8080/KPS.html

Build Prod Version

npm run build

Adding New SASS

In order to add new SASS we need to follow these steps:

• Create the new folder for the university under /src/modules/ if it's not created already
• Create the new folder for the program under /src/modules/{university} if it's not created already
• Create a new index.scss under /src/modules/{university}/{program} (holds the imports for that folder)
• Add all the needed SCSS files and import them in the index.scss of the folder
• Add the new entry point in /webpack/webpack.config.common.js, remember to always add the new entry point on top
• Check the new entry point in /webpack/webpack.config.common.js has the correct program sfid
• Add the html template file under /src/templates/{university}/{program}
• Add the html template in the /webpack/webpack.config.common.js under the plugin array property

    new HtmlWebpackPlugin({
      filename: '{short-code}.html',
      template: 'src/templates/{university}/{program}/index.html',
      hash: true
    }),

• Add the new URL to the Start Dev Server section of this README

Versioning

We follow the Semantic Versioning guidelines.

Release Steps

...Pending...

• After releasing the new version, create a new tag with the release notes, remember to follow the convention shown in the main README

Storybook:

To add a new story:

• Create a file named {name}.stories.js and populate it with the stories.

To run Storybook: Note: You should run the Installation if not done yet.

npm run storybook

To deploy a new Storybook version: Note: You should run the Installation if not done yet.

npm run build-storybook

Then commit the changes so the new version is uploaded.

Features:

• Style Linting via stylelint
• UI dev environment using Storybook