Transcript
Page 1: Frontend django, Django Web 前端探索

Web Tim

Page 2: Frontend django, Django Web 前端探索

• Django backend framework

• Django

Page 3: Frontend django, Django Web 前端探索

• npm gem bower

• makefile grunt gulp

Page 4: Frontend django, Django Web 前端探索
Page 5: Frontend django, Django Web 前端探索
Page 6: Frontend django, Django Web 前端探索

• .css

• CSS Framework

• bootstrap, materialize, semantic ui …

Page 7: Frontend django, Django Web 前端探索

<html>

<head>

<!— style —>

</head>

<body>

<!— html —>

</body>

</html>

Page 8: Frontend django, Django Web 前端探索

Bootstrap

Page 9: Frontend django, Django Web 前端探索
Page 10: Frontend django, Django Web 前端探索

css

1. css static

2. template link tag css

Page 11: Frontend django, Django Web 前端探索

static

• Django :

• app static css

• STATICFILES_DIRS css

Page 12: Frontend django, Django Web 前端探索

CSS

• ...

Page 13: Frontend django, Django Web 前端探索

SASS

• Ruby

• mixin

Page 14: Frontend django, Django Web 前端探索

SASS

Page 15: Frontend django, Django Web 前端探索

Compass

• function

Page 16: Frontend django, Django Web 前端探索

susy

• grid system

• bootstrap grid

Page 17: Frontend django, Django Web 前端探索

libsass

Page 18: Frontend django, Django Web 前端探索

python.org

• Vagrant ( sass )

• sass/compass

• susy ( will be removed )

Page 19: Frontend django, Django Web 前端探索

base.html

• python css

• style.css

• mq.css

Page 20: Frontend django, Django Web 前端探索

sass css

cd static

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

Page 21: Frontend django, Django Web 前端探索

• style.scss

• mq.scss mq media query

Page 22: Frontend django, Django Web 前端探索

style.scss

Page 23: Frontend django, Django Web 前端探索

style.scss

Page 24: Frontend django, Django Web 前端探索

how python.org responsive?

Page 25: Frontend django, Django Web 前端探索

Django project

Page 26: Frontend django, Django Web 前端探索

Dependency• vagrant , dependency

• Makefile

• libsass

• bower

• requirejs

Page 27: Frontend django, Django Web 前端探索

Makefile

• syntax

Page 28: Frontend django, Django Web 前端探索

Makefile# Makefile

run: python manage.py runserver 0.0.0.0:8000

make run run server

Page 29: Frontend django, Django Web 前端探索

libsass• !

• builtin watch

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

• make watch-scss ~~~

Page 30: Frontend django, Django Web 前端探索

js dependency

• dependecny

• django bower js. js commit repo

• ( pip + virtualenv bower, bower )

Page 31: Frontend django, Django Web 前端探索

requirejs

• js

• requirejs ...

• django project base.html

Page 32: Frontend django, Django Web 前端探索

• Open Source Project