Tag Archives: CSS

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