css properties - freeCodeCamp.org

CSS Properties – Max-width, Min-width, Max-height, and Min-height Explained with Examples

freeCodeCamp — Tue, 20 Jul 2021 17:09:20 +0000

By Nelson Michael

If you're building a website, making it responsive is one of the most important things you'll do.

It can be difficult to create websites that look good across a variety of screen sizes. You'll have to handle rendering an element's width or height, and specifying varied width sizes using media queries is not easy.

While relative units such as "percentage percent" can be useful in some contexts, they can also be disastrous in others.

But don't worry – characteristics like max-width and min-width are here to help. These properties allow us to avoid using media queries to solve some responsive challenges.

By the end of this article, you'll know what max-width, min-width, and max-height are and how to use them.

The Max-width Property

The max-width property lets you specify an element's maximum width. This means that an element can increase in width until it reaches a specific absolute or relative unit, at which point it should fix its width to that unit.

Here's what I'm talking about:

Imagine setting the width of an element to 80% of the viewport's width. If the viewport has a width of 375px, our element will have a width of 300px, which isn't too shabby.

(80/100) * 375 = 300px

But what if we had a wider viewport, say 1300px, in which case our element will be 1040px wide.

(80/100) * 1300 = 1040px

This is where the max-width property comes in handy. When you're using relative units like a percentage, setting a max-width property on an element causes it to keep increasing in width until it reaches a point we designate.

Here's an example:

Notice how our card's size never exceeded 350px? That's how max-width works. It allows our card to grow on smaller screens.

If the width is less than 350px, it takes 80% of whatever the current screen size is. But as soon as the width reaches 350px, it clamps down and doesn’t exceed that set width.

Here’s what the code looks like:

//The card can not get larger than 350px.

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

The Min-Width Property

In contrast to the max-width property, the min-width property specifies the minimum width. It indicates the minimal possible width for an element.

In some cases, you may want your element to have flexible width, so you give it a width in a relative unit such as a percentage. But as the screen shrinks, the element's width shrinks as well.

This is where min-width comes in – you can set a minimum width so that the card knows not to shrink smaller than the specified width.

//Here the card element can not get smaller than 250px
.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  //here we set the min-width property
  min-width : 250px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

The Max-Height Property

The max-height property operates similarly to the max-width property, but it affects the height instead of the width.

Here's an example :

// it fixes the height of an element to a specified unit, effectively stopping it from increasing in height

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:70%;
  //here we set the max-height for the card.
  max-height: 400px;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}

The Min-Height Property

In contrast to max-height, the min-height property provides a minimum height for an element.

This occurs when the viewport shrinks and the element's height cannot be reduced beyond a defined height unit.

.element{
    height:40vh;
    min-height:200px;
}

Conclusion

Responsiveness is an important factor to consider in web development. Keeping track of how things appear across multiple screen sizes may be challenging, but the max-width, min-width and max-height, and min-height properties help tackle these challenges.

These properties let you adjust the size of elements without needing to use media queries.

What is Website Theming? How to Use CSS Custom Properties and Gatsby.js to Customize Your Site

Spruce Emmanuel — Thu, 01 Jul 2021 18:19:21 +0000

In this article, I'm going to show you how to theme your website so users can customize certain elements to their tastes.

We'll talk about website themes, how theming works, and we'll end with a demo so you can see it in action. Let's dive in.

What is a Website Theme?
What is theming?
Why Should You Care About Theming?
“It’s their screen, machine and software”
Theming increases readability
All the cool cats are using it - theming in the wild
How to Use Theme Properties
What are theme properties?
What are CSS custom properties?
How to set up theme properties in Gatsby.js
How to store the theme properties
How to transform theme properties to CSS custom properties
How to Use the Theme Switcher Component
The markup
How to set up the state
How to update the state
How to persist state to LocalStorage
Conclusion

Who is this article for?

This article is aimed at developers who already have a basic knowledge of CSS, React, and Gatsby who want to learn how to create a user theme-able Gatsby or React app.

By the end of this article, you should understand how theming works and how to implement theming on your Gatsby sites.

What is a theme?

In order to understand what website theming is, let's first look at what a website theme is and what make up a theme.

A theme in the context of a website is the overall look, feel, and style of your website. A theme may include:

fonts
font size
color schemes
layouts
aesthetics

A theme controls the design of your website. It determines what your website looks like from the surface, and it is the part of your website that has a direct impact on your users.

A theme is also a set of styles worn by a website.

What is Theming?

Theming is to a website what clothes are to our bodies. Imagine wearing the same clothes to a meeting, a wedding, and a farm - sounds funny right? Of course you probably wouldn't do that if you had the choice.

For each occasion you would wear the appropriate type or style of dress. That’s what website theming is – it allows our users to choose the look and feel of our website with a set of styles based on different occasions.

Theming is simply giving users the ability to make customizations to our websites and apps. You can also think about theming as a set of customizations users can make to our websites or applications based on their choices.

Theming happens when the user is able to tell your website what they prefer to see, for example:

Clicking a button to change the background of a website to red or black
Increasing or decreasing the font size of a site website/application
Clicking a button to remove content not relevant to the user.

