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
  • Table of Contents
  • Installation
  • Usage
    • Development
    • Build
    • Lint SCSS
    • Run Tests
    • Deployment
  • Project Structure
    • SCSS Structure
  • Scripts
  • CI/CD Pipeline
    • GitHub Actions Workflow
  • Contributing
  • License

Installation

1. Clone the repository:

   git clone https://github.com/Visionary-Code-Works/vcw-scss-layout.git
   cd vcw-scss-layout

2. Install the dependencies:

   npm install

Usage

Development

To start the development server and open the project in your default browser, run:

npm start

Build

To build the project for production, run:

npm run build

This will compile the SCSS and JavaScript files into the dist directory.

Lint SCSS

To lint the SCSS files, run:

npm run lint:scss

Run Tests

To run the tests, use:

npm test

Deployment

To deploy the project to GitHub Pages, use:

npm run deploy

Project Structure

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:

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 for more information.

License

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