Skip to content

Latest commit

 

History

History
276 lines (178 loc) · 8.85 KB

TEMPLATE.md

File metadata and controls

276 lines (178 loc) · 8.85 KB
Raw

Header of the README.md that contain: Logo of the project(if any), badges, and descr.

Logo

npm version Dependencies Status devDependencies Status

Repo Name

A brief description

Call to action

TOC example:

Table of Contents

💬 Intro

A brief and informative introduction illustrating why your project is interesting and relevant.

📦 Dependencies

Dependencies that are needed by people who want to install your project For example:

🔝 back to top

🚀 Getting started

Npm&Yarn install:

#Nostalgic
$ npm install repo-name

#Hipster
$ yarn add repo-name

descr (if needed)

Clone the repo:

Clone the repo to get all source files as they are available on Github:

$ git clone https://github.com/your-github-name/repo-name.git

$ cd repo-name/

And then install NPM-Modules via:

#Nostalgic
npm install

#Hipster
yarn

This install the required node_modules.

descr (if needed)

🔝 back to top

🍱 Technologies used

Technologies or features that you used when creating the project. For example:

JavaScript

  • ES2017 - support through compiler Babel.

  • Node - is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.

Testing
  • Cypress - is a fast, easy and reliable testing for anything that runs in a browser.
Styles

  • Sass - is the most mature, stable, and powerful professional grade CSS extension language in the world.

  • Sassdoc - is a documentation system to build pretty and powerful docs in the blink of an eye.

  • PostCSS - is a tool for transforming CSS with JavaScript.

  • Critical - extracts & inlines critical-path (above-the-fold) CSS from HTML.

Automation

  • Gulp - is a toolkit for automating painful or time-consuming tasks in your development workflow.

  • Webpack - is a bundler for modules.

Optimization

  • Imagemin - minify PNG, JPEG, JPG, GIF and SVG images.

  • Uglify - is a JavaScript parser, minifier, compressor and beautifier toolkit.

Server
  • BrowserSync - is a time-saving synchronised browser testing.
Linting

  • ESlint - is to provide a pluggable linting utility for JavaScript.

  • HTMLHint - is a Static Code Analysis Tool for HTML.

  • Stylelint - is a mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

  • Prettier - is an opinionated code formatter.

Code Management

  • Editorconfig - helps developers define and maintain consistent coding styles between different editors and IDEs.

  • Git - is a distributed version control system designed to handle everything from small to very large projects.

🔝 back to top

🚩 Commands

An example of the presentation of commands for working with your project, in the form of a table.

With Webpack you have to use NPM Script Commands

Action Npm Yarn
Intialize your Project and the Sass Documentation (/sassdocs/) npm run init yarn run init
Main development task with BrowserSync and Webpack npm run dev yarn dev
Minify JS, Images, CSS. Is for a automated Build Process, comes after a Gulp Init. npm run build yarn build
Rebuild all JS Files except the Application JS File npm run scripts yarn scripts
Rebuild all Image Files for CSS, copy it to distribution, build Bitmap- and Vector Sprites. npm run uiimages yarn uiimages
Copy all Imagefiles for Documentusage. npm run htmlassets yarn htmlassets
Copy all or Generate the Template Files. npm run template yarn template
Generate Favicons and the HTML Snippet (generated Files you will find in src/.system/) npm run favicon yarn favicon

🔝 back to top

🔧 Structure

Description of the structure of your project.

Example schema that illustrates it (if needed):

SRC Folderstructure:

src/
├── .system/                          => Internal System Files
├── fonts/                            => Font Files
├── framework/                        => Sass Framework
├── images/                           => All Images
|   ├── bitmapSingle-assets           => Single Bitmap Images
|   ├── bitmapSprite-assets           => Images for Bitmap Sprites
|   ├── htmlimages                    => Content Images (`<img>`)
|   ├── vectorSingle-assets           => Single Vector Images
|   └── vectorSprite-assets           => Vector Images for Vector Sprites
├── js/                               => JS Files (e.g. main.js)
├── scripts/                          => Script files that are not installed
├── structure/                        => Source Files for Copy (e.g. Template Files for a WP Theme)
└── style/                            => Styling Source Files

🔝 back to top

🔨 Build

Description of the build of your project and its subtleties of implementation

🔝 back to top

📄 License

Your License

This project is licensed under the MIT License - see the LICENSE file for details.

GitHub

🔝 back to top

🐧 Author

Repo Name made with love.
---------------------------------------
Author : Your Name

Email : yourmail@gmail.com

Github : https://github.com/your-github-name/repo-name.git

forthebadge

🔝 back to top