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.

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
  • Login to see the comments

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 •

×