Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abhijithvijayan/parcel-sass-bootstrap-boilerplate

โฐ๐Ÿ“Œ Boilerplate with Parcel.js, Sass, Babel & Bootstrap
https://github.com/abhijithvijayan/parcel-sass-bootstrap-boilerplate

babel boilerplate bootstrap jquery parcel-bundler parceljs popperjs sass starter

Last synced: 14 days ago
JSON representation

โฐ๐Ÿ“Œ Boilerplate with Parcel.js, Sass, Babel & Bootstrap

Awesome Lists containing this project

README

        

parcel-sass-bootstrap-boilerplate



gulp


Bootstrap


node-sass


jQuery


livereload



SASS
ยท Babel
ยท Bootstrap
ยท Parcel.JS
ยท JQuery
ยท Popper.JS


๐Ÿ™‹โ€โ™‚๏ธ Made by @abhijithvijayan



Donate:
PayPal,
Patreon




Buy Me a Coffee


logo

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](http://nodejs.org)
- [Parcel Bundler](https://parceljs.org/)

`npm install -g parcel-bundler`

### Quick Start

1. Clone the repo :

`git clone https://github.com/abhijithvijayan/parcel-sass-bootstrap-boilerplate.git`

2. In bash/terminal/command line, `cd parcel-sass-bootstrap-boilerplate` into project directory.
3. Run `npm install` to install required files and dependencies.
4. 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.

```

:



:


```

- 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.

## Licence

Code released under the [MIT License](LICENSE)