CSS Essential 3: Grid, Images, Transition, Responsive vs Fluid

This is my CSS Essential 3 class summary note which following of CSS Essential 1 and 2 (Christina Truong’s lecture). Hope you enjoy!

Review: Layouts

Block

• 100% width of container
• Elements are stacked

Inline

• Same width as its content
• Elements sit in a line, side by side

Use the value of inline or block to change the default display behavior of an element

Float property

The float property can also be used to change the default page layout by aligning the elements to the left or right of its container. Floating elements will change the natural page flow and stacking layout.

Even though the paragraph isn’t floated, it still aligns next to the floated box. If the paragraph is longer than the element, the text will flow around the floated box. Floated elements also need to be cleared to return the page back to its default page flow.

CSS Position

• Can be used to arrange components on the page
• Uses one of three values: relative, absolute or fixed
• Must be used with at least one box offset property: top, right, bottom or left.

Position: Sticky

There is also a newer position value of sticky, which displays like a combination of relative and fixed positioning. The element is relatively positioned until the viewport reaches the declared offset value when scrolling the page. Then the element becomes fixed.

CSS Grid

Designing webpages with a grid, can help create a consistent design flow, and symmetrical design layouts. Grids are broken down into equal width, evenly spaced columns, that are used as a guide for laying out various page components. Gutters can also be included to add consistent spacing between columns.

Page components are arranged within the columns, and can span one or more columns. There are different ways to define a grid, but a common layout for webpages is to use a 12 equal-column grid. 12 is easily devisable by two, three, four, and six, making it easier to create responsive designs.

There are also generators such as this online tool, GridCalculator.dk. To make a grid, first define dimensions such as the max width of the entire page design, and the number of columns.

GridCalculator.dk

Flexbox

The flexible box layout, or flexbox for short, includes many options for aligning elements and creating flexible items. When using traditional techniques like float, each item is the same height as its content and required additional hacks to make them equal height columns. So using flex makes it much easier since it automatically sets the height of each flex item to be the same as the largest item without any additional CSS. With flexbox, you can also change the direction of the items without changing the HTML markup.

Retina Displays and Images

Each pixel is basically a small square, which contains its own brightness level and color. Together, the pixels are combined to make a graphic. Pixel density refers to how many pixels are contained within a space, usually measured by pixels per inches, PPI, or sometimes referred to as dots per inch, DPI.

Pixel Density

The more pixels there are within the same area, the smaller the pixels are, which is how text and images appear smoother, clearer, and show more detail.

Raster and vector (+gif, png)

Vector images are composed of many lines and curves, also referred to as paths. Raster images are made up of tiny squares that we’ve become very familiar with. Raster images are comprised of pixels. Raster images are also sometimes referred to as bitmap images.

Vector vs Raster

GIF is an abbreviation for graphical interchange format. The GIF format is popular because of its ability to be animated. GIFs are also raster images, but they are limited to a palette of only 256 colors.

There are two types of PNG formats. PNG-8, which uses the same 256 color palette as GIFs and cannot render transparency. And PNG-24, which can render millions of colors and transparency, making it a better option for supporting images that require transparency over using GIFs.

SVG (Scalable Vector Graphics)

• Supported in all modern browsers
• Ideal for multi-screen designs because vector graphics are a series of paths
• With vector graphics, you can scale up or down without losing quality
• Best suited for two-dimensional shapes, icons, or illustrations
• Uses a .svg extension and can be included in the image tag just like any other image file
• Include it inline to apply CSS and JavaScript

HTML vs. XML

SVGs are based on a language called XML. HTML uses predefined tags such as the <p> tag or an <h1> tag to present the content to the browser.

XML uses custom tags and represents structured information such as data or transactions.

Access code for SVG

Adding SVGs as an image file

Open the SVG file in any editor. In the SVG file itself, we can see the SVG tag, which wraps the entire image. There’s also a path tag, which contains the coordinates of the image. We’ll be looking at how to add this SVG code in-line into our HTML page, so the first thing you need to do is copy this entire block of SVG code. Then we’ll open our HTML file, and paste it.

In-line with your HTML

So far, we’ve been adding our CSS internally in our HTML files, but we can use external CSS style sheets as well. Open up SVG.CSS, and just copy this CSS block over. Save it, delete this, and link to the CSS file.

Retina Display

