1. CSCI 3100 Tutorial 5 Bootstrap & Git ZENG, Jichuan jczeng@cse.cuhk.edu.hk Department of Computer Science and Engineering The Chinese University of Hong Kong

2. Objective of This Tutorial What is Bootstrap How Bootstrap can improve your web pages. The basic usage of Bootstrap Some advanced features of Bootstrap (Optional) 2/26

3. What is Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 3/26

4. Prominent Features One framework, every device 4/26

5. Prominent Features Full of features 5 /26

6. HelloWorld Demo 6 /26

7. HelloWorld Demo 7 /26

8. HelloWorld Demo 8 /26

9. HelloWorld Demo http://getbootstrap.com/getting-started/ 9 /26

10. Basic Usage Get the source code for every example below by downloading the Bootstrap repository https://github.com/twbs/bootstrap/archive/v3.3.6. zip https://github.com/twbs/bootstrap/archive/v3.3.6. zip 10 /26

11. Use Templates Some template/theme websites: StartBootstrap (Free) http://startbootstrap.com/template-categories/all/ Bootswatch(Free) http://bootswatch.com Wrapbootstrap https://wrapbootstrap.com/themes 11 /26

12. Use Templates 12 /26

13. Advanced Features (Optional) Preprocessors 13 /26

14. Install Sass/SCSS Transpiler Download and install Ruby. http://www.ruby-lang.org/en/downloads Specify a path variable for the folder where the Ruby executable file and the gem.bat file are stored. Type one of the following commands at the command line prompt $ gem install sass 14 /26

15. Sass/SCSS in WebStorm https://www.jetbrains.com/webstorm/help/transpi ling-sass-less-and-scss-to-css.html https://www.jetbrains.com/webstorm/help/transpi ling-sass-less-and-scss-to-css.html 15 /26

16. Sass Syntax Variables Nesting Import Operators Conditional Statement Extend/Inheritanc e 16 /26

17. References http://getbootstrap.com/ http://sass-lang.com/guide http://www.hongkiat.com/blog/getting-started- saas http://www.hongkiat.com/blog/getting-started- saas https://www.jetbrains.com/webstorm/help/file- watchers.html https://www.jetbrains.com/webstorm/help/file- watchers.html http://www.bootcss.com/p/lesscss/ https://github.com/twbs/bootstrap/ 17 /26

18. Guide of Code Submission SU Yuxin (Presented by ZENG, Jichuan) Department of Computer Science and Engineering The Chinese University of Hong Kong

19. Personal Registration Bitbucket: https://bitbucket.org/https://bitbucket.org/ 19 /26

20. Create a team Only one of team member needs to do this. 20 /26

21. Input team ID as ‘groupXX_csci3100_2016’ Add other members to this group 21 /26

22. Invite tutors as your group member 22 /26

23. Invite tutor account as a developer: csci3100@cse.cuhk.edu.hk csci3100@cse.cuhk.edu.hk You can also add other member here. However, due to the limitation of free account, Bitbucket only allows that a team have maximum 5 members. For those groups with 5 members, you can create at most 4 accounts for Developers, one of which can be shared with 2 members during coding. 23 /26

24. Create your project 24 /26

25. Create a private project A private project is only visible to team members 25 /26

26. Now, you can develop your project with command line tool or GUI client The server address is like this: https://bitbucket.org/group55_csci3100_2016/myproject 26 /26

27. Git command list git init -- initialize a git reposition in your project directory git remote add origin https://myaccount@bitbucket.org/mygroup_csci3100/mypr oject.git -- add a remote repository git add. -- add all file(s) in your project directory git commit -m ’my comments’ -- commit a local update git push –u origin master -- push to the remote repository (first time) Reference: https://git-scm.com/documentation 27