CSCI 3100 Tutorial 5 Bootstrap & Git ZENG, Jichuan Department of Computer Science and Engineering The Chinese University of Hong Kong

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

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

Prominent Features One framework, every device 4/26

Prominent Features Full of features 5 /26

HelloWorld Demo 6 /26

HelloWorld Demo 7 /26

HelloWorld Demo 8 /26

HelloWorld Demo 9 /26

Basic Usage Get the source code for every example below by downloading the Bootstrap repository zip zip 10 /26

Use Templates Some template/theme websites: StartBootstrap (Free) Bootswatch(Free) Wrapbootstrap 11 /26

Use Templates 12 /26

Advanced Features (Optional) Preprocessors 13 /26

Install Sass/SCSS Transpiler Download and install Ruby. 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

Sass/SCSS in WebStorm ling-sass-less-and-scss-to-css.html ling-sass-less-and-scss-to-css.html 15 /26

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

References saas saas watchers.html watchers.html /26

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

Personal Registration Bitbucket: 19 /26

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

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

Invite tutors as your group member 22 /26

Invite tutor account as a developer: 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

Create your project 24 /26

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

Now, you can develop your project with command line tool or GUI client The server address is like this: 26 /26

Git command list git init -- initialize a git reposition in your project directory git remote add origin 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: 27