Diigo Bookmarks 12/18/2017

2017年12月18日 著

• Grid Garden - A game for learning CSS grid

  "Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property."

• What to use Grid Layout for? Some ideas.

  "If you have learned how to use Grid Layout, you might wonder what to use it for. In this post, I will give some use cases where I think Grid will excel."

• Understanding CSS Layout And The Block Formatting Context -- Smashing Magazine

  "This article is about the Block Formatting Context (BFC). You may never have heard of this term, but if you have ever made a layout with CSS, you probably know what it is. Understanding what a BFC is, why it works, and how to create one is useful and can help you to understand how layout works in CSS."

• A recap of front-end development in 2017 - gitconnected

  "Front-end engineering once again evolved at a feverish pace in 2017. Here is a list of the most notable events of the past year."

• Popular CSS Button Hover Effects Explained - Dynamic Drive Blog

  "Many CSS button effects I've seen lately involve animating one or both of the :before and :after pseudo elements to create interesting visuals on hover."

• How to make your HTML responsive by adding a single line of CSS

  "In this article I'll teach you how to use CSS Grid to create a super cool image grid which varies the amount of columns with the width of the screen."