A 1280 by 800 pixel image will fit for the regular display, but in the Retina display, the image will have to stretch to twice its size to fill the area, which will likely lower the quality of the image. Instead, create an image that is twice the size. In the Retina display, the image now has the same number of dots per inch as the display. In the non-Retina display, use CSS to set the width to 100%, or 1280 pixels, to scale it down to fit the box.

Background Images

For background images, you can use CSS to target Retina screens. Use a media query, but instead of targeting the size of the actual screen, target the screen’s resolution, using the media feature <resolution>.

Most of the time when using media queries we target the width of the viewport to create responsive designs. To target the screen by pixel density use the resolution media feature instead. Similar to targeting by width, use min resolution to set a minimum DPI value.

DPI value

• DPI values varies among screen sizes
• A non-Retina display has approximately 96 dpi
• Retina displays have twice the amount of pixels (192 dpi)

Transition Syntax

Transition is actually shorthand for four different transition properties. When using shorthand, the value should follow the order of how it’s listed in this example. Transition-property first, then transition-duration followed by transition-timing-function, and the transition-delay.

Transition-property

Used to determine which property to apply the transition to. Specify the property name or use the keyword all.

Not all properties can be transitioned. In general to be transitioned some kind of in-between state needs to be calculated. The W3C has a full list of properties that can be transitioned.

Transition-duration

Defines how long the transition will take to complete the change.

Transition-timing-function property

Used to set an acceleration curve by varying the speed over the duration of the transition. This is an optional value. If none is set, the default is ease, which means the transition will start the animation at a faster pace, then eases out gradually. If you set the value to ease in, the acceleration curve will ease in, then maintain full speed to the finish.

Transition-delay property

Used to delay the start of the animation. The value is also set in seconds or milliseconds. It is also an optional value.If it is not declared, there will be no delay at the start of the animation.

Remember order also matters when using shorthand. Remember order also matters when using shorthand. The first number of values sets the transition duration. The last number of values sets the transition delay.

Transition property in CSS

Put the transition property in the CSS declaration where the state changes start.

Transition vs. @keyframes

The transition only allows you to have a start and end point. With @keyframes you can create more complex effects by setting multiple points for your animations.

@keyframes

The Keyframe rule requires three things to be defined.

1. A name for the animation,
2. the breakpoints,
3. and the CSS properties to be animated.

Start with the @keyframes keyword. Then define a animation-name property to apply the animation to a selector followed by a pair of curly braces. Choose a descriptive name that describes the effect or animation that you’re creating. Then set a value for the animation-duration property in seconds or milliseconds. These two properties are required to execute the animation.

Animation Properties

Animations can only be applied to the same property.

Optional Animation Properties

Similar to transitions, the animation timing function and delay can be declared as well to determine the acceleration speed and time delay before the animation starts.

By default, animations run once from beginning to end. To repeat the animation, use the animation-iteration-count property. The value can be set to any whole number to specify how many times the animation should run, or use the keyword infinite to repeat the animation indefinitely.

All of these animation properties can be combined into one line and written in shorthand. Use just animation as the property and separate each value with the space. The order doesn’t matter, unless you use both animation-duration and animation-delay, since they both use the same type of number values. Then the duration value must come first.

CSS shapes property

By default, every HTML element is viewed by the browser as a square or a rectangle. But even if the element appears to be a shape other than a square, the browser still views it as a square. If you wrap text around an element by floating it, it still follows a square or rectangular path. But what if you wanted to wrap text around the actual shape? There are shaped-based CSS properties that can be used to change the float area around an element.

Shape Functions

In short, circle defines a circle, ellipses creates an oval shape, the polygon function is used to create irregular shapes, and inset creates an effect where the floated element is set inwards.

• The circle() function can hold two values, one to specify the radius and the other to specify the position of the circle which actually uses two values itself for the horizontal and vertical position.

Shape Coordinate System

The origin of the coordinate system starts at the top left of the element’s box with the value of zero on the X axis and zero on the Y axis. The X axis goes from left to right and at the end of the X axis, coordinates are 100% on the X and zero on the Y axis. The Y axis moves from top to bottom and at the end of the Y axis, the coordinates are zero on the X axis and 100%on the Y axis.

In this example, the dotted square represents the element’s bounding box area. The circle’s radius is set to 50%, which makes it the same size as the bounding box since the radius is measured from the center of the circle.The origin of the circle’s coordinate system is in the center of the circle represented by the green dot. A position value of zero and 50 means that the circle’s origin is positioned zero from the left of the X axis and 50% from the top of the Y axis.

