{"id":16452897,"url":"https://github.com/vitalk/flask-styleguide-example","last_synced_at":"2025-09-17T23:04:55.186Z","repository":{"id":28958957,"uuid":"32485111","full_name":"vitalk/flask-styleguide-example","owner":"vitalk","description":"Example of living Styleguide made with Flask-Styleguide","archived":false,"fork":false,"pushed_at":"2016-12-10T12:25:07.000Z","size":78,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-26T18:52:43.532Z","etag":null,"topics":["example","flask","kss","styleguide"],"latest_commit_sha":null,"homepage":"http://vitalk.github.io/flask-styleguide-example/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vitalk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-18T21:23:06.000Z","updated_at":"2017-02-19T08:42:08.000Z","dependencies_parsed_at":"2022-08-17T18:45:33.625Z","dependency_job_id":null,"html_url":"https://github.com/vitalk/flask-styleguide-example","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/vitalk/flask-styleguide-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalk%2Fflask-styleguide-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalk%2Fflask-styleguide-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalk%2Fflask-styleguide-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalk%2Fflask-styleguide-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vitalk","download_url":"https://codeload.github.com/vitalk/flask-styleguide-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalk%2Fflask-styleguide-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275680444,"owners_count":25508570,"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","status":"online","status_checked_at":"2025-09-17T02:00:09.119Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["example","flask","kss","styleguide"],"created_at":"2024-10-11T10:14:08.045Z","updated_at":"2025-09-17T23:04:55.169Z","avatar_url":"https://github.com/vitalk.png","language":"Python","readme":"# Living Styleguide\n\nExample of living Styleguide made with [Flask-Styleguide](https://github.com/vitalk/flask-styleguide)\nand [Frozen-Flask](https://github.com/SimonSapin/Frozen-Flask/). This guide\ndescribes how to generate your own styleguide for any flask application.\n\n- Use [KSS](http://warpspire.com/kss/) to document your stylesheets. KSS is\n  documentation syntax for any flavor CSS. It's human readable, machine\n  parsable, and easy to remember. [Flask-Styleguide](https://github.com/vitalk/flask-styleguide)\n  looks for any KSS formated documentation in static directories of your\n  application and registered blueprints (if any). \n\n  ```less\n  // A standard, but classy, button used widely for submit forms and\n  // to complete other app actions.\n  //\n  // :hover - Hover state.\n  // :active - When the button is pressed.\n  // :focus - When the button is focused.\n  // :disabled - Disabled state.\n  // .is-disabled - Same as above.\n  //\n  // Styleguide 2.1.\n  ```\n\n- Define endpoint for your styleguide in application:\n\n  ```python\n  @app.route('/styleguide/')\n  def styleguide():\n      return render_template('styleguide.html')\n  ```\n\n- The new jinja tag `styleguide` becomes available when `flask_styleguide` is\n  initialized. Let's write some html examples for our buttons:\n\n  ```jinja\n  {% extends 'layout.html' %}\n  {% block main %}\n    {% styleguide \"2.1\" %}\n      \u003cbutton class=\"button$modifier_class\"\u003eButton\u003c/button\u003e\n      \u003ca class=\"button$modifier_class\"\u003eA button link\u003c/a\u003e\n    {% endstyleguide %}\n  {% endblock %}\n  ```\n\n- The `styleguide/section.html` template will be used for each section in your\n  styleguide (like `2.1` in the previous step). Let's define it:\n\n  ```jinja\n  \u003carticle class=\"style-guide\" id=\"{{ section.section }}\"\u003e\n    \u003ch4 class=\"style-guide-reference\"\u003e{{ section.section }}\u003c/h4\u003e\n\n    \u003cdiv class=\"style-guide-description\"\u003e\n      \u003cp\u003e{{ section.description|safe }}\u003c/p\u003e\n      {% if section.modifiers %}\n        \u003cul class=\"style-guide-modifiers\"\u003e\n          {% for m in section.modifiers %}\n            \u003cli\u003e\u003cstrong\u003e{{ m.name }}\u003c/strong\u003e - {{ m.description }}\u003c/li\u003e\n          {% endfor %}\n        \u003c/ul\u003e\n      {% endif %}\n    \u003c/div\u003e\n\n    \u003cdiv class=\"style-guide-element\"\u003e\n      {{ section.example|safe }}\n    \u003c/div\u003e\n\n    {% for m in section.modifiers %}\n      \u003cdiv class=\"style-guide-element\"\u003e\n        \u003csmall class=\"style-guide-modifier\"\u003e{{ m.name }}\u003c/small\u003e\n        {{ m.example|safe }}\n      \u003c/div\u003e\n    {% endfor %}\n\n    \u003cdiv class=\"style-guide-html\"\u003e\n      \u003cpre\u003e{{ section.example|forceescape }}\u003c/pre\u003e\n    \u003c/div\u003e\n  \u003c/article\u003e\n  ```\n\n- Prettify styleguide. Without styles styleguide looks not so great. Apply\n  some styling to it or reuse this one:\n\n  ```bash\n  bower install --save classy-style-guide\n  ```\n\n  ```less\n  @import 'classy-style-guide/components.style-guide.less';\n  ```\n\n- Now that you’re up and running. Fire up a browser and go to the\n  [brand new styleguide...](https://vitalk.github.io/flask-styleguide-example)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitalk%2Fflask-styleguide-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitalk%2Fflask-styleguide-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitalk%2Fflask-styleguide-example/lists"}