Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/nmihalyov/pure-start

Start your project with 'Pure Start' easily than ever!
https://github.com/nmihalyov/pure-start

boilerplate config frontend javascript pug sass scss task-runner typescript webpack

Last synced: about 1 month ago
JSON representation

Start your project with 'Pure Start' easily than ever!

Awesome Lists containing this project

README 

        
# Pure Start



[Demo](https://nmihalyov.tk/pure-start)



**Pure Start** is a boilerplate that allows you to start working on a new project fast and easy. It provides you with a clean and flexible environment to create static applications and can be extended to create something more complex.



## Features

+ Starting local server

+ SASS/SCSS preprocessors

+ Pug templating

+ JS transpilation

+ TypesScript support

+ File minification

+ Some predefined UI components

+ and more...



## Installation

+ Manually download and unpack repository archive

+ Using Git `git clone https://github.com/nmihalyov/pure-start.git`



## Commands

Run this commands using `npm run ${command}` or `yarn ${command}`

+ `start` – starts local dev server on development mode

+ `build` – creates production build

+ `stats` – generates JSON file for analyzing bundle

+ `analyze` – opens analyze report (run `stats` before)

+ `comp` – creates new component (see below for details)

+ `prettier:check` – checks for prettier compliance

+ `prettier:fix` – fixes prettier issues

+ `eslint:check` – checks for eslint compliance

+ `eslint:fix` – fixes eslint issues



## Creating a component

You can create component manually or by CLI. The comman below will create catalog and **pug**, **scss** files named by `` in components catalog with simple layout:



`npm run comp `



#### Modificators



`--ui` – creates component in **_ui** subfolder



`--js` – additionaly creates **js** file



`--ts` – additionaly creates **ts** file



`--section` – generates section layout for **pug** file



## Structure

Boilerplate's structure is pretty simple!



At the root there a some config files and script for creating components via CLI.



`dist` folder contains production build for your project that can be deployed. Do not changing anything here by your hands.



`src` is a working directory which contains your project source code. Below folders are located here.



`assets` is used for static content like images and fonts.



`components` contains your... components! They can be UI (like button, checkbox, etc.) or just simple components, as you like. Components usually has 3 realizations: markup – pug, styles – scss, scripts – javascript (this one may be missing).



`pug` consists of `layouts` (which are shells for different page, e.g. one for online shop interface and other for admin section), `pages` (for pages markup) and `utils` (any utilities you can use for pages or layouts).



`scss` for JavaScript and TypesScript files (you can write both, but it's highly recommended to use TS).



`scss` for global styles (don't write component specific styles here).



`index.js` is entry point for youe JS/TS files.



## Importing images

### Pug

To import image in pug files use **require**. E.g.:



`img(src=require("@/assets/images/static/logo.png"), alt="Logo")`



### Scss

To use images in scss you can simply do it as you did before. E.g.:



`background-image: url('@/assets/images/icons/github-white.svg')`



## Feedback



E-mail: [[email protected]](mailto:[email protected])



LinkedIn: [nmihalyov](https://linkedin.com/in/nmihalyov)



Telegram: [@nmihalyov](https://t.me/nmihalyov)



Website: [nmihalyov.tk](https://nmihalyov.tk)



[Write issue](https://github.com/nmihalyov/pure-start/issues/new)