Normalize.css

https://github.com/necolas/normalize.css

The browser has default style “User Agent Stylesheet”

Tag

<span>

Property

Direction

Flex

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://caniuse.com/#search=flexbox

display: flex; /* or inline-flex */
flex-direction: row | row-reverse | column | column-reverse;

Align

Parent Properties

align-items: center; // align child items vertically
justify-content: center; // align child items horizontal

parent {
    display: flex;
    flex-direction: column;
    
}

child {
	align-self: center;
	width: 10px;
	height: 10px;
}

// This shows the child at 'center top' 

To center an element

 {
    margin-left: auto;
    margin-right: auto;
    width: 8em
}

child {
	align-self: center;
}

// In this way the parent should be flex

align-self and align-items align for items inside the flexible container. So the parent should be flex and the child alignment is the same as the parent.

center the text in the parent (vertical or horizontal depends on the parent)

text-align: center

inner border

box-sizing: border-box;

One rule for all

* {
   box-sizing: border-box;
}

Very useful properties for Image

Make the image responsive

max-width: 100%

Display horizontal

display: inline

goto the next line as a block, trate elements as block ( Often used )

display: inline-block


display: table
display: table-cell

vertical-align: middle;

boarder-radius: 5px;
float:left;

background

background-image: url(‘../img/mountains.jpg’)

Default background is repeat

background-repeat: repeat-x;
background-repeat: repeat-y;

background-position: center top;
background-position: 20% 50%;

Display image at a scale size

background-size: cover;

Best practice:

img{
  max-width: 100%;
  margin-bottom:20px;

}

.container{
  
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Always show footer:

Wrap the header and content with .wrap

Footer height is 60 px

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


.page-wrap{
  min-height: calc(100vh - 60px);
}  
  
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

vh means “Viewport relative unit”. it stands for Viewport Height.

Responsive Layout

Media Queries

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 768px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }

}



 @media only screen and (min-width: 768px),
            only screen and (min-with: 700px) and (orientation: landscape) {

  .wrapper {
    width: 1026px;
    margin: 0 auto;
  }

  .title {
    font-size: 2em;
  }

  nav a {
    padding: 25px 1%;
  }
  
}

CSS Basic

AngularJS study path