CSS Layout

What is this?

My notes of reading http://learnlayout.com/ and related articles on http://css-tricks.com

The display property

• The display property specifies the type of rendering box used for an element. In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none.
• different element types have different default display value
• The most common is block or inline
• https://developer.mozilla.org/en-US/docs/Web/CSS/display

block

• vertically-based
• e.g. div, p

inline

• horizontally-based
• e.g. span

none

• display: none; renders the page as if the element does not exist
• visibility: hidden; hides the element, but the element still take up space

Setting the width

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. If the browser window is narrower than the width of your element, the browser creates a horizontal scrollbar.

margin: auto;

To horizontally center the element within its container, set the left and right margins to "auto" i.e. margin: 0 auto;

margin Syntax

margin: style                  /* One-value syntax   */  E.g. margin: 1em; 
margin: vertical horizontal    /* Two-value syntax   */  E.g. margin: 5% auto; 
margin: top horizontal bottom  /* Three-value syntax */  E.g. margin: 1em auto 2em; 
margin: top right bottom left  /* Four-value syntax  */  E.g. margin: 2px 1em 0 auto; 

margin: inherit

using max-width

Improve the browser's handling of small windows.

border-box

When box-sizing is set to border-box will make padding and border no longer increase the width.

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

position

'positioned' elements is an element whose position is not static(the default), e.g. position: absolute, relative, fixed

static

• the default
• static to the flow
• Not ‘positioned’, meaning cannot be used as a parent frame for absolute

absolute

• absolute x, y in the ‘closest’ ‘positioned’ frame
• If an absolutely-positioned element has no positioned ancestors, it uses the document body

relative

• exactly like static (unless you add some extra properties), the only difference is, it is considered ‘positioned'

fixed

• always relative to the browser window (the viewport)

position example

float

The display property controls the flow (of the document). float means removing the element from the normal flow.

Float is for wrapping text around images

img {
  float: right;
  margin: 0 0 1em 1em;
}

• use clear to clear the elements that follows the floating element. clear left/right/both

When the image (floating) is taller than the container div, it will overflow outside of its container. To fix it (called the clearfix hack) add

.clearfix {
  overflow: auto;
}

more about clearfix: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

float layout example

media query

example

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

inline-block

inline-block is like inline but has a width and height.

• A use case of inline-block is replacing float elements so the followed element that used to need clear no longer needs it. (example)
• inline-block elements are affected by the vertical-align property, which you probably want to set to top
• need to set the width of each column
• There will be a gap between the columns if there is any whitespace between them in the HTML

An example of using inline-block for layout.

• There is a newer Grid layout aiming at fixing issue with float and inline-block.

• Use inline-block when positioning elements

multi-column text

For example,

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

flexbox

• The spec of it has changed a log recently, so it's implemented differently in different browsers.
• examples
• Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
• flex is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. It is recommended that you use this shorthand property

vertical align (icon and text)

.my-text {
   display: inline-block;
   vertical-align: middle;
   transform: translateY(.15em);
}

http://snook.ca/archives/html_and_css/icons-and-type

Other notes

• Padding on the in side of the border
• margin on the out side of the border
• input[type=text] to select text input

Reference

http://learnlayout.com/

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

http://bocoup.com/weblog/dive-into-flexbox/