{"id":13518546,"url":"https://github.com/devbridge/Styleguide","last_synced_at":"2025-03-31T10:31:59.086Z","repository":{"id":29694563,"uuid":"33237236","full_name":"devbridge/Styleguide","owner":"devbridge","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-25T22:18:06.000Z","size":6047,"stargazers_count":1439,"open_issues_count":52,"forks_count":85,"subscribers_count":56,"default_branch":"master","last_synced_at":"2025-03-23T13:07:47.608Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/devbridge.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-01T09:00:09.000Z","updated_at":"2025-01-24T05:47:16.000Z","dependencies_parsed_at":"2024-06-02T06:48:20.939Z","dependency_job_id":"6a86dc51-ca79-4856-86ff-d0d59e1c7e6a","html_url":"https://github.com/devbridge/Styleguide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbridge%2FStyleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbridge%2FStyleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbridge%2FStyleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbridge%2FStyleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devbridge","download_url":"https://codeload.github.com/devbridge/Styleguide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246326758,"owners_count":20759437,"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":[],"created_at":"2024-08-01T05:01:46.097Z","updated_at":"2025-03-31T10:31:59.067Z","avatar_url":"https://github.com/devbridge.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Styleguide [![Known Vulnerabilities](https://snyk.io/test/github/devbridge/Styleguide/badge.svg)](https://snyk.io/test/github/devbridge/Styleguide)\n===\n\nDevbridge Styleguide helps you create, share, and automate a living visual style library of your brand. Share your digital brand standards, improve team collaboration, and implement an independent easily-extendable modular structure.\n\nInstallation:\n---\n\nMake sure you have following components installed on your machine:\n- [node.js](https://nodejs.org/en/)\n- [gulp](http://gulpjs.com/) or [grunt](http://gruntjs.com/)\n\n##### #1 Install Styleguide node package to your local project's directory: #####\n`npm install devbridge-styleguide --save-dev`\n\n_**Note**, do not download files directly from git repository, unless you know what you are doing._\n\n##### #2 Make sure you have installed it globally: #####\n`npm install devbridge-styleguide -g`\n\n##### #3 Initialize styleguide: #####\n`styleguide initialize `\n\n_**Note**, make sure you run command inside your project directory._\n\nCopy of the styleguide will be generated and placed in your project's root directory under `'/styleguide/'` folder. If you want to change folder name run `styleguide initialize folder-name`\n\n##### #4 Setup Gulp task: #####\n```javascript\nvar styleguide = require('devbridge-styleguide');\n\ngulp.task('start-styleguide', function () {\n  styleguide.startServer();\n});\n````\n\nIf your styleguide is placed in different directory than /styleguide/ you need to specified it in the task:\n\n```javascript\nstyleguide.startServer({\n    styleguidePath: 'folder-name'\n});\n```\n\nRun styleguide server: `gulp start-styleguide`\n\n\n##### For Grunt users: #####\n\nSetup grunt task:\n\n```javascript\nmodule.exports = function (grunt) {\n\tvar styleguide = require('devbridge-styleguide');\n\tgrunt.registerTask('start-styleguide', function () {\n\t\tvar done = this.async();\n\t\tstyleguide.startServer().then(function (instance) {\n\t\t\tinstance.on('close', done);\n\t\t});\n\t});\n}\n```\n\nRun styleguide server: `grunt start-styleguide`\n\n##### For Plain CLI usage: #####\n\nEnter command:\n```\nstyleguide start\n```\n\n***\n\n_**Note**, the purpose of the styleguide server is to expose API for styleguide data manipulation **ONLY**. In order to view the styleguide in the browser, you need to setup and run your own project’s server. We recommend using simple [http server - live-server](https://www.npmjs.com/package/live-server)._\n\n***\n\nOpen your project in the browser and navigate to `/styleguide/` directory. Happy styleguideing!!\n\n\nUsage:\n---\n\nThe Styleguide component has two modes - **“view only”** and **“edit”**.\n\n**\"View only\"** mode does not have editing controls and is meant for presentation. It is a purely client-side application without any backend dependencies (html, css, and javascript only). It is delightly easy to share, publish, move, or export!\n\nIn order to switch to **“Edit”** mode and see all additional controls for editing, you need to run the styleguide server.\n\n##### - To manage categories: #####\nCategories can be managed on your styleguide web page by clicking menu in the right top corner. You will be able to create, delete or modify categories.\n\n##### - To work with Snippets: #####\nAll snippet management is done in the browser, on your styleguide web page. While styleguide server is running, you should be able to see additional controls for editing.\n\n##### - To scrape scss variables: #####\nScraping scss files you can automatically generate color palette or create a list of fonts used in the project.\n* First you need to add smart comment tags to your scss file to identify your variables:\n\n    For color variables:\n    ```sass\n    //-- colors:start --//\n    $color-black: #000000;\n    $color-dark: #141823;\n    $red-lighter: #d26262;\n    //-- colors:end --//\n    ```\n\n    For font variables:\n    ```sass\n    //-- typo:start --//\n    $font-proxima: 'Neue Helvetica W01', helvetica, sans-serif; // 300, 700\n    $font-proxima-alternative: 'Neue Helvetica W01', helvetica, sans-serif; // 400, 400 italic\n    $font-newsgothic: 'Neue Helvetica W01', helvetica, sans-serif; // 700\n    //-- typo:end --//\n    ```\n\n* Next, declare scss, less or styl file path references in styleguide config file:\n\n    `\"cssVariables\": [\"/path/to/your/project/scss/file.scss\"]`\n\n* Lastly, open styleguide web page and select from the menu 'Scrape Variables'. Note, make sure you have styleguide server running.\n\n\n##### - To add CSS resources of the project to the styleguide: #####\nStyleguide snippets are loaded through iframe using `template.html` file. All css references should be defined there.\n\n\n##### - To modify styleguide settings: #####\nYou can add project name, project logo or change settings modifying `config.txt` file, located in your styleguide directory:\n```javascript\n{\n  \"projectName\": \"\", //Project name\n  \"projectUrl\": \"\",  //Domain name of your project\n  \"projectLogo\": \"\", //path to your project logo\n  \"jsResources\": [], //Javascript resources that's going to be included into the snippets\n  \"viewportWidths\": [ //Predefinded viewport breakpoints\n    480,\n    768,\n    1200\n  ],\n  \"serverPort\": 8889, //Default server port for styleguide component\n  \"snippetTemplate\": \"styleguide/template.html\", //HTML template which will be used to wrap and show html snippets. Project CSS resources of the project should be placed in this template as well.\n  \"cssVariables\": [], //Paths to your scss variables files\n  \"maxSassIterations\": 2000,\n  \"database\": \"styleguide/db\",\n  \"categories\": \"styleguide/db/categories.txt\",\n  \"uniques\": \"styleguide/db/uniques.txt\",\n  \"sassData\": \"styleguide/db/sassdata.txt\",\n  \"extension\": \".txt\"\n}\n```\n\n[![Analytics](https://ga-beacon.appspot.com/UA-73039601-2/Styleguide/readme)](https://github.com/igrigorik/ga-beacon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbridge%2FStyleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevbridge%2FStyleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbridge%2FStyleguide/lists"}