Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/visionary-code-works/vcw-scss-layout
A project setup for SCSS with Webpack, integrating Bootstrap and Normalize.css, with CI/CD for linting, testing, building, and deploying to GitHub Pages.
https://github.com/visionary-code-works/vcw-scss-layout
automation bootstrap5 ci-cd css frontend github-actions github-pages javascript nodejs normalize-css sass scss static-site web-development webpack
Last synced: about 1 month ago
JSON representation
A project setup for SCSS with Webpack, integrating Bootstrap and Normalize.css, with CI/CD for linting, testing, building, and deploying to GitHub Pages.
- Host: GitHub
- URL: https://github.com/visionary-code-works/vcw-scss-layout
- Owner: Visionary-Code-Works
- License: mit
- Created: 2024-05-18T08:39:09.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-21T17:16:11.000Z (6 months ago)
- Last Synced: 2024-10-12T23:25:56.394Z (about 1 month ago)
- Topics: automation, bootstrap5, ci-cd, css, frontend, github-actions, github-pages, javascript, nodejs, normalize-css, sass, scss, static-site, web-development, webpack
- Language: SCSS
- Homepage: http://vcwtech.com/vcw-scss-layout/
- Size: 2.17 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# VCW SCSS Layout
A project setup for SCSS with Webpack. This project demonstrates how to structure and compile SCSS files using Webpack, along with integrating Bootstrap and Normalize.css.
## Table of Contents
- [VCW SCSS Layout](#vcw-scss-layout)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Development](#development)
- [Build](#build)
- [Lint SCSS](#lint-scss)
- [Run Tests](#run-tests)
- [Deployment](#deployment)
- [Project Structure](#project-structure)
- [SCSS Structure](#scss-structure)
- [Scripts](#scripts)
- [CI/CD Pipeline](#cicd-pipeline)
- [GitHub Actions Workflow](#github-actions-workflow)
- [Contributing](#contributing)
- [License](#license)
## Installation
1. **Clone the repository:**
```sh
git clone https://github.com/Visionary-Code-Works/vcw-scss-layout.git
cd vcw-scss-layout
```
2. **Install the dependencies:**
```sh
npm install
```
## Usage
### Development
To start the development server and open the project in your default browser, run:
```sh
npm start
```
### Build
To build the project for production, run:
```sh
npm run build
```
This will compile the SCSS and JavaScript files into the `dist` directory.
### Lint SCSS
To lint the SCSS files, run:
```sh
npm run lint:scss
```
### Run Tests
To run the tests, use:
```sh
npm test
```
### Deployment
To deploy the project to GitHub Pages, use:
```sh
npm run deploy
```
## Project Structure
```sh
vcw-scss-layout/
├── dist/ # Webpack output directory
│ └── bundle.js # Generated by Webpack
├── node_modules/ # Node.js dependencies
├── src/ # Source files
│ ├── scss/ # SCSS files
│ │ ├── abstracts/
│ │ ├── base/
│ │ ├── components/
│ │ ├── layout/
│ │ ├── pages/
│ │ ├── themes/
│ │ ├── vendors/
│ │ └── main.scss
│ ├── index.html # HTML file
│ └── index.js # JavaScript entry point
├── .github/ # GitHub configuration files
│ └── workflows/ # GitHub Actions workflows
│ └── ci-cd.yml # CI/CD pipeline configuration
├── package.json # npm configuration
├── webpack.common.js # Webpack common configuration
├── webpack.dev.js # Webpack development configuration
├── webpack.prod.js # Webpack production configuration
├── webpack.config.babel.js # Webpack Babel configuration
├── .babelrc # Babel configuration
└── .gitignore # Git ignore file
```
### SCSS Structure
- **abstracts/**: Variables, mixins, functions, placeholders.
- **base/**: Reset, typography, base styles.
- **components/**: Buttons, cards, modals, etc.
- **layout/**: Header, footer, grid system, sidebar, etc.
- **pages/**: Page-specific styles.
- **themes/**: Theme styles (dark, light, etc.).
- **vendors/**: Third-party styles (Bootstrap, Normalize.css, etc.).
## Scripts
- **`npm start`**: Starts the development server.
- **`npm run build`**: Builds the project for production.
- **`npm run lint:scss`**: Lints SCSS files.
- **`npm test`**: Runs tests.
- **`npm run deploy`**: Deploys the project to GitHub Pages.
## CI/CD Pipeline
This project uses GitHub Actions for CI/CD. The pipeline includes steps for linting SCSS files, running tests, building the project, and deploying to GitHub Pages.
### GitHub Actions Workflow
The CI/CD pipeline is defined in `.github/workflows/ci-cd.yml`:
```yaml
name: CI/CD Pipeline
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
- name: Install dependencies
run: npm install
- name: Lint SCSS files
run: npm run lint:scss
- name: Run tests
run: npm test
- name: Build the project
run: npm run build
- name: Deploy to GitHub Pages
if: github.ref == 'refs/heads/main' && github.event_name == 'push'
run: npm run deploy
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```
## Contributing
Contributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) for more information.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.