{"id":15063548,"url":"https://github.com/visionary-code-works/vcw-scss-layout","last_synced_at":"2026-01-03T23:04:38.841Z","repository":{"id":240417138,"uuid":"802419625","full_name":"Visionary-Code-Works/vcw-scss-layout","owner":"Visionary-Code-Works","description":"A project setup for SCSS with Webpack, integrating Bootstrap and Normalize.css, with CI/CD for linting, testing, building, and deploying to GitHub Pages.","archived":false,"fork":false,"pushed_at":"2024-05-21T17:16:11.000Z","size":2274,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T02:51:27.173Z","etag":null,"topics":["automation","bootstrap5","ci-cd","css","frontend","github-actions","github-pages","javascript","nodejs","normalize-css","sass","scss","static-site","web-development","webpack"],"latest_commit_sha":null,"homepage":"http://vcwtech.com/vcw-scss-layout/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Visionary-Code-Works.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"thomasthaddeus","patreon":"VisionaryCodeWorks","liberapay":"vcwtech"}},"created_at":"2024-05-18T08:39:09.000Z","updated_at":"2024-05-21T17:16:15.000Z","dependencies_parsed_at":"2024-09-29T09:01:00.092Z","dependency_job_id":"2ad6c728-62a2-4c58-b6f2-cd84b0cd6960","html_url":"https://github.com/Visionary-Code-Works/vcw-scss-layout","commit_stats":null,"previous_names":["visionary-code-works/vcw-scss-layout"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visionary-Code-Works%2Fvcw-scss-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visionary-Code-Works%2Fvcw-scss-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visionary-Code-Works%2Fvcw-scss-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visionary-Code-Works%2Fvcw-scss-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Visionary-Code-Works","download_url":"https://codeload.github.com/Visionary-Code-Works/vcw-scss-layout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244153308,"owners_count":20406995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automation","bootstrap5","ci-cd","css","frontend","github-actions","github-pages","javascript","nodejs","normalize-css","sass","scss","static-site","web-development","webpack"],"created_at":"2024-09-25T00:04:25.757Z","updated_at":"2026-01-03T23:04:38.781Z","avatar_url":"https://github.com/Visionary-Code-Works.png","language":"SCSS","funding_links":["https://github.com/sponsors/thomasthaddeus","https://patreon.com/VisionaryCodeWorks","https://liberapay.com/vcwtech"],"categories":[],"sub_categories":[],"readme":"# VCW SCSS Layout\n\nA 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.\n\n## Table of Contents\n\n- [VCW SCSS Layout](#vcw-scss-layout)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [Development](#development)\n    - [Build](#build)\n    - [Lint SCSS](#lint-scss)\n    - [Run Tests](#run-tests)\n    - [Deployment](#deployment)\n  - [Project Structure](#project-structure)\n    - [SCSS Structure](#scss-structure)\n  - [Scripts](#scripts)\n  - [CI/CD Pipeline](#cicd-pipeline)\n    - [GitHub Actions Workflow](#github-actions-workflow)\n  - [Contributing](#contributing)\n  - [License](#license)\n\n## Installation\n\n1. **Clone the repository:**\n\n    ```sh\n    git clone https://github.com/Visionary-Code-Works/vcw-scss-layout.git\n    cd vcw-scss-layout\n    ```\n\n2. **Install the dependencies:**\n\n    ```sh\n    npm install\n    ```\n\n## Usage\n\n### Development\n\nTo start the development server and open the project in your default browser, run:\n\n```sh\nnpm start\n```\n\n### Build\n\nTo build the project for production, run:\n\n```sh\nnpm run build\n```\n\nThis will compile the SCSS and JavaScript files into the `dist` directory.\n\n### Lint SCSS\n\nTo lint the SCSS files, run:\n\n```sh\nnpm run lint:scss\n```\n\n### Run Tests\n\nTo run the tests, use:\n\n```sh\nnpm test\n```\n\n### Deployment\n\nTo deploy the project to GitHub Pages, use:\n\n```sh\nnpm run deploy\n```\n\n## Project Structure\n\n```sh\nvcw-scss-layout/\n├── dist/                # Webpack output directory\n│   └── bundle.js        # Generated by Webpack\n├── node_modules/        # Node.js dependencies\n├── src/                 # Source files\n│   ├── scss/            # SCSS files\n│   │   ├── abstracts/\n│   │   ├── base/\n│   │   ├── components/\n│   │   ├── layout/\n│   │   ├── pages/\n│   │   ├── themes/\n│   │   ├── vendors/\n│   │   └── main.scss\n│   ├── index.html       # HTML file\n│   └── index.js         # JavaScript entry point\n├── .github/             # GitHub configuration files\n│   └── workflows/       # GitHub Actions workflows\n│       └── ci-cd.yml    # CI/CD pipeline configuration\n├── package.json         # npm configuration\n├── webpack.common.js    # Webpack common configuration\n├── webpack.dev.js       # Webpack development configuration\n├── webpack.prod.js      # Webpack production configuration\n├── webpack.config.babel.js  # Webpack Babel configuration\n├── .babelrc             # Babel configuration\n└── .gitignore           # Git ignore file\n```\n\n### SCSS Structure\n\n- **abstracts/**: Variables, mixins, functions, placeholders.\n- **base/**: Reset, typography, base styles.\n- **components/**: Buttons, cards, modals, etc.\n- **layout/**: Header, footer, grid system, sidebar, etc.\n- **pages/**: Page-specific styles.\n- **themes/**: Theme styles (dark, light, etc.).\n- **vendors/**: Third-party styles (Bootstrap, Normalize.css, etc.).\n\n## Scripts\n\n- **`npm start`**: Starts the development server.\n- **`npm run build`**: Builds the project for production.\n- **`npm run lint:scss`**: Lints SCSS files.\n- **`npm test`**: Runs tests.\n- **`npm run deploy`**: Deploys the project to GitHub Pages.\n\n## CI/CD Pipeline\n\nThis 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.\n\n### GitHub Actions Workflow\n\nThe CI/CD pipeline is defined in `.github/workflows/ci-cd.yml`:\n\n```yaml\nname: CI/CD Pipeline\n\non:\n  push:\n    branches:\n      - main\n  pull_request:\n    branches:\n      - main\n\njobs:\n  build:\n\n    runs-on: ubuntu-latest\n\n    steps:\n    - name: Checkout code\n      uses: actions/checkout@v3\n\n    - name: Set up Node.js\n      uses: actions/setup-node@v3\n      with:\n        node-version: '20'\n\n    - name: Install dependencies\n      run: npm install\n\n    - name: Lint SCSS files\n      run: npm run lint:scss\n\n    - name: Run tests\n      run: npm test\n\n    - name: Build the project\n      run: npm run build\n\n    - name: Deploy to GitHub Pages\n      if: github.ref == 'refs/heads/main' \u0026\u0026 github.event_name == 'push'\n      run: npm run deploy\n      env:\n        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n```\n\n## Contributing\n\nContributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) for more information.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisionary-code-works%2Fvcw-scss-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisionary-code-works%2Fvcw-scss-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisionary-code-works%2Fvcw-scss-layout/lists"}