Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
python.org • • Vagrant ( sass ) • sass/compass • susy ( will be removed )
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.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" $...
js dependency • dependecny • django bower js. js commit repo • ( pip + virtualenv bower, bower )
requirejs • js • requirejs ... • django project base.html
• Open Source Project •
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Upcoming SlideShare
Loading in …5
×

Frontend django, Django Web 前端探索

1,927 views

Published on

how python.org and djangoproject.com setup their development environment。 it is suit for front end new comer for a Django guy

Published in: Technology
no profile picture user

  • Login to see the comments

Show More

Frontend django, Django Web 前端探索

  1. 1. Web Tim
  2. 2. • Django backend framework • Django
  3. 3. • • npm gem bower • makefile grunt gulp •
  4. 4. • .css • CSS Framework • bootstrap, materialize, semantic ui …
  5. 5. <html> <head> <!— style —> </head> <body> <!— html —> </body> </html>
  6. 6. Bootstrap
  7. 7. css 1. css static 2. template link tag css
  8. 8. static • Django : • app static css • STATICFILES_DIRS css
  9. 9. CSS • • • ...
  10. 10. SASS • Ruby • mixin
  11. 11. SASS
  12. 12. Compass • function
  13. 13. susy • grid system • bootstrap grid
  14. 14. libsass
  15. 15. python.org • • Vagrant ( sass ) • sass/compass • susy ( will be removed )
  16. 16. base.html • python css • style.css • mq.css
  17. 17. sass css cd static sass --compass --scss -I $(dirname $(dirname $(gem which susy))) --trace --watch sass/style.scss:sass/ style.css
  18. 18. • style.scss • mq.scss mq media query
  19. 19. style.scss
  20. 20. style.scss
  21. 21. how python.org responsive?
  22. 22. Django project
  23. 23. Dependency • vagrant , dependency • Makefile • libsass • bower • requirejs
  24. 24. Makefile • syntax •
  25. 25. Makefile # Makefile run:
 python manage.py runserver 0.0.0.0:8000 make run run server
  26. 26. libsass • ! • builtin watch • watchmedo shell-command --patterns=*.scss -- recursive --command="make compile-scss-debug" $(SCSS) • make watch-scss ~~~
  27. 27. js dependency • dependecny • django bower js. js commit repo • ( pip + virtualenv bower, bower )
  28. 28. requirejs • js • requirejs ... • django project base.html
  29. 29. • Open Source Project •

×