The parcel-sass-bootstrap-boilerplate from abhijithvijayan

parcel-sass-bootstrap-boilerplate's Introduction

parcel-sass-bootstrap-boilerplate

SASS · Babel · Bootstrap · Parcel.JS · JQuery · Popper.JS

🙋‍♂️ Made by @abhijithvijayan

This Parcel-Sass-bootstrap starter contains the features and scripts you need to get started quickly with Parcel bundler.

It contains the following features:

ParcelJs
Babel ES6 Compiler
Bootstrap v4
JQuery v3.3.1
PopperJS
Concatenate and minify JavaScript.
Compile, minify, autoprefix SASS.
Hot-Reloading
Optimize and Cache Images

Getting Started

Dependencies

Make sure these are installed first.

Node.js
Parcel Bundler

npm install -g parcel-bundler

Quick Start

Clone the repo :

git clone https://github.com/abhijithvijayan/parcel-sass-bootstrap-boilerplate.git
In bash/terminal/command line, cd parcel-sass-bootstrap-boilerplate into project directory.
Run npm install to install required files and dependencies.
Launch the development environment with :

npm run dev

Note: For Production, Use:

npm run build

This will build files and assets to dist/ directory.

Documentation

Workflow structure

src - > source directory

.
├── src
│   ├── assets
│   │   └── trollHuntersArcadia.png
│   ├── sass
│   │   ├── _fonts.scss
│   │   ├── _reset.scss
│   │   ├── _variables.scss
│   │   └── main.scss
│   ├── index.js
│   └── index.html
.

Instructions

Add your HTML files by inserting or including them in the src directory (By default index.html is added to the directory, feel free to edit it with the changes seen live.)
- For the new HTML file(s), link the index.js (in body tag) file in the HTML files as they are created.
```
<head>
    :
    <link href="sass/main.scss" rel="stylesheet" />

</head>
<body>
    :
    <script src="index.js"></script>
</body>
```
Add sass(SCSS) files to src/sass folder.
- Make sure you import the scss file in main.scss
```
@import "filename";
```
Add images to src/assets folder.