{"id":19244843,"url":"https://github.com/conedevelopment/sprucecss-starter-kit","last_synced_at":"2025-04-21T09:33:49.380Z","repository":{"id":39593384,"uuid":"345051897","full_name":"conedevelopment/sprucecss-starter-kit","owner":"conedevelopment","description":"The “Spruce CSS Starter Kit” repository contains a simple foundation for starting your next project with ease using Spruce CSS.","archived":false,"fork":false,"pushed_at":"2023-01-23T19:20:49.000Z","size":873,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2023-03-04T11:47:45.192Z","etag":null,"topics":["browsersync","pug","scss"],"latest_commit_sha":null,"homepage":"https://sprucecss.com","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/conedevelopment.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-06T09:13:24.000Z","updated_at":"2022-01-06T09:39:50.000Z","dependencies_parsed_at":"2023-01-30T12:45:37.482Z","dependency_job_id":null,"html_url":"https://github.com/conedevelopment/sprucecss-starter-kit","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fsprucecss-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fsprucecss-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fsprucecss-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/conedevelopment%2Fsprucecss-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/conedevelopment","download_url":"https://codeload.github.com/conedevelopment/sprucecss-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223859032,"owners_count":17215373,"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":["browsersync","pug","scss"],"created_at":"2024-11-09T17:25:22.486Z","updated_at":"2024-11-09T17:25:23.802Z","avatar_url":"https://github.com/conedevelopment.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n  \u003ca href=\"https://sprucecss.com/#gh-light-mode-only\"\u003e\n    \u003cbr/\u003e\n    \u003cimg src=\"./.github/spruce-logo-dark.svg\" alt=\"Spruce CSS\" width=\"160\"\u003e\n    \u003cbr/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://sprucecss.com/#gh-dark-mode-only\"\u003e\n    \u003cbr/\u003e\n    \u003cimg src=\"./.github/spruce-logo-light.svg\" alt=\"Spruce CSS\" width=\"160\"\u003e\n    \u003cbr/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**The “Spruce CSS Starter Kit” repository contains a simple foundation for starting your next project with ease using Spruce CSS.**\n\nIt is a mix of essential tools that we like to use and necessary for working in the browser fast. This project aims to quickly design and then get the source files to integrate into other platforms like WordPress, Laravel, or Gatsby, but you can also use it as your primary tool, depending on your needs.\n\nIt contains everything that is needed to design in the browser. If you want to know why it is a good idea to develop in the browser, you can read about [my thoughts on Pine](https://pineco.de/designing-in-the-browser/).\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Get Up and Running](#get-up-and-running)\n- [Pug](#pug)\n- [SCSS](#scss)\n- [Browsersync](#browsersync)\n- [More Scripts](#more-scripts)\n- [License](#license)\n\n## Get Up and Running\n\nThe Starter Kit using [Pug](#pug), [Sass](#sass), [Browsersync](#browsersync).\n\n1. **Clone the repository.**\n\n2. **Install the dependencies.**\n\n    In the `package.json` file, you will find all of the dependencies to install them using the following command:\n\n    ```shell\n    npm install\n    ```\n\n3. **Run the development mode**\n\n    To run the development mode, use the `dev` script, which does everything (start the webserver, compile Pug and Sass). See more about the scripts in the `package.json` file.\n\n    ```shell\n    npm start\n    ```\n\n    This script will also watch for changes in the `pug` and `assets/scss` folders.\n\n4. **Run the production mode**\n\n    Running the `prod` script, you can create compressed CSS files without .map. Also, it will compile the `pug` files and run the beautifying too.\n\n    ```shell\n    npm run prod\n    ```\n\n## Pug\n\nPug (formerly Jade) is a JavaScript template engine primarily for Node. It compiles to HTML, has a simplified syntax. Easy to use, handles include (separate files like a header or footer component), can work with JSON data.\n\nYou can find the templates in the `pug/templates` folder in the root, and it will compile into the `html` folder.\n\nUnder the `pug/assets` folder, you find the `data.json` and the `mixin.pug` files. The first can contain any JSON formatted data for later use, and the second is a simple mixin for the icons. You can find an example for both in the `pug/templates/components/docs.pug` file.\n\n## SCSS\n\nThe project compiles the SCSS files from the `assets/scss` folder into the `assets/css` folder. The project includes Spruce CSS, which gives most of the styles, but we have some pre-styled, minimal components too.\n\n## Browsersync\n\nRunning the `npm run dev` will also start up a Browsersync server which you can share across your local network. It will automatically open the URL in your default browser with the `html/page/index.html` file.\n\n## More Scripts\n\n**HTML Beautify:** You can run your generated HTML files through a [beautifier](https://www.npmjs.com/package/js-beautify) with the `npm run beautify` command; this is needed because sometimes the Pug pretty formatting makes a mistake (or you need another indenting). This will also run with the `prod` script automatically.\n\n**Sass Lint:** 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-with-fix` command if you want automatic fixes.\n\n**Icons:** A starter kit uses a simple SVG-based icon solution. You can extend it through `assets/icon/icons.svg` file. You have to include them in any Pug template (like you see it in the `docs.pug`) to use.\n\n## License\n\nThe code is licensed under the [MIT](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconedevelopment%2Fsprucecss-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconedevelopment%2Fsprucecss-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconedevelopment%2Fsprucecss-starter-kit/lists"}