Flexbox notes

Flexbox is very powerful, yet still not popular enough.

Look at this

flex
This 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.

Guess what does this mean?
– flex: 1 auto;

How about this
– flex: 2 0px;

The first one means

flex-grow:1;
flex-shrink: 1;
flex-basis:auto;

The second one means

flex-grow:2;
flex-shrink: 1;
flex-basis:0px;

Is auto the same as 0px? No.

StackOverflow says “flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.”

But why would a box’s final size depends on its starting size though? I thought that was the whole point of having flex-grow… Need to meditate on this one…

Maybe because of this ‘flex-basis establishes the base width of the element prior to redistributing remaining space along the (main?) axis, either by justify-content or flex-grow/shrink values’. (also from StackOverflow)

Standard

Center a div in the page

Not a CSS guru, but flexbox make it really easy

Method 1:

container use display:flex, and item use margin:auto

Method 2:

container use display:flex, justify-content:center, align-items:center. Here justify-content positions items in the main-axis of the flex(default in the row direction), and align-items positions items in the axis that is orthogonal to the main-axis

Standard

Style placeholder

I have learned so many useless tricks about CSS, like this one.

You have to use different rules to style placeholder, otherwise, they will be ignored. Also reported by treehouse.

A stylus example to hide the placeholder when the learner class exists

  .learner
    &::-webkit-input-placeholder
      color white
    &:-moz-placeholder
      color white
    &::-moz-placeholder
      color white
    &:-ms-input-placeholder
      color white
Standard

No vertical align with display:table-cell

I got everything to work in most browsers, but not always in IE11. Apparently, IE 11 ignores width/height inside display:table-cell.

The solution that almost worked, see CodePen. It works in Chrome (left), IE10(middle), but NOT in IE11(right)

Screen Shot 2014-05-12 at 4.56.22 PM

<div class="container">
 <div class="cell">
 <img src="http://i.imgur.com/kpRaL9K.jpg"/>
 </div>
</div>

.container {
width:100px;
height:100px;
display: table;
table-layout: fixed; /*crucial for IE*/
border: 1px solid black;
}
.cell {
display: table-cell;
height:100px;
vertical-align: middle;
text-align:center;
}

img {
max-width: 100%;
max-height: 100%;
margin: auto;
}

Standard

From scss to stylus

Trying to consolidate my css preprocessor to one system – stylus.js

Surprisingly easy to convert from scss to stylus because:

– Stylus supports native css syntax

– Nib provides a lot of mixins

– More mixins can be added easily

 

Some notes:

– To compile scss, I used to do:

 


sass --compass --watch css/gadget.scss:gadget.css

– To compile stylus, I do:


stylus -u nib -w css/gadget.styl -o .

– It takes me about half a hour to figure out the right syntax for output to current folder is “-o .”!!!

Standard

N ways to clear both

One common problem is that when children divs are floated inside a parent div, the parent div is not aware of the height of children divs.

The code to begin with:


<div class="parent">
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="child">c1</div>
</div>

.parent {
  border: 1px solid black;
}
.child {
  float: left;
}

Solution one – change the css of the parent to

.parent {
  border: 1px solid black;
  overflow: auto;
  width: 100%;
}

Solution two – add an extra div, and apply clear:both

<div class="parent">
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="clearfix"></div>
</div>
.parent {
  border: 1px solid black;
}
.child {
  float: left;
}
.clearfix {
  clear: both;
}
Standard

Functional CSS

Come across a blog post talking about functional CSS. It cleared a lot of confusion I had with CSS conventions.

– Namespace your classess with string prefixes, faking scope and minimizing surprises
– Use composition instead of overriding rules
– Try avoid enforcing DOM structure

Standard

N ways to vertically center elements

First way with line-height (not sure about cross-browser)

HTML:

<div id="header"><div class="center">header</div></div>

CSS:

#header {
  height: 100px;
  background: gray;
  text-align: center;
  line-height: 100px;
}

Second way, negative margins

#header {
  background: gray;
  position: relative;
  height: 100px;
  text-align: center;
}

.center {
  background: pink;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
}

Third way, display:table with display:table-cell.

#header {
  display: table;
  height: 100px;
}

.center {
  display: table-cell;
  vertical-align: middle;
}

Third way to align both vertically and horizontally.

#header {
  display: table;
  height: 100px;
  width: 100%;
}

.center {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}

Further read: http://www.vanseodesign.com/css/vertical-centering/

Standard

N ways to make a two-column layout

Our html content:

<div id="sidebar">sidebar</div>
<div id="content">
This is the beginning of content div.

 <img class="cat-img" alt="" src="http://eofdreams.com/data_images/dreams/cat/cat-08.jpg" />

This is a very large page of content.

I mean. Really.

Really really large.</div>

First way (not sure about cross-browser):

#sidebar {
background: pink;
float: left;
}

#content {
background: yellow;
overflow: hidden;
}

First way, complete version. Note both html and body needs to have height:100%

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#sidebar {
  background: pink;
  float: left;
  height: 100%;
}

#content {
  background: yellow;
  overflow: hidden;
  height: 100%;
}

Second way, use display:table, and display:table-cell. Bonus point: now you can use vertical-align:middle to vertical-align text in #sidebar.
Note:

  • Vertical-align on a display:table-cell means where to display INNER content relative to the height of the table-cell.
  • Vertical-align on a display:inline-block means where to display NEIGHBOURS relative to the height of the inline-block.
body {
  display: table;
  margin: 0;
}

#sidebar {
  display: table-cell;
  background: yellow;
}

#content {
  display: table-cell;
  background: gray;
}

Third way, use flex. Only available in modern browsers. But allow each children to distribute according to flex-ratios
. Check compatibility with http://caniuse.com/


#page {
 display: -webkit-flex;
 -webkit-flex-direction: row;
}

#sidebar {
 background: pink;
 -webkit-flex: 1;
}

#content {
 background: gray;
 -webkit-flex: 2;
}

Add this awesome reference: http://www.boutell.com/newfaq/creating/threecolumnlayout.html

Standard