by

Ciro Santilli (@cirosantilli, 36)

Cascading Style Sheets (CSS)

css/code-block.html
css/img-table-vertical-center.html
css/viewport-height.html: a div that is a tall as the viewport, and does not generate a toplevel scrollbar
css/responsive-image-max-height.html: here we try to create an image that is never wider than the screen. If the screen is less wide than the image, then the image scales down proportionally. Otherwise, the image has a user determined fixed by the CSS or the HTML height property. Related:
- stackoverflow.com/questions/13632985/limit-the-height-of-a-responsive-image-with-css
- stackoverflow.com/questions/50193946/responsive-image-with-max-height-max-width/50194061
TODO I'm unable to do this....... stackoverflow.com/questions/69964332/how-to-set-the-default-height-of-responsive-images-when-screen-is-wide-and-have The objective was to implement: github.com/ourbigbook/ourbigbook/issues/168
css/top-navigation.html

Table of contents
- CSS flex Cascading Style Sheets
- Sass (stylesheet language) Cascading Style Sheets

CSS flex

 0  0 

css/flex.html: illustrates basic flex usage, including:
flex-grow: if there's space left, this determines how much extra space will be given to each.
flex-basis: the size the items want to be. But if there isnt' enough space, this can be cut up.
Note that the minimal space required by children of the flex children cannot be necessarily cut up, and might lead things to overflow out of the container.
flex-shrink: if there's space missing, this determines how much extra space will be removed from each flex-basis

Other examples include:

css/flex-fill-vertical.html: minimal setup for a editor: docs.ourbigbook.com/editor

That example calculates and displays the final widths via JavaScript, making it easier to understand the calculations being done.

Answers: stackoverflow.com/questions/28473807/how-does-flex-grow0-get-interpreted/69995712#69995712

Bibliography:

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

Sass (stylesheet language)

 0  0 

The more of their syntax gets merged into mainline Cascading Style Sheets, the better the world will be.

 Ancestors (7)

 Incoming links (2)

 Synonyms (1)

cirosantilli/css

 View article source

 Discussion (0)

+ New discussion

There are no discussions about this article yet.

 Articles by others on the same topic (0)

There are currently no matching articles.

  See all articles in the same topic + Create my own version