Bootswatch and Material-kit

LET'S USE AND COMBINE BOOTSTRAP TEMPLATE WITH JQUERY AND ANGULAR.JS.

Goals
1. commit to bootswatch or material-kit by finding any possible improvement while making use of their theme.
2. commit to bootswatch or material-kit by using jquery or angular.js.




Steps
1. Sending issue to bootswatch, make sure whether angular.js can be used in bootswatch and then find clear direction of commit.
2. After deciding direction of commit, make use of themes of bootswatch and analyze them.
3. In 2 step, if there is any possible improvement or error, then commit.
4. Combining bootswatch with pre-designed pages, decide to use angular.js.
5. In 4 step, if it's possible, try to make reduce amount of codes.
6. Add new features and functions to origin of template
7. Wrapping up the static page.
8. Review.




Progress Bars


step1

60% Complete

step2

60% Complete

step3

60% Complete

step4

60% Complete

step5

60% Complete

step6

60% Complete

step7

60% Complete

step8

60% Complete



Workspace

1. Sending an issue to bootswatch


  1) 페이지 제작 도중 progress bar에 mouse hover text 기능이 들어가면 좋을 것 같다고 판 단해 bootswatch에 관련 이슈를 보냈다.
  2) bootswatch theme들의 기능 개선이나 기능 추가를 위해 jqury 혹은 angular.js를 사용해도 되는지 여부를 묻기 위해 관련 이슈를 보냈다.
  3) 해당 이슈에 대한 답변을 기다리는 중

2. Sending an issue to material-kit


  1) material-kit 역시 페이지 제작 도중 progress bar에 mouse hover text 기능이 들어가면 좋을 것 같다고 판 단해 material-kit에 관련 이슈를 보냈다.
  2) 해당 이슈에 대한 답변을 기다리는 중

1. Comparison of progress bars
  1) Matrial-kit
60% Complete
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
  2) Bootswatch
Basic
Contextual alternatives
Striped
Stacked
2. Paginations
  1) Matrial-kit

  2) Bootswatch



2. Improvement of progress bars by me
  1) Bootswatch
Before(Basic)
After(Animated)

  2) Material-kit
Before(Basic)
60% Complete
After(Slider)
After(Hover-text)
60% Complete

1. Decision from reply of issue

  1) issue에 대한 답변은 hover text 기능을 추가해도 좋다는 것이었다.
  2) 하지만 다른 theme들과의 통일성을 유지하기 위해 angular.js는 사용불가하다는 답변.
  3) thomas가 제시해준대로 bootstrap의 tooltip 사용하기로 결정

1. Usage of tooltip on codepen.io


2. Explanation of tooltip.js of bootstarp



1. Pull-request to material-kit

  1) Material-kit 의 progress bar에 hovering text 기능을 추가해 pull request를 보냄. title 태그만 이용해서 pull-request함
  2) html entities로 부터 오는 error수정 .
  3) merge 여부를 기다리는 중.
  
2. Pull-request to Bootswatch

  1) Cosmo theme의 progress bar에 hovering text 기능을 추가해 pull request를 보냄.
  2) merge 여부를 기다리는 중.
  1) Cosmo theme뿐만아니라 Cerulean과 Cyborg theme도 수정
  2) merge 여부를 기다리는 중.

  Review
   1) pagination errr를 해결하지 못함.
   2) 원래 목표였던 angular.js를 사용해서 pull-request를 보내지 못함.
   3) page code 가독성이 심각함.
   4) 혼자해서 merge할 때 충돌에 대한 걱정이 없어서 좋았다...