Skip to main content

A simple Django app to make styleguide

Project description

help you launch your style guide site with KSS syntax

pictures/screenshot.png

start

pip install django-kss

Installed APP Settings

in settings.py

Add the two app,

INSTALLED_APPS += (
    "django_kss",
)

urls.py settings

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

import:

import django_kss.urls

add the url patterns:

url(r’^$’, include(django_kss.urls)),

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;
        }
}

extend styleguide.html

some times, you need to use extra css or js in your style guide. so the default template is not enough. you can just use the following way to make a better style guide

put the following html in your any template folder

{% extends 'styleguide.html' %}

{% load compress %}
{% load staticfiles %}


{% block style %}
    {% compress css %}
        <link rel="stylesheet" type="text/x-scss" href="{% static 'css/ntu.scss' %}">
    {% endcompress %}
{% endblock %}


{% block bottom %}
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
{% endblock %}

in your views.py, just specify the template

from django_kss.views import AutoStyleGuideView


class StyleGuideView(AutoStyleGuideView):
    template_name = 'filename you like .html'

specify your the view in your urls.py ( replace the package name with yours )

url(r'^style_guide/(?P<section>\d*)$', style.views.StyleGuideView.as_view(), name='styleguide'),

Use the The Preconfigured Django Server

  • git clone https://github.com/timtan/django_kss

  • cd django_kss

  • virtualenv venv

  • source venv/bin/activate

  • pip install -r requirements.txt

  • cd django_kss_project

  • python manage.py runserver

  • refer the KSS Related settings’s section to full fill your need.

Development

計畫可以方便的做 Style Guide.

DRY 要到一個極致。

只有寫 CSS, 接下來,就可以自動產生 Style Guide 的頁面。

CSS -> Generate List, Generate Page

所有的 input 由產生的 css 來做判斷,這樣才能跟所有的 CSS Preprocessor 整合。

計畫:

  1. 做成 APP, 整進 Django

  2. 畫面可以由 Bootsrap 的 tab 來分段較順手跟簡單。

  3. 我們需要設定的,是檔案清單位置,還有 CSS 檔位置。
    • 檔案清單在 setting.py

    • CSS 位置都寫在 Settting.py 集中 setting

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-kss-0.1.12.tar.gz (13.0 kB view hashes)

Uploaded Source

Built Distribution

django-kss-0.1.12.macosx-10.10-intel.tar.gz (56.5 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page