×

- Home
- Interior Pages
  - Using Images
  - Creating Columns
  - Modern Design
- Other Templates
  - Multi Page/Multi
    - Flexbox #501
    - Flexbox #502
    - Flexbox #503
    - Flexbox #504
    - Flexbox #505
    - Flexbox #506
- Download It

# Modern Design

I'll admit, the title may be a little deceiving but our purpose here is to move beginners in the right direction in web development and maybe even get them ahead of the game.

We'll touch on three areas that will move you ahead of a lot of the competition.

## Pixels Should Be Dead to You

Modern design requires that you move from using pixels to define font-size, line-height, margins, padding, width and height measurements to ems or rems and dynamic viewport width and height percentages.

Converting pixels to rems is actually quite simple. Just divide the pixel value by the default em size which is 16px.

## Examples

- 4px/16 = .25rem
- 8px/16 = .5rem
- 12px/16 = .75rem
- 16px/16 = 1rem
- 18px/16 = 1.125rem
- 24px/16 = 1.25rem
- 22px/16 = 1.375rem
- 30px/16 = 1.875rem
- 32px/16 = 2rem
- 36px/16 = 2.25rem
- 48px/16 = 3rem
- 50px/16 = 3.125rem

## Dynamic Viewport

dvw is the width of the viewport of the device accessing the web page.

dvh is the height of the viewport of the device.

100dvw is 100% of viewport width.

1dvw is 1% of viewport width.

.5dvw is viewport width X .005

## Out With the OLD

- OLD: font-size : 20px
- NEW: font-size : 1.25rem
- OLD: line-height : 22px
- NEW: line-height : 1.375rem
- OLD: h1 {font-size: 30px
- NEW: h1 {font-size: 1.875rem
- OLD: margin: 1% 5%
- NEW: margin: 1dvw 5dvw*

*margin:1% isn't the same as margin: 1dvw but if used consistently it serves the purpose

## Eliminate Needless Media Queries

This mini site use 2 media queries and those could actually be combined into one.

We eliminated the need for resizing fonts and adjusting margins and padding with media queries by using the Clamp Function.

Using the clamp function we can define 3 sizes for our text elements at the top of the style sheet and eliminate the need to resize them at set break points with media queries.

    The code:
    clamp(minimum , preferred , maximum)

We set a minimum size, a preferred size and a maximum size. The preferred value must fall somewhere between the minimum and maximum to work properly. The browser will use the preferred value when that condition is met.

IMPORTANT!! Spacing is important in your preferred algorithm

    p {
    font-size : clamp(1.125rem , 1.125rem + .25dvw , 1.375rem);
    }

Translates to: clamp(18px , 18px + .0025 X viewport width , 22px)

dvw stands for dynamic viewport width. use it in place of vw. It's just more reliable.

For example, translating, 1dvw says take 1% (.01) of the viewport width .

Our minimum is set to 18 pixels and maximum to 22 pixels.

Using the formula 18px + .0025 X viewport width we calculate the font size at different viewing widths.

We start at mobile viewing width and work our way upward in viewport width.

- @320 viewing 18.80px in range
- @360 viewing 18.90px in range
- @428 viewing 19.05px in range
- @640 viewing 19.60px in range
- @768 viewing 19.92px in range
- @940 viewing 20.35px in range
- @1024 viewing 20.56px in range
- @1180 viewing 20.95px in range
- @1280 viewing 21.20px in range
- @1366 viewing 21.41px in range
- @1920 viewing 22.80px browser will use max

NOTE: You can check these values using Dev Tools to see if your preferred algorithm is working properly for font-size, line-height, margins and padding.( PRESS: CTRL-SHIFT-c ) Then hover the page element you want to test.

It might sound like it's all GREEK at this point, but I stress the need for learning to use the clamp function if you're serious about your web development endeavors.

## No More Image Swapping

With the addition of new image file formats that are a fraction of the size of of pngs and jpgs the need for swapping smaller images for faster loading times is no longer necessary. See: Using Images

Top