If you need to create more complex shapes, use the polygon function, the syntax requires you to specify a pair of X and Y coordinates, each pair is separated by a comma. The minimum number of coordinate pairs is three, which will create a triangle. Each coordinate pair defines a point on the X and Y axis, which will connect to the next coordinate pair in the order that it is declared. The last coordinate pair will connect to the first coordinate pair to close the shape.

If you want to create an even more complex shape, just add more pairs of X and Y coordinates for each point of the shape. Reminder, the last point will automatically join the first point to close the shape.

Responsive typography

When designing for different screen sizes, we need to consider not only the actual size of the screens, but also how people interact with their devices.

Responsive design decisions are affected by physical screen size and human interaction

Relative Units: rem, em, and %

• The default body text is equivalent to 16px
• 1 rem = 16 px
• To calculate specific rem values: desired size % default size

To convert rem values to be equivalent to specific pixel values, the calculation is as follows. The desired size is divided by the default size.

20/16 = 1.25rem (equivalent to 20px)
12/16 = 0.75rem (equivalent to 12px)

REM units are relative to one element, the root element (HTML)

This means that we can change the font size of all the elements at the same time by changing one value.

First, declare a base font size in the HTML selector. You can use any length unit to set the base font size. Remember, by default, the body text is equivalent to 16 pixels. Whether I set the base value using pixels, percentages or rems, all the descendant elements will size itself relative to the value declared in the HTML declaration block.

EM and % units are relative to the closet ancestor element

Fluid typography

Viewport units

There is a way to create fluid typography using viewport units. There are four viewport units. Vw represents the viewport width. Vh represents the viewport height. Vmin is the smaller value of the viewport’s width or height and vmax is the larger value of the viewport width or height.

• Viewport: size of the browser window
• Viewport units: % of the viewport dimensions
• 1vmin: 1vw or 1vh, which is smaller
• 1vmax: 1vw or 1vh, which is larger

We can add the font size to the body element and all the elements will inherit this style. Notice that with vw, it only affects the width of the viewport, but if I change the height, the font size stays the same. Changing the height will change the font size. If we set the root element to a fluid unit, all the relative units will now be fluid too.

So now, all of your relative rem units will be relative to a fluid unit so this means, I won’t need to use the media query declaration anymore. The font size will now scale up or down based on the size of the viewport rather than specific breakpoints. I can still use media queries for a specific overrides.

Advanced attribute selectors

• Class and id attributes each have their own syntax
• Any attribute can be used as a CSS selector
• All other attributes follow the same syntax

[attribute*= “string”]

• Match the attribute and string anywhere within the value
• Add the asterisk(*) before the equals sign

[attribute^= “string”]

• Match the attribute and value beginning within the specified string
• Add the caret symbol(^) before the equals sign

[attribute$= “string”]

• Match the attribute and value ending with the specified string
• Add the dollar symbol($) before the equals sign

Accessibility and ARIA

When writing HTML, we can help screen readers and other assistive technologies by following the ARIA guidelines. ARIA stands for Accessible Rich Internet Applications and provides specifications for making websites more accessible.

ARIA breaks down into three categories:roles, properties, and states.

1. Roles define the purpose of the element. It’s especially useful for elements that aren’t defined by semantic tags like header or footer.
2. Properties describe the characteristics of the element. For example, is it draggable? What are the requirements?
3. And states describe the interaction, such as whether a checkbox is checked or a button is disabled.

Let’s look at how the role attribute works. First, define your HTML with semantic tags when possible. Use divs when there are no other appropriate tags.

Then add additional information for assistive technologies. Assign an appropriate ARIA role to the elements. An example is the banner role, which is defined by ARIA as content that typically includes the logo and usually appears at the top of the page and spans the full width. The main tag already defines the element as the main content of the page, but you can additionally add a role of main as well, which has the same meaning.

CSS style guide

Style guides aren’t just for design. Whether your working independently or with a team, having guidelines for writing html and CSS can help make it easier to write and maintain.

Use class selectors only to simplify and organize your CSS

• Classes have more flexibility than IDs.
• Separate style from function.
• Using classes only can also help reduce specificity rules.

Naming Conventions

1. Be descriptive
2. Use functional names
3. Establish naming conventions for organization
4. Use lowercase letters only
5. Avoid spaces and formatting white spaces

This is end of <CSS Essential Training 3> and final note for <CSS Essential> series. Hope this articles useful! ✋✋✋