litopia

Why Style Tiles?

In the artical of Style Tiles: An Alternative to Full Design Comp, it illustrate the reason of using style tiles is becaue that you can present clients with interface choices without making the investment in multiple photoshop mockups.

###Issues with Photoshop Mockups The issue with full-designed Photoshop Mockups is that they are not scable at all. It takes at least 2 months to fully impletment the site from the concensent of the mockups with stakeholders. And during that 2 months, a lot of things can hanppen.

I worked with a web agency to resigned our company website before. And during the design phrase, they presented us with some really beautiful Photoshop Mockups. They were really great, very pretty. And we were so happy about those.

But the issue came after the whole website was implemented. We wanted more features. We wanted more robust features because of business growth.

litopia

• Install Lib SASS
• Install task runner Grunt
• Automate Task runner Grunt-watch
• Install bourbon library via npm
• install bower packages
• process css taking advantages of the above

---

How to write a bower readme.

litopia

http://stackoverflow.com/questions/67699/clone-all-remote-branches-with-git

First, clone a remote Git repository and cd into it:

$ git clone git://example.com/myproject
$ cd myproject

Next, look at the local branches in your repository:

litopia

##JShint JSHint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules. It was forked from Douglas Crockford's JSLint project, as it was felt that the original did not allow enough customization options.

Github page for install and usage of jshint

###JShint vs. JSlint

If you're looking for a very high standard for yourself or team, JSLint. But its not necessarily THE standard, just A standard, some of which comes to us dogmatically from a javascript god named Doug Crockford. If you want to be a bit more flexible, or have some old pros on your team that don't buy into JSLint's opinions, or are going back and forth between JS and other C-family languages on a regular basis, try JSHint

JShint vs. JSlint

litopia

/* link: http://www.gradient-animator.com/ */
background: linear-gradient(254deg, #342466, #665024, #2a6624);
background-size: 600% 600%;
-webkit-animation: AnimationName 54s ease infinite;
-moz-animation: AnimationName 54s ease infinite;
-o-animation: AnimationName 54s ease infinite;
animation: AnimationName 54s ease infinite;
@-webkit-keyframes AnimationName {
    0%{background-position:0% 71%}
    50%{background-position:100% 30%}

litopia

webkit only
```css
.text-gradient
  background: linear-gradient(145deg, #CFE02F, #F7901E)
  -webkit-background-clip: text
  -webkit-text-fill-color: transparent
```

cross browser using svg
``` html

litopia

.fixed-background-container
  background: transparent
  color: $white

  &:before
    content: ''
    position: fixed
    height: 100%
    width: 100%
    top: 0

litopia

Emmet
DocBlocker: a good way to write comment
Todo review
Git Gutter
Git
color highlighter