SuperPlan(2)TaoBao Winner - UI Bootstrap

SuperPlan(2)TaoBao Winner - UI Bootstrap

Try and install the tool named Sublime Text 2 on my MAC.
http://www.sublimetext.com/2

1. Bootstrap
Download the compiled and source of Bootstrap.
http://twitter.github.io/bootstrap/assets/bootstrap.zip
https://nodeload.github.com/twitter/bootstrap/legacy.zip/master

1.1. File Structure
Unzip the compiled file named bootstrap.zip.
And we can compress the image file by http://imageoptim.com/.

css
     bootstrap.css
     bootstrap.min.css
js
     bootstrap.js
     bootstrap.min.js
img
     *.png

1.2. Basic HTML template
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

1.3. Examples
There are some useful examples. But I will skip that and directly look into the example of computer-database.

There are some useful documents
http://twitter.github.io/bootstrap/base-css.html
http://twitter.github.io/bootstrap/components.html

I will forget about the js, just use bootstrap as my CSS framework.

Examples from play samples: computer-database, forms

I got the table list sample in computers_withmessage.html, computers_nothing.html, computers.html

I got the form sample in computers_edit.html, users.signup.html

All these samples are in the project easybootstrap.

I will use the login sample from here http://twitter.github.io/bootstrap/examples/signin.html

This is really an easy sample. I would like to use this CSS in the future. Here put one example for me to get a feel about this.
users_logon.html
<html]]>
  <head]]>
    <title]]>Logon</title]]>
    <metaname="viewport"content="width=device-width, initial-scale=1.0"]]>
    <linkrel="stylesheet"media="screen"href="./stylesheets/bootstrap.min.css"]]>
    <linkrel="stylesheet"media="screen"href="./stylesheets/bootstrap-responsive.min.css"/>
    <linkrel="stylesheet"media="screen"href="./stylesheets/users_logon.css"]]>
    <linkrel="shortcut icon"type="image/png"href="./images/favicon.png"]]>
  </head]]>

  <body]]>
    <divclass="container"]]>
      <formclass="form-signin"]]>
        <h2class="form-signin-heading"]]>Please sign in</h2]]>
        <inputtype="text"class="input-block-level"placeholder="Email address"]]>
        <inputtype="password"class="input-block-level"placeholder="Password"]]>
        <labelclass="checkbox"]]>
          <inputtype="checkbox"value="remember-me"]]> Remember me
        </label]]>
        <buttonclass="btn btn-large btn-primary"type="submit"]]>Sign in</button]]>
      </form]]>
    </div]]>
  </body]]>
</html]]>


users_logon.css
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}

.form-signin {
max-width: 300px;
padding: 19px29px29px;
margin: 0auto20px;
background-color: #fff;
border: 1pxsolid#e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 01px2pxrgba(0,0,0,.05);
-moz-box-shadow: 01px2pxrgba(0,0,0,.05);
box-shadow: 01px2pxrgba(0,0,0,.05);
}

.form-signin .form-signin-heading,.form-signin .checkbox {
margin-bottom: 10px;
}

.form-signin input[type="text"],.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px9px;

}

There are also many examples in zentasks, but I do not like the look and feel.

There are also many example in spring side, it looks good.
https://github.com/springside/springside4/wiki/QuickStart

>cd /Users/carl/book/springside/springside4/examples

>cd quickstart
>mvn install
>mvn antrun:run -Prefresh-db
>mvn jetty:run

http://localhost:8080/quickstart/task/

When I try to start the other example, I met the out of memory error.
http://www.webappsolution.com/wordpress/2009/07/08/set-maven_opts-for-all-terminal-sessions/
I try to change that on my system to enable a big memory for my command.
>vi ~/.profile
export MAVEN_OPTS=-Xmx1024m
>. ~/.profile

But it needs more steps to set up the database part. So I will not see these examples.

Pay attention to the version of bootstrap, play use an old version 1.x.x, and the spring side use the version of 2.2.2.

The latest version is 2.3.1

2. NodeJS http://nodejs.org/
Install NodeJS, download the package from here http://nodejs.org/dist/v0.10.5/node-v0.10.5.pkg
/usr/local/bin/node
/usr/local/bin/npm

>node -v
v0.10.5

>npm -v
1.2.18

3. NPM https://npmjs.org/
After you install the NodeJS, the NPM will be there
We can also search the package here https://npmjs.org/, like maven repository.
>npm -h
>npm install
>npm install -h

4. Backbone
come soon…

5. SSI
http://sillycat.iteye.com/blog/1075378
come soon…

6. RequireJS http://requirejs.org/
come soon...

7. Grunt http://gruntjs.com/
come soon...

References:
http://twitter.github.io/bootstrap/getting-started.html
http://sillycat.iteye.com/blog/1075378
NodeJS 1~3
http://sillycat.iteye.com/blog/1453848
http://sillycat.iteye.com/blog/1460938
http://sillycat.iteye.com/blog/1462736