Learning CSS Series

Part -8 Javascript CSS and Responsiveness

Welcome back to the Learning CSS series. Last time we discovered how we can do a crucial thing in CSS, Sizing!

This time we deep dive into enhancing CSS functionality and making sure we can do some cool stuff for responsiveness!

So let us begin!

JavaScript and CSS

The topics we will cover here are:

Manipulating Styles via JS
Adding and Removing CSS classes with JS

We use javascript to modify the elements/code on the page after the page has been loaded.

To use javascript we use the <script> tag which ideally should be applied at the end of the body tag so that it is ensured that the entire html source code has been parsed.

To access css elements, this becomes a 2 part process:

Access the HTML dom.
Select the css elements to modify.

DOM stands for Document object model and is kind of a virtual representation of our html page.

We can select elements by class, id, attribute etc.

The quickest way of selecting the elements would be through the querySelector function in JS.

E.g.

var backdrop=document.querySelector(‘.backdrop’)

console.log(backdrop)

The above example shows selecting a class .backdrop from the dom.

We then log this out which will show the selected element.

The querySelector will however give the first element only which we can then style using the JS code.

We can further add more functionality by adding something like an EventListener to the selected element.

E.g.

selectPlanButton.forEach(i=>{

i.addEventListener(‘click’,()=>{

modal.style.display=‘block’;

backdrop.style.display=‘block’

})

In the previous mentioned example, we add an event listener of “click”, for all the elements in the button array and then we are changing the styles of backdrop and modals here.

Two such js elements are classList and className.

className helps us to overwrite the current classes of an element to a class we add ourselves, while classList gives us methods to add or remove classes based on which method is being used.

E.g

modal.classList.add(‘open’);

Summary

Responsiveness

In this topic we will be dealing with the following topics pertaining to responsiveness:
1) Hardware and Software Pixels.

2) The “viewport” <meta> Tag in HTML.

3) Media Queries with @media.

Hardware and Software Pixels

There is a popular expression in the CS world and its that “a pixel is not a pixel”.

Hardware pixels –

In earlier days when high density pixel displays were not a thing, software and hardware pixels were the same thing.

A hardware pixel is an individual dot of light in the display. It is a physical pixel that corresponds to the screen’s configuration and how the hardware was made.

Software Pixels or CSS pixels-

Unlike hardware pixels, CSS or software pixels are a measurement unit similar to inch, cm or mm.
They help create a uniform way measuring the pixels required to render elements on a screen.
Software pixels became a necessity to ensure a uniform design pattern appears across different devices and screens.

In modern web design, we have a term called the device pixel ratio. This governs how many hardware pixels correspond to software pixels on the screen.

A software pixel is designed to be roughly equivalent across different screens no matter the physical hardware pixel density.

Viewport and Media queries for responsiveness.

Let us try to understand how different viewport or media queries are:

When adjusting responsiveness through viewport, we get the feasibility to adjust the styling according to the device’s own viewport.
The styling with CSS remains the same, there are no design changes with viewport.
The Media Queries however have a different function. They help in adjusting our styling per the limits set on the screen size.
The design changes under media queries are custom and reflect based on the current size of the screen.
Media queries usually dynamically cover the styling for different CSS elements according to how the width

Viewport Meta tag

The viewport is the user’s visible area of a web page. It varies with the device, that is it will be smaller on a mobile phone than on a computer screen..

In CSS we use the Viewport Meta tag to determine how the browser will handle a page’s dimension and scaling.

Following is the viewport meta tag:

Here the width=device-width part will set the width of the page to follow the screen-width of the device.

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Media Queries

Media queries can be thought of as a rule that creates a block of CSS properties which are included based on some conditions.

Media queries can be thought of as just simple if statements which are executed if a condition is met or true.

Media queries should also only help in designing a mobile first design. That is they must not be used to tweak the changes in Desktop.

We can also have more than one media query at the same time.

Following is how we can design a media query:

@media(min-width:40rem) {
#product-overview h1{
font-size: 3rem;
}

#product-overview{
height:55vh;
background-position:left 50% bottom 83% ;
}
}

Media queries can sometimes be a bit more complex than the standard set that we just defined above.

We can customize media queries based on some logical operators. These logical operators can be something like “and”, “or” etc. that help us configure media queries based on complex operations.

Such media queries are called complex media queries.

@media(min-width:40rem) and (orientation: portrait) {
#product-overview h1{
font-size: 3rem;
}
}

In the above example the orientation is an additional complex query that helps to apply more complex styling based on the screen size we specify.

Summary

Here is the summary to CSS responsive design.

So we now know about responsiveness and how to style elements in conjunction with JS! In the next blog of the “Learning CSS” series, we will be ending our Advanced section of the series by learning about two major components in CSS!
These are styling forms in CSS and Working with the fonts!

Soon after I plan on beginning a series with much more hardcore CSS content on some expert level topics such as GRID and Flexbox!

If you wish to read this whole info in a form of an easy to read book, do checkout the book “CSS Bullets, a comprehensive guide to all the CSS you need!”.

Thanks for sticking around!

Hope you like this series and stay tuned for more content on the learning.

The CodeWolf