HTML and CSS Notes

Posted by monikma, 01 June 2020.

Programming HTML CSS SCSS JavaScript

Table of contents

• Missed HTML and CSS Stuff
  • CSS Flexbox
  • CSS Grid
    • Advanced Grid features
  • CSS Tricks
  • SCSS
• Responsive Design

Missed HTML and CSS Stuff

Being a rather backend developer, and only having to do with HTML and CSS ocassionally, it turns out I have missed some important stuff there.

rel=noopener

I knew the target=none attribute for links. Turns out that there is another important one, the rel=noopener attribute. It should be added to all links to external websites. Why? See this.

CSS relative distance units

I have heard of % and em units, but it turns out that there is more!

• % - percentage of something, such as screen width
• em - equivalent to the current font size - if 12px font, 2em would be 24px
• vw - units of viewport width (essentially the browser’s rendering space). Each unit is 1/100th of width
• vh - the same as above but for viewport height

Best Practices: what to put in HTML and what in CSS?

The meaning should be conveyed by HTML and presentation by CSS. Therefore, for example, rather than use text-decoration: deleted; style on an ordinary p element, use ins or del tag.

CSS: Fonts

It is a good idea to use Web Safe Fonts.

CSS Flexbox

A little more in depth what display:flex actually does (rather than adding it randomly). Let’s look at this:

.container {
    display: flex;
    flex-direction: row
}

Using flex you can lay out the elements inside in a customized way following design patterns like columns, rows, alignment, and distribution. More about ordering here.

To align items on the cross axis use align-items with the possible values:

• stretch
• flex-start
• flex-end
• center

To justify content on the main axis use justify-content, which has the possible values:

• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly

More documentation is here.

CSS Grid

This one I missed completely. What blew my mind is that CSS Grid can completely change the order of the elements on the website, e.g. pull an element from the bottom to the top. It also structures the styling process, which for me is A BIG simplification!

CSS Grid v. Flexbox

Flexbox is for how content flows, grid is for how content is placed. For example you may use grid for page layout and flex for regions within the grid.

The key differences:

• Grid is two dimensional, while Flexbox is one dimensional
• Grid is layout first, while Flexbox is content first
• Flex is for components of an app, Grid is for the app layout itself

Check out the grid generator.

An example configuration of rows and columns:

.content {
    grid-template-columns: 60px 60px;
    grid-template-rows: 160px 60px;
}

You can make a grid element span multiple columns/rows by using the grid-area property. The grid-area property specifies a particular area or set of rows and columns that an item occupies in the grid. It is also a shorthand for:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

An example:

.item {
    grid-area: 1/2/3/3
}

means that the element will occupy rows 1-3, and columns 2-3.

You can also assign an element to the grid area semantically, using the grid-template-areas property. Example:

.container {
    display:grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 250px 600px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
}

and later you would use:

.header {
  grid-area: hd;
}

to display the header across whole section. Note that there are no quotes.

You can read more about CSS grid here, or here.

Advanced Grid features

The fr unit

It represents a fraction of the available space in the grid container.

repeat() notation

This is actually like a function! Instead of writing:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

you can write

grid-template-columns: repeat(7, 1fr);

grid-auto-rows: minmax()

grid-auto-rows: minmax(100px, auto);

will generate a dynamic number of rows based on content and available space, of height of minimum 100px.

More about complex grids here.

CSS Tricks

To add a “box” that makes up a page, put this in the stylesheet temporarily:

* {
  border: 1px solid red !important;
}

More tricks here.

SCSS

That weird extension means SASS files, which stands for CSS Extension Language. Browsers cannot interpret it, but the web tools can convert *.scss to *.css. Some of the benefits of SASS files is that styles can be nested, and you can use variables.

Responsive Design

Viewport is the area of the window in which web content can be seen. We use the dimensions of the viewport (usually the width, but sometimes the height) as the basis of our media queries.

In order to use media queries, you need this in the head section of your HTML:

<meta name="viewport" content="width=device-width" />

An example CSS media query:

@media (min-width: 600px) and (max-width:900px) {
    body{
        background:red;
    }
}

** Remember, always start styling from the small screen - mobile first! ** Good practice: put your media query at the end of your code

Read more at Mozilla documentation.

Comments

Comments: