frontend django, django web 前端探索
TRANSCRIPT
Web Tim
• Django backend framework
• Django
•
• npm gem bower
• makefile grunt gulp
•
• .css
• CSS Framework
• bootstrap, materialize, semantic ui …
<html>
<head>
<!— style —>
</head>
<body>
<!— html —>
</body>
</html>
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
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?
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
•