Here’s a tip: letting or asking your users to determine your website theme from scratch is a bad idea. You or your team should provide users with an accessible and usable default theme, since in most cases many users will never customize “their view” on your website no matter how easy it is. |

Why should you care about website theming?

Apart from letting users know you care about their personal preferences, there are other reasons to let your users theme your website. Some of them include:

“It’s their Screen, Machine and Software”

This is a quote from Jakob Nielsen's 2002 article: Let users control font size.

The fact that your website is running on the user’s screen, machine, and software (and probably draining their batteries too) is enough reason them to be able to customize their experience on your site.

Theming improves website readability

Quoting D. Bnonn from the article: 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake

Fact: Most Web Users Hate The “Normal” Font Size.

With this fact in mind, theming can help readers out by allowing them to choose the font size that suites their eyes best.

Oh and here is another quote from the same article.

Readership = Revenue.

All the cool cats are using it – theming in the wild

A lot of developers have used the idea of theming to create dark mode versions of their websites. Other’s have taken this idea further to allow users change font-size, colors, and background based on individual preferences.

Here's an example of this kind of customization in the Twitter web app:

Twitter customize theme UI

Still not feeling motivated yet? If you still need more proof that theming is a good idea, here’s a whole list of websites, apps, and software that use theming to provide dark and light modes for their users.

How to Use Theme Properties

Now that you know what theming is and have seen sites that use this idea of theming in their websites and applications, let’s learn what theme properties are.

What are theme properties?

Theme properties are a set of CSS custom properties that make up a theme. Remember that “a theme is a set of styles worn by a website” – so theme properties are all the properties that make up the styles a site wears. For example:

[data-theme="default"] {
  --font-size: 20px;
  --background: red;
}

In the example above, [data-theme="default"] is our theme, while all the CSS custom properties inside are the theme properties. You get the idea, right?

Here’s a tip: your theme properties don’t have to be just CSS custom properties. They can also be any valid CSS properties that you want to apply to a specific theme.

Before we move forward, let’s first understand what CSS custom properties are

What are CSS Custom Properties (also known as CSS variables)?

CSS custom properties are entities which hold values that you can reuse throughout an entire site or document.

For the sake of this tutorial we are not going to cover CSS custom properties in depth. You can read more about custom properties here.

Also there are a lot of great tutorials out there that cover CSS custom properties and how to use them for theming, so we’ll leave the theory to those other articles.

For a strategic guide on how to use CSS custom properties for theming check out this awesome article: A Strategy Guide To CSS Custom Properties.

Although we are not covering CSS custom properties in depth, I want to point out a few reasons why CSS custom properties are ideal for website theming:

They are reusable – you can use them throughout your CSS
They reduce the complexity of our code, since you no longer need to create different stylesheet to achieve a theme-able website
They are available at runtime, which means you can update their value in the browser, via JavaScript, with immediate results.

How to Set Up Theme Properties in Gatsby.js

Of course you can hard code theme properties directly inside your CSS file like any other CSS properties. But having to scroll up a few lines of your CSS code anytime you want to make a few changes to your themes sounds tedious, right?

Max Böck in his article “Color Theme Switcher” advises defining our themes in a central location.

Having a central location (file) where you can easily access and manage your themes sounds like an interesting idea. And this is the kind of thing Gatsby was made for.

Quoting the Gatsby docs:

“A core feature of Gatsby.js is it’s ability to load data from anywhere.”

This means you can source data from a JSON file which will be available at build time. When you import this data you can then iterate over it with the Array.map method and render it in a React component.

How to Store Theme Properties

In your Gatsby project folder, create a directory called content if it doesn't already exists. Then add a new file called themes.json with the following content:

[
  {
    "id": "default",
    "colors": {
      "primary-color": "#0250bb",
      "text": "#20123a",
      "text-alt": "#42425a",
      "border": "#ededf0",
      "background": "#ffffff",
      "background-alt": "#f9f9fa",
      "color-scheme": "light"
    }
  },
  {
    "id": "dark",
    "colors": {
      "primary-color": "#7f5af0",
      "text": "#fffffe",
      "text-alt": "#94a1b2",
      "border": "#010101",
      "background": "#16161a",
      "background-alt": "#242629",
      "color-scheme": "dark"
    }
  },
  {
    "id": "warm",
    "colors": {
      "primary-color": "#ff8e3c",
      "text": "#0d0d0d",
      "text-alt": "#2a2a2a",
      "background": "#eff0f3",
      "background-alt": "#fff",
      "border": "rgba(0,0,0,.1)",
      "color-scheme": "light"
    }
  },
// Add other themes here
]

Each theme gets an id, a set of theme properties, and a CSS color-scheme property.

Here’s a tip – we use the CSS color-scheme property to tell which color scheme (light/dark) our webpage should be rendered in. For a better understanding of color-scheme please refer to this color scheme guide.

How to Transform Theme Properties to CSS Custom Properties

Right now, the color themes stored in our content/themes.json files are just raw data. They need to be transformed into CSS custom properties before they can actually do anything meaningful.

Data is a collection of facts, such as numbers, words, measurements, observations or just descriptions of things.

We are going to need our CSS custom properties to be dynamically generated and added as an inline