Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mishachernov/html-gulp-starter
HTML starter pack based on GULP.
https://github.com/mishachernov/html-gulp-starter
css css3 gh-pages gulp html html-css html-css-javascript html-template html5 image-optimization linting scss scss-framework scss-lint scss-mixins scss-styles starter starter-pack starter-template
Last synced: about 1 month ago
JSON representation
HTML starter pack based on GULP.
- Host: GitHub
- URL: https://github.com/mishachernov/html-gulp-starter
- Owner: MishaChernov
- License: mit
- Created: 2022-04-27T13:30:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-22T18:07:05.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T16:22:13.234Z (about 1 month ago)
- Topics: css, css3, gh-pages, gulp, html, html-css, html-css-javascript, html-template, html5, image-optimization, linting, scss, scss-framework, scss-lint, scss-mixins, scss-styles, starter, starter-pack, starter-template
- Language: SCSS
- Homepage:
- Size: 6.97 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML-GULP-STARTER
## What is this?
**HTML-GULP-STARTER** is a highly unopinionated starting point for prototyping responsive HTML5 projects with SCSS.
Uses browser-sync to create a livereloading server for rapidly prototyping sites. Fastly deplpying your site to github pages by one command!
## Features
* SCSS compiling to CSS
* Uses normalize.css, famous SCSS mixins, functions, variables
* CSS/JS minification
* Linting your code. Best practices
* Autoprefixer (automatically adds appropriate vendor prefixes)
* Browser reload on filesave using browser-sync
* Local server for serving a static site
* Images compression
* Deploying your site to github pages
## Getting started
### Instructions
* Clone the repo from GitHub and make it your own.
* In terminal run each line as a separate command
```https
git clone https://github.com/MishaChernov/html-gulp-starter.git yourNewRepoName
```
or
```ssh
[email protected]:MishaChernov/html-gulp-starter.git yourNewRepoName
```
Then
```bash
cd yourNewRepoName
rm -rf .git
git init
git remote add origin [email protected]:yourUserName/yourNewRepoName.git
```
* ```git remote -v``` will allow you to check that you have changed the remote origin correctly. The output should look like:
```bash
origin [email protected]:yourUserName/yourNewRepoName.git (fetch)
origin [email protected]:yourUserName/yourNewRepoName.git (push)
```
## Dev environment
To set up a convenient dev environment run this at the root of mnml
* ```npm install``` - Install node modules to your project
* ```npm start``` - Start coding ;)
## Another very usefull commands
* ```npm run img-compress``` - Will compress size of all your images
* ```npm run deploy``` - Will deploy your site to github pages, e.g yourGitHubName/github.io/yourNewRepoName
## Directory structure
```
├── README.md
├── build
│ ├── img
│ ├── index.html
│ ├── js
│ │ └── index.js
│ └── styles
│ ├── main.css
│ └── style-min.css
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
├── fonts
│ ├── Roboto-Regular.ttf
│ ├── Roboto-Regular.woff
│ └── Roboto-Regular.woff2
├── html
│ └── index.html
├── img
├── js
│ └── index.js
└── styles
├── base
│ ├── base.scss
│ ├── fonts.scss
│ └── normilize.scss
├── components
│ └── button.scss
├── main.scss
└── utils
├── functions.scss
├── mixins.scss
└── variables.scss
```