Web Layout - Notes

***************************************
Website layouts design
***************************************

> Layouts
- Forms
- Carousels
- Gallaries
- Header, Navigation,Logo, Side, Footer, Hero

> Progressive enhancements
> Sectioning elements
- Div, header, footer, nav, address
> CSS Reset
- Normalize.css
> Typographic and font sizes
> Free fonts
- GoogleFonts -> https://fonts.google.com/?authuser=0

> CSS Cascading
- Inheritance : e.g. all the child elements inherit the parent element's properties
- Source e.g User Agent, Users, Authors
- Specifity e.g. classes, ids, inline styles to apply css to specific elements
 >> Order of specifity is -> Universal Selectors (*) -> Type Selectors (p, h1) -> Classes (.heading) -> Attribute selectors (input[type="text"]) -> Psydo classes (:hover, :focus, :visited) -> Id selectors (#myid) -> inline selectors!!
- Importance (!important)
> Specifity Formula
- Put a number for each specifity that is found and add the numbers e.g. for
  Inline Ids Class/Psuedo-class/Attribute Type Selector/Psuedo
  0 1 2 1 -> #hero .myclass nth-of-type(2) h1
  0             2 2 1 -> #homepage #landing h1 a:hover .red-color

> Dreamweaver css designer


- animate.css
- bootstrap popover
-- use under score templates to populate the content
- relative parent and absolute children?

- css2less.co
- CanIUse.com => Browser compatibility

***************************************
- LESS Summary
***************************************

>> Create variables @variable-name : red;
>> Create heirarchy of elements rather than repeating them many times
>> Add comments
>> Import CSS or other Less files @Import "filename.css"
>> Functions
>>> color : darken(@variable-name + 10%) , lighten, saturate, etc
>> Operations
>>> color : @font-size + 12;
>> Mixen -> functions that accepts parameter and is reusable
>>> .my-first-mixin(@size){
border-radius : @size;
}

and use it as:
#form {
broder-radius : my-first-mixin(5px);
}

CSS Positioning
====================
- Default position is Static e.g elements stack on each other in the document
- Position: Relative
-> Sets the position of the element based on its original position.
- Position: Absolute
-> Sets the position of the elements as it does not have any width and height e.g. all the other elements will move up.
-> Absolute positioning is based on document
-> Its relevant to the document, when scrolling it will move up or down
- Position : Fixed
-> Fixed position is based on the browser window. I.e. even with scrolling it will remain there