Tag: CSS

Maquetación minimalista con CSS

En 1-Line Layouts se presentan 10 técnicas básicas de maquetado con CSS que ocupan muy poco:

  1. Super Centered place-items: center
  2. The Deconstructed Pancake flex: 0 1 <baseWidth>
  3. Sidebar Says grid-template-columns: minmax(<min>, <max>) …
  4. Pancake Stack grid-template-rows: auto 1fr auto
  5. Classic Holy Grail Layout grid-template: auto 1fr auto / auto 1fr auto
  6. 12-Span Grid grid-template-columns: repeat(12, 1fr)
  7. RAM (Repeat, Auto, Minmax) grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
  8. Line Up justify-content: space-between
  9. Clamping My Style clamp(<min>, <actual>, <max>)
  10. Respect for Aspect aspect-ratio: <width> / <height>

También hay un vídeo:

Cómo alinear las cosas en CSS

Imprescindible el artículo How To Align Things In CSS:

There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.

Los consejos que da son:

To wrap up, I have a quick summary of the basics of alignment. If you remember these few rules, you should be able to align most things with CSS:

  1. Are you aligning text or an inline element? If so, you need to use text-align, vertical-align, and line-height.
  2. Do you have an item or items you want to align in the center of the page or container? If so, make the container a flex container then set align-items: center and justify-content: center.
  3. For Grid Layouts, the properties that start with align- work in the Block direction; those which start with justify- work in the inline direction.
  4. For Flex Layouts, the properties that start with align- work on the Cross Axis; those which start with justify- work on the main axis.
  5. The justify-content and align-content properties distribute extra space. If you have no extra space in your flex or grid container, they will do nothing.
  6. If you think you need justify-self in Flexbox, then using an auto margin will probably give you the pattern you are after.
  7. You can use Grid and Flexbox along with the alignment properties for tiny layout jobs as well as main components — experiment!

Cómo manipular los colores CSS con JavaScript

Un excelente artículo How to manipulate CSS colors with JavaScript:

I know you’re here to learn about manipulating colors — and we’ll get there. But before we do, we need a baseline understanding of how CSS notates colors. CSS uses two different color models: RGB and HSL.

Both the RGB and HSL color models break down a color into various attributes. To convert between the syntaxes, we first need to calculate these attributes.

With the exception of hue, each value we have discussed can be represented as a percentage. Even the RGB values are byte-sized representations of percentages. In the formulas and functions below, these percentages will be represented by decimals between 0 and 1.

I would like to note that I will not cover the math for these in depth; rather, I will briefly go over the original mathematical formula and then convert it into a JavaScript formula.

Recetas de CSS

Muy interesante todo lo que se explica en CSS Layout cookbook de Mozilla Developer Network:

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

Las recetas que ofrece hasta ahora son:

Recipe Description Layout Methods
Media Objects A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. CSS Grid, float fallback, fit-content() sizing
Columns When to choose multi-column layout, flexbox or grid for your columns CSS Grid, Multicol, Flexbox
Center an element How to center an item horizontally and vertically Flexbox, Box Alignment
Sticky footers Creating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split Navigation A navigation pattern where some links are visually separated from the others. Flexbox, margin
Breadcrumb Navigation Creating a list of links to allow the visitor to navigate back up through the page hierarchy. Flexbox
List Group with Badges A list of items with a badge to display a count. Flexbox, Box Alignment