{"id":13397775,"url":"https://github.com/bjankord/Style-Guide-Boilerplate","last_synced_at":"2025-03-14T00:32:39.400Z","repository":{"id":7250048,"uuid":"8560989","full_name":"bjankord/Style-Guide-Boilerplate","owner":"bjankord","description":"⚡️🎨 A starting point for crafting living style guides. ","archived":false,"fork":false,"pushed_at":"2024-06-14T11:31:11.000Z","size":670,"stargazers_count":1948,"open_issues_count":10,"forks_count":458,"subscribers_count":106,"default_branch":"main","last_synced_at":"2025-01-13T09:46:34.292Z","etag":null,"topics":["boilerplate","css","html","styleguide"],"latest_commit_sha":null,"homepage":"http://bjankord.github.io/Style-Guide-Boilerplate/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bjankord.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","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":"2013-03-04T17:41:26.000Z","updated_at":"2025-01-10T21:20:38.000Z","dependencies_parsed_at":"2024-10-25T14:51:57.880Z","dependency_job_id":"52b14d29-9979-4430-a37b-b3d9bbbd91d8","html_url":"https://github.com/bjankord/Style-Guide-Boilerplate","commit_stats":{"total_commits":126,"total_committers":12,"mean_commits":10.5,"dds":0.5158730158730158,"last_synced_commit":"17f9f4cea3420145cdeb2a3d3b4199f1c56aa11b"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjankord%2FStyle-Guide-Boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjankord%2FStyle-Guide-Boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjankord%2FStyle-Guide-Boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjankord%2FStyle-Guide-Boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bjankord","download_url":"https://codeload.github.com/bjankord/Style-Guide-Boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243352031,"owners_count":20276914,"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":["boilerplate","css","html","styleguide"],"created_at":"2024-07-30T18:01:44.259Z","updated_at":"2025-03-14T00:32:39.378Z","avatar_url":"https://github.com/bjankord.png","language":"HTML","funding_links":[],"categories":["HTML","Web Frontend","类库"],"sub_categories":["未归类"],"readme":"Style-Guide-Boilerplate v3.3.2\n==============================\n\nA starting point for crafting living style guides.\n\n[View Demo](http://bjankord.github.io/Style-Guide-Boilerplate/demo.html)\n\n*Note: Sample patterns have been included in the demo. Your site will have its own unique patterns.*\n\n![Screenshot](http://bjankord.github.io/Style-Guide-Boilerplate/images/screenshot.png)\n\n## Getting Started With Style Guide Boilerplate\n\n### Download the Style Guide Boilerplate\nYou can clone, fork, or download the repo from GitHub.\nOnce you have the files for **Style Guide Boilerplate**, you'll create a directory on your site for them.\n\n### Set up a directory on your site for the style guide\nI recommend creating a directory named `style-guide` in your site's root directory.\n\n### Upload the Style Guide Boilerplate files\n**Style Guide Boilerplate** is currently PHP based so you will need a server that supports PHP. Upload the files from the GitHub repo to your newly created directory.\n\n### Hook up your own CSS into the style guide\nIn the `\u003chead\u003e` of **Style Guide Boilerplate** are custom styles for the boilerplate itself. These have all been prefixed with sg- so they hopefully shouldn't cause any conflicts with your website's own styles.\n\nBelow the custom styles for the boilerplate, you will add in your own custom stylesheet(s) which you use on your live site.\n\n```html\n\u003c!-- Style Guide Boilerplate Styles --\u003e\n\u003clink rel=\"stylesheet\" href=\"css/sg-style.css\"\u003e\n\n\u003c!-- Replace below stylesheet with your own stylesheet --\u003e\n\u003clink rel=\"stylesheet\" href=\"css/style.css\"\u003e\n```\n\n### Review your live site CSS\nYou should be able to go to `yoursite.com/style-guide/` and see how your live site's CSS affects base elements.\nThe last step is creating your site's custom patterns/modules.\n\n### Create custom patterns\nTo create custom patterns like buttons, breadcrumbs, alert messages, etc., create a new .html file and add your HTML markup into the file.\n\nSave the file as `pattern-name.html` into the `markup/patterns` directory inside of your `style-guide` directory.\n\nYou should now be able to see the new patterns at `yoursite.com/style-guide/`\n\n### Create personalized documentation\nYou can use markdown or html to create personalized documentation for your examples. Create a new .md or .html file and name it whatever your markup snippet file is named.\n\nSave the file as `markup-name.md` or `markup-name.html` into the `doc/base` or `doc/patterns` directory inside of your `style-guide` directory.\n\nFor example, if you want to create doc for `markup/patterns/breadcrumbs.html`, create a file called `breadcrumbs.md` or `breadcrumbs.html` and save it into `doc/patterns`.\n\nYou should now be able to see the new doc at `yoursite.com/style-guide/`\n\n## Running the app\nYou can run the application with PHP's built in web server. Run the following command:\n\n`php -S localhost:8000`\n\nNow, browse to [http://localhost:8000](http://localhost:8000) to see the website.\n\n## Generating static HTML style guide\nYou can generate a static index.html version of style guide boilerplate by running the following command:\n\n`php index.php \u003e index.html`\n\n## Browser Support\nI've built **Style Guide Boilerplate** with progressive enhancement in mind to work on a wide range of browsers.\n\n\n\nKnown supported browsers include:\n\n* Chrome\n* Firefox\n* Safari\n* Opera\n* IE8+\n* Safari for iOS\n* Stock Android Browser (4.0+)\n\nTested with [BrowserStack](https://www.browserstack.com/).\n\n[![BrowserStack](https://raw.githubusercontent.com/bjankord/Style-Guide-Boilerplate/master/browserstack-logo-600x315.png)](https://www.browserstack.com/)\n\nIf you come across any bugs, or have any other issues with the boilerplate, please open an issue here on GitHub.\n\n\n## Additional Resources\n[Styleguides.io](http://styleguides.io)\n\n[Front-end Style Guides](http://24ways.org/2011/front-end-style-guides/)\n\n[Front-end Style Guide Roundup](https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides)\n\n[Future-Friendly Style Guides](https://speakerdeck.com/lukebrooker/future-friendly-style-guides)\n\n[HTML KickStart](http://www.99lime.com/elements/)\n\n[Oli.jp Style Guide](http://oli.jp/2011/style-guide/)\n\n[Jeremy Keith's Pattern Primer](http://adactio.com/journal/5028/)\n\n[Paul Robert Llyod's Style Guide](http://www.paulrobertlloyd.com/about/styleguide/)\n\n[Pears](http://pea.rs/)\n\n[Starbucks Style Guide](http://www.starbucks.com/static/reference/styleguide/)\n\n## Credit\nThanks to:\n\nJeremy Keith for letting me build on top of [Pattern Primer](https://github.com/adactio/Pattern-Primer).\n\n## Ports\n* A nodejs port using handlebars is available at [Style-Guide-Boilerplate-nodejs](https://github.com/DeadlyBrad42/Style-Guide-Boilerplate-nodejs).\n* A ruby port avaiable at [Rails_App_Style_Guide](https://github.com/JoshuaMSchultz/Rails_App_Style_Guide)\n\n## Contributing to this project\nPlease take a moment to\nreview the [guidelines for contributing](CONTRIBUTING.md).\n\n* [Bug reports](CONTRIBUTING.md#bugs)\n* [Feature requests](CONTRIBUTING.md#features)\n* [Pull requests](CONTRIBUTING.md#pull-requests)\n\n## Licensing\n**Style Guide Boilerplate** is licensed under the [MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjankord%2FStyle-Guide-Boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbjankord%2FStyle-Guide-Boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjankord%2FStyle-Guide-Boilerplate/lists"}