Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Frontend django, Django Web 前端探索

1.923 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

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 •

×