Month: May 2017

The benefits of learning how to code layouts with CSS

  1. Why did designers start using frameworks like Bootstrap for layout? – Designers started using frameworks like Bootstrap Because, as web developers kept using HTML for styling they over used it, and turned to CSS to separate style from content.
  2. What does the author think is wrong with that? – Jen Simmons says that, developers have gotten bored of how Bootstrap, and other frameworks, made every site look almost exactly the same.

The skills that are demonstrated in Rachel Andrew’s video lessons.

  1. Define a grid – This video shows how you can make a grid layout with CSS. Also unlike felxbox, the grid only takes up as much space as it needs. Flexbox would expand two columns to make up for a lost one while grid does not.
  2. The fr unit – fr unit stands for Fraction Unit, and allows for grids to be responsive.
  3. Repeat Notion – The Repeat Notation allows you to keep your code dry and convenient.
  4. minmax – minmax is a notation that sets the minimum and maximum width of an element.
  5. grid auto-placement and order – It only makes a visual order change, whereas it stays in the original logical order.
  6. auto-fill and auto-fit – auto-fill automatically fills in the rows with as many tracks as possible even if it does not have anymore. auto-fit does basically the same except it does not add extra space and fits the view-port.
  7. Auto-placement and packing modes – Auto-placement automatically places elements where they can fit, and can cause random holes in the grid, to fix this we use packing modes to instantly find the easiest to place thing and put in any spot. Also, 1/-1 means left edge to right edge.
  8. Line-Based positioning – allows you to make a definite grid and you can leave white-space if you want to.
  9. Named Lines – The names allow you to adjust your grid easier when you make a media break-point.
  10. Aligning and justifying grid items – Justify allows you to define items to their starting or ending point.If you use align and justify center, it will be directly in the center of each component.
  11. Aligning and Justifying the grid – When you use align or justify content, you are basically using flex-box, except you have more control over what or where you want.
  12. Grid Template Areas – allows you to layout your grid how like, with start/end points and by using names of your elements in the order you want. A very straight forward way of working.
  13. Magic Lines and Magic Areas – You can use the grid template areas to overlay items/text and easily maneuver the grid.
  14. Nested Grids – Allows to make a grid item a grid itself, just like a flex container can become a flex item, using flexbox.
  15. Subgrid and display: contents – Display contents removes boxes applied to the item being effected.
  16. Stacking and z-index – allows you to overlap items in the grid, which can make it more visually pleasing and make more interesting layouts
  17. Anonymous Items – acts as if something around words, is a grid item.
  18. Absolute positioning and grid items – Absolute positioned items are taken out of the grid, however the grid itself can become an absolute positioning tool.
  19. The grid-template Shorthand – Allows you to keep your code dry by only having to change a rule in one element and makes it easier to do so.
  20. Feature Queries and Grid – allows you to change how your layout works depending on if the browser supports grids or not.

The two patterns on Grid by Example site that I would like to use in my redesign of the Discography page are: Thumbnails with section titles and Responsive listing with thumbnails.

 

Thumbnails with section titles – This one is probably my favorite, because of the clean design, and responsiveness. It also would go really well with my Discography page.

 

Responsive listing with thumbnails – This one is better for when one of the things in your grid is supposed to be more prominent.