Lecture 2

Class video

Resources

In this repository https://bitbucket.org/luca_de_alfaro/start you can find:

• The branch master contains the app "start" in its "default" state, good for starting new projects.
• The branch lecture2 contains the app as it was at the end of lecture2, with the code we developed.

Note that due to an unfortunate problem, a file private/appconfig.ini was missing from the repository. This file is intended for "private" application configuration information (such as database passwords, etc), and so unfortunately the default .gitignore prevents it from being added to a repository. I now fixed the problem and added it.

To get the app we developed for lecture2, do:

git clone https://luca_de_alfaro@bitbucket.org/luca_de_alfaro/start.git

git checkout lecture2

I will post later the video of the class.

You can access the start app by directing the browser to localhost:<port>//start/default/index

Note that if you want to change the styling, you need to ask compass to compile the style files for you. You do that via:

cd static

compass watch .

Whenever compass detects a change in the scss files, it will compile a new myapp.css file.

Here is a cheat sheet of some compass commands. For more information, see here.

See also the example given in class.

// Compass cheat sheet

@mixin featureBtn() {

  background-color: $color_cg_orange;

  color: white;

  font-size: 1.1em;

  text-transform: uppercase;

  padding: 4px 20px;

  &:hover {

    @include gradientBtn(darken($color_cg_orange, 10))

  }

}

div.myclass {

  @include background-image(linear-gradient(lighten($clrBg, 10%), $clrBg));

  color: darken($clrKey, 10%);

  @include featureBtn();

  @include text-shadow(rgba(black, 0.5) 0 1px 1px);

  @include box-shadow(rgba(#000,0.7) 0 4px 10px 2px);

  @include opacity(0.5);

  @include border-radius(8px);

}