https://github.com/vitalk/flask-styleguide-example
Example of living Styleguide made with Flask-Styleguide
https://github.com/vitalk/flask-styleguide-example
example flask kss styleguide
Last synced: 3 months ago
JSON representation
Example of living Styleguide made with Flask-Styleguide
- Host: GitHub
- URL: https://github.com/vitalk/flask-styleguide-example
- Owner: vitalk
- Created: 2015-03-18T21:23:06.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-10T12:25:07.000Z (over 8 years ago)
- Last Synced: 2025-01-09T11:14:38.216Z (5 months ago)
- Topics: example, flask, kss, styleguide
- Language: Python
- Homepage: http://vitalk.github.io/flask-styleguide-example/
- Size: 76.2 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Living Styleguide
Example of living Styleguide made with [Flask-Styleguide](https://github.com/vitalk/flask-styleguide)
and [Frozen-Flask](https://github.com/SimonSapin/Frozen-Flask/). This guide
describes how to generate your own styleguide for any flask application.
- Use [KSS](http://warpspire.com/kss/) to document your stylesheets. KSS is
documentation syntax for any flavor CSS. It's human readable, machine
parsable, and easy to remember. [Flask-Styleguide](https://github.com/vitalk/flask-styleguide)
looks for any KSS formated documentation in static directories of your
application and registered blueprints (if any).
```less
// A standard, but classy, button used widely for submit forms and
// to complete other app actions.
//
// :hover - Hover state.
// :active - When the button is pressed.
// :focus - When the button is focused.
// :disabled - Disabled state.
// .is-disabled - Same as above.
//
// Styleguide 2.1.
```
- Define endpoint for your styleguide in application:
```python
@app.route('/styleguide/')
def styleguide():
return render_template('styleguide.html')
```
- The new jinja tag `styleguide` becomes available when `flask_styleguide` is
initialized. Let's write some html examples for our buttons:
```jinja
{% extends 'layout.html' %}
{% block main %}
{% styleguide "2.1" %}
Button
A button link
{% endstyleguide %}
{% endblock %}
```
- The `styleguide/section.html` template will be used for each section in your
styleguide (like `2.1` in the previous step). Let's define it:
```jinja
{{ section.section }}
{{ section.description|safe }}
{% if section.modifiers %}
{% for m in section.modifiers %}
-
{{ m.name }} - {{ m.description }}
{% endfor %}
{% endif %}
{{ section.example|safe }}
{% for m in section.modifiers %}
{{ m.name }}
{{ m.example|safe }}
{% endfor %}
{{ section.example|forceescape }}
```
- Prettify styleguide. Without styles styleguide looks not so great. Apply
some styling to it or reuse this one:
```bash
bower install --save classy-style-guide
```
```less
@import 'classy-style-guide/components.style-guide.less';
```
- Now that you’re up and running. Fire up a browser and go to the
[brand new styleguide...](https://vitalk.github.io/flask-styleguide-example)