django-kss-styleguide 0.5.0

A simple Django app to make styleguide

Help you launch your style guide site with django in KSS syntax. you can integrate the style giude in your site easily. I use it every day. feel free to give me any suggestion.

start

pip install django-styleguide

Settings

in yout settings.py

Add the app,

INSTALLED_APPS += (
            "compressor",
    "django_kss",
)

Related Settings

in settings.py

because scss is very common, we support it via djagno compressor Add setting about django compressor.

in your app.

add filename called styleguide.py in your app.

source_dir where you write you kss comment and css files

verbose_name your app name

target_files if you use scss, put which file you want to compile and show up in your link tag

urls.py settings

Routing, add the following two lines in your project’s urls.py

import:

add the url patterns:

html

for F2E or designer

put your more complete html in templates/prototype/

you can view it automatically in the site

Writing The KSS in your scss/less/css file

/*
Buttons

Styleguide 1
*/


/*
Your standard form button.

.btn-danger   -  danger
.btn-warning  -  warning
.btn-info     -  info


Example:
        <button class="liftedBtn $modifier_class" >按鈕</button>

Styleguide 1.1
*/

.liftedBtn{
        @extend .btn;
        position: relative;
        border-width: 0;
        letter-spacing: 1px;
        border-bottom-color: rgba(30,30,30,0.3);
        border-bottom-width: 0;
        transition: all 0.2s;
        bottom: 0;
        &:hover{
                bottom: $strong-border-width;
                border-bottom-width: $strong-border-width;
        }
}