Frontend django, Django Web 前端探索
18 likes2,139 views
The document discusses setting up a Django backend framework with various dependencies, including tools for CSS and JavaScript management such as npm, Bower, and Sass. It provides instructions for organizing static files, utilizing a grid system with Bootstrap, and managing project dependencies with Vagrant and Makefile. Additionally, it outlines commands for running the Django server and compiling SCSS files.
Frontend django, Django Web 前端探索
- 1. Web Tim
- 2. • Django backend framework • Django
- 3. • • npm gem bower • makefile grunt gulp •
- 6. • .css • CSS Framework • bootstrap, materialize, semantic ui …
- 7. <html> <head> <!— style —> </head> <body> <!— html —> </body> </html>
- 8. Bootstrap
- 10. css 1. css static 2. template link tag css
- 11. static • Django : • app static css • STATICFILES_DIRS css
- 12. CSS • • • ...
- 14. SASS
- 16. susy • grid system • bootstrap grid
- 17. libsass
- 18. python.org • • Vagrant ( sass ) • sass/compass • susy ( will be removed )
- 19. base.html • python css • style.css • mq.css
- 20. sass css cd static sass --compass --scss -I $(dirname $(dirname $(gem which susy))) --trace --watch sass/style.scss:sass/ style.css
- 21. • style.scss • mq.scss mq media query
- 22. style.scss
- 23. style.scss
- 25. Django project
- 26. Dependency • vagrant , dependency • Makefile • libsass • bower • requirejs
- 28. Makefile # Makefile run: python manage.py runserver 0.0.0.0:8000 make run run server
- 29. libsass • ! • builtin watch • watchmedo shell-command --patterns=*.scss -- recursive --command="make compile-scss-debug" $(SCSS) • make watch-scss ~~~
- 30. js dependency • dependecny • django bower js. js commit repo • ( pip + virtualenv bower, bower )
- 31. requirejs • js • requirejs ... • django project base.html
- 32. • Open Source Project •