CSS/Layout basics

CSS/styling ideas for developers with little front-end design experience:

• use Bootstrap
• get someone with experience to do the graphical design, then implement it using CSS
• turn a list into a grid of links with JQuery
• Or something more low-tech
• If you want to build something from scratch, the basic principles as I have come to understand them are:
• (1) decide on an element type, e.g.
• <span> for in-line elements (in a horizontal line),
• <div> for a vertical line of elements,
• <ul> for a list, etc.
• (2) fiddle with the CSS attributes like: float, clear, overflow, border, padding to make it look like you want.
• How to use "float"
• (3) use javascript if anything needs to appear/disappear based on user interaction.
• But I usually start with a framework layout like Bootstrap, add pre-made Javascript libraries for widgets and only do the above steps for any little tweaks needed.
• The current state of the art is the "CSS Grid" layout (for 2D grids).
• One opinion is that CSS Grid beats Bootstrap for layout
• Flexbox is the more established and better supported method of layout (for 1D lists)
• Enlightenment and inspiration: CSS Zen Garden
• examples of the same content transformed with CSS to appear totally different
• Mozilla Developer Network (MDN) has a good CSS reference
• CSS tricks has useful guides
• Quirks Mode tells you which browsers support which features.