CSS Positioning
Things learned today:
- Word of the day: Sprezzatura - A certain nonchalance, so as to conceal all art and make whatever one does or says appear to be without effort and almost without any thought about it.
- Some tips on CSS positioning from Youtube.
- By default, elements will have
position: static
and all directions set to auto. You can check on this by looking at the Computed tab of dev tools. - Relatively positioned elements will create a gap by default, as the flow of statically positioned elements will not move.
- An absolutely positioned element will be relative to the next parent element that is not static.
- Setting both the left and right directional properties stretches the element across the screen.
- Fixed positioning is good for headers or shopping carts since it will always remain on screen.
- Floating elements (left usually) is important for responsive design, and typically requires a clear either by adding
clear:both
to a final div or via this clearfix hack on the container. - There are a few ways to center elements with CSS.
text-align: center
on container anddisplay: inline-block
on elementmargin: auto
on elementleft: 50%
andmargin-left: -X px
on element- With flexbox,
justify-content: center
- According to DevTips, SASS > SCSS and LESS. It is less verbose, but requires learning new syntax. This opinion is contested.
- Jade is a templating language for HTML, and can help make markup a lot easier to read and write.
- No more carets needed, and divs can be replaced with just the class or id.
- By default, elements will have