https://github.com/conedevelopment/sprucecss-site-eleventy

The documentation of Spruce CSS.
https://github.com/conedevelopment/sprucecss-site-eleventy

css css-framework sass sass-framework scss scss-framework

Last synced: 28 days ago
JSON representation

The documentation of Spruce CSS.

• Host: GitHub
• URL: https://github.com/conedevelopment/sprucecss-site-eleventy
• Owner: conedevelopment
• Created: 2023-12-31T18:09:03.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-10-01T13:33:15.000Z (about 1 month ago)
• Last Synced: 2024-10-02T03:21:42.401Z (about 1 month ago)
• Topics: css, css-framework, sass, sass-framework, scss, scss-framework
• Language: CSS
• Homepage: https://sprucecss.com
• Size: 8.94 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    


    

      

      

      

    

    


  



**Spruce CSS uses [11ty](https://www.11ty.dev/) for its documentation (v2).**

[![Netlify Status](https://api.netlify.com/api/v1/badges/32f689b9-2e24-462f-be66-22e1233d7f9b/deploy-status)](https://app.netlify.com/sites/sprucecss/deploys)

## Get Up and Running

We use `eleventy --serve` and compile Sass with sass-cli with npm scripts.

1. **Clone the repository**

2. **Install the dependencies**

    In the `package.json` file, you will find all of the dependencies (and scripts) to install them using the following command:

    ```shell

    npm install

    ```

3. **Run the development mode**

    To run the development mode, use the `npm run start`. This script will also watch for changes.

    ```shell

    npm run start

    ```

4. **Run the production mode**

    Before you go live, you should use the production script to compress the Sass files.

    ```shell

    npm run build

    ```

## SCSS

The project compiles the SCSS files from the `./src/scss` folder into the `./src/css` folder. The project includes [Spruce CSS](https://sprucecss.com/), which gives the styling with some [Spruce UI](https://sprucecss.com/ui/getting-started/introduction/) components.

## Other Scripts

- **sass:lint/sass:lint:fix** You can lint your SCSS files with [Stylelint](https://stylelint.io/) and [stylelint-config-sass-guidelines](https://github.com/bjankord/stylelint-config-sass-guidelines) preset with the `npm run sass:lint` command. Use the `npm run sass:lint:fix` command if you want automatic fixes.