Frontend django, Django Web 前端探索

  • View
    853

  • Download
    5

Embed Size (px)

Transcript

  • Web Tim

  • Django backend framework

    Django

  • npm gem bower

    makefile grunt gulp

  • .css

    CSS Framework

    bootstrap, materialize, semantic ui

  • Bootstrap

  • css

    1. css static

    2. template link tag css

  • static

    Django :

    app static css

    STATICFILES_DIRS css

  • CSS

    ...

  • SASS

    Ruby

    mixin

  • SASS

  • Compass

    function

  • susy

    grid system

    bootstrap grid

  • libsass

  • python.org

    Vagrant ( sass )

    sass/compass

    susy ( will be removed )

    http://python.org

  • base.html

    python css

    style.css

    mq.css

  • sass css

    cd static

    sass --compass --scss -I $(dirname $(dirname $(gem which susy))) --trace --watch sass/style.scss:sass/style.css

  • style.scss

    mq.scss mq media query

  • style.scss

  • style.scss

  • how python.org responsive?

    http://python.org

  • Django project

  • Dependency vagrant , dependency

    Makefile

    libsass

    bower

    requirejs

  • Makefile

    syntax

  • Makefile# Makefile

    run: python manage.py runserver 0.0.0.0:8000

    make run run server

  • libsass !

    builtin watch

    watchmedo shell-command --patterns=*.scss --recursive --command="make compile-scss-debug" $(SCSS)

    make watch-scss ~~~

  • js dependency

    dependecny

    django bower js. js commit repo

    ( pip + virtualenv bower, bower )

  • requirejs

    js

    requirejs ...

    django project base.html

  • Open Source Project