HTML CSS

HTML-CSS

TIP: TO TEST HTML + CSS EASILY, VISIT JSFIDDLE

Basic tutorials:

Design principals

ID and Class

In CSS, you can assign and control the style of HTML elements on a web page using a number of selectors. ID and class are two of the mostly used CSS selectors that not only help with building the layout of the HTML document but they also help with styling it. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

ID

The id selector is used for selecting a single HTML element with a unique id attribute value. What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element.

In the following example, you will see a division element

with an id attribute value of header. This is the header of our web page. In your stylesheet file, you can apply styles to this div element like the following:

#header { width: 100%; height: 80px; background: blue }

Note the use of # (hash) in front of the id name while applying the CSS rule. This is an id selector. The CSS ID selector matches an element based on the value of its id attribute. In order for the element to be selected, its ID attribute must match exactly the value given in the selector.Example:

/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

Syntax:

#id_value { style properties }

Class

The class selector is used for selecting a single or a group of HTML elements with the same class attribute value.

Example:

.content { margin: 20px 0; line-height: 24px; font-size: 15px }

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

Note the use of . (dot) in front of the class value while applying the CSS rule.

NOTE:difference Between Class and ID

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements. CSS uses the prefix (#) for IDs and (.) for Classes.

Grids

A core difference between CSS Grid and Flexbox is that:

CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.

Flexbox

The MDL grid has been designed to reduce the usual coding burden required to lay out content for multiple screen sizes. The grid is defined and enclosed in a container element with the CSS class mdl-grid. It has 12 columns for desktop, eight for tablet and four for mobile, each size having predefined margins and gutters.

MDL encloses the entire layout inside a container element with the classes of .mdl-layout .mdl-js-layout.

MDL uses CSS flexbox for layout. The .mdl-layout element is a flex container with the flex-direction property set to column. The layout component includes the following four sub-components:

Navigation layouts
Grid
Tabs
Footer

To use the grid, add a <div> inside your content container, with the mdl-grid class attached.

<main class="mdl-layout__content">
<div class="mdl-grid">
<p>Hello world!</p>
</div>
</main>

CSS grid layout

A few detailed websites about CSS grid kayout:

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. CSS Grid Layout operates with two axes: the block axis, also known as the y-axis and the inline axis, also known as the x-axis. When dealing with the vertical axis, you’ll be using the align property, whereas if you want to align or center on the horizontal axis, you should use the justify property.

The CSS grid layout module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. One of the most exciting features in Grid is the ability to place grid items anywhere inside or outside of the grid.

The contents of the grid container (the parent) are organized into individual grid items (the children), which are then assigned to predefined areas in the grid. They can be explicitly placed using coordinates through the grid-placement properties or implicitly placed into empty areas using auto-placement. All direct children of the grid container automatically become grid items.

Explicit and implicit grid

A rule of thumb is that if you define the columns or rows in a grid, it’s called “Explicit Grid”. If, on the other hand, the grid items are placed automatically by the browser, it’s called “Implicit Grid”.

Explicit grid

We can define a fixed number of lines and tracks that form a grid by using the properties grid-template-rows, grid-template-columns, and grid-template-areas. This manually defined grid is called the explicit grid.

Implicite grid

If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.

Grid container

The spaces between each column/row are called gaps. You can adjust the gap size by using one of the following properties: grid-column-gap, grid-row-gap, grid-gap
To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid.
The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the length of the respective column. If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.
- Example:
```
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;  OR
grid-template-columns: 80px 200px auto 40px;
}
```

Note: If you have more than 4 items in a 4 columns grid, the grid will automatically add a new row to put the items in.

The grid-template-rows property defines the height of each row.
Grid lines. The lines between columns are called column lines. The lines between rows are called row lines. For 3 columns/3 rows, we have 4 column and row lines. Place grids by column-start and column-end

Grid items

A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.
The grid-column property defines on which column(s) to place an item. You define where the item will start, and where the item will end (1 / 5, from 1 to 5) or how many columns the item will take (1 / span 3 for from 1 on 3 columns).

Note: The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

The grid-row property defines on which row to place an item.
The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Example:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Make item 8 starts row-line 1, column-line 2, end row-line 5, column-line 6

The grid-area property can also be used to assign names to grid items. Named grid items can be referred to by the grid-template-areas property of the grid container. Each row is defined by apostrophes (' '). The columns in each row is defined inside the apostrophes, separated by a space.

Note: A period sign represents a grid item with no name.

The Grid Layout allows us to position the items anywhere we like.

Example: .item1 { grid-area: 1 / 3 / 2 / 4; } item 1 starts rowline 1/column line 3, ends row line 2, column line 4

There is a new flexible unit: the Fr unit. Fr is a fractional unit and 1fr is for 1 part of the available space. Visit this page for examples.

Cell item placement

This page show all possibilities for placing container items (cells) and cell items themselves.

grid-area: 1 / 3 / 2 / 6;

means

grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 3;
grid-column-end: 6;

Navigation

The navigation landmark role is used to identify major groups of links used for navigating through a website or page content. Like the HTML

element, navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation.

<div role="navigation" aria-label="Main">
  <!-- list of links to main website locations -->
</div>

It is preferable to use the HTML5

element to define a navigation landmark. If the HTML5 nav element technique is not being used, use a role="navigation" attribute to define a navigation landmark.

Center

When dealing with the block axis (vertical), you’ll be using the align property, whereas if you want to align or center on the horizontal axis, you should use the justify property.

NOTE: the <html> and <body> by default acquire all the available rendering space in the browser window. In other words, they have their width and height attributes set to 100% already.

Holy grail

This is a layout pattern with one header, a main content area with fixed-width navigation on the left, content in the middle and a fixed-width sidebar on the right and then a footer. It was designed especially to easily accomplish full page layouts. We can use CSS grids or Flexbox. See the demo.

TTH will adopt this classic layout for its simplicity and elegance, the numerous templates found on the web. It perfectly feets our needs. The right side bar will be dedicated to RSS feeds or news.

TheTradingHall website CSS

Planning the grid

“Don’t compose without a scale. Type should actually be the scale that defines almost everything else.”

Type (line-height) is the first piece of the spacing system puzzle.

Tip:

Never include border in any spacing calculations.
Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (h1 to h6) for all content headings.

This step by step process follows this tutorial and this one

Set Up the Grid Container and the Grid Items

A CSS Grid consists of horizontal and vertical grid tracks (rows and columns). The grid tracks define the grid items (grid cells) that are easily identifiable by the row and column they belong to. The grid container is the HTML element that contains the whole CSS Grid.

First things first: we need to define a basic HTML structure for our home page.

container is the global wrapper that has small margins to the left and to the right.
main-header is the header that contains the .logo (occupying 20% of the space, floating to the left) and the title (occupying 79% of the space, floating to the right).
content-area-wrapper wraps:
- the main .content-area (occupying 64% of the space minus 1rem reserved for margin, floating to the middle)
- the .navbar (occupying 18% of the space, floating to the left)
- the .sidebar (occupying 18% of the space, floating to the right)
footer is our footer and spans to 100% of the space.

Position Grid Cells

We can specify the size and location of individual grid cells using the grid-row and grid-column properties. We need to add these two properties to the grid cells we want to position.

Example:

.cell-1 { 
  grid-row: 2; 
  grid-column: 3; 
}

Size Grid Cells

We can’t only use the grid-row and grid-column properties to change the order of the cells, but they also allow us to modify their size. In fact, both of them are shorthands. The grid-row property is a shorthand for grid-row-start and grid-row-end, while grid-column consists of the grid-column-start and grid-column-end properties.

Let’s say, we want Cell 1 to span across the first row. We can implement the layout by adding the following style rules:

.cell-1 { 
  grid-row: 1; 
  grid-column: 1/4; 
}

Define Named Grid Areas

If our grid gets too complicated it can be tough to follow up with all the rows and columns by just referring them by their numbers. To help developers overcome this hardship, the CSS Grid also makes it possible to define pre-named grid areas that are easy to remember.

We want to implement a simple blog page layout with a header, a footer, a main content area, and two sidebars (one on the left and one on the right side). It can be more comfortable to refer to the grid cells by their name.

HTML code:

<div class="container">
  <header class="cell cell-1">Header</header>
  <aside class="cell cell-2">Left sidebar</aside>
  <main class="cell cell-3">Main content</main>
  <aside class="cell cell-4">Right sidebar</aside>
  <footer class="cell cell-5">Footer</footer>
</div>

In the CSS, we need to use two new properties: grid-template-areas on the grid container and grid-area on each individual grid area, separately.

Create Nested Grids

The CSS Grid Layout Module module allows grid items to be grid containers as well. Nested grids work according to the same rules as standalone ones.

let’s say we want to divide the footer into four equal columns. In the HTML, we simply add four divs to the footer in the following way:

<div class="container">
   <header class="cell cell-1">Header</header>
   <aside class="cell cell-2">Left sidebar</aside>
   <main class="cell cell-3">Main content</main>
   <aside class="cell cell-4">Right sidebar</aside>
   <footer class="cell cell-5">
       <div class="cell cell-6">Footer 1</div>
       <div class="cell cell-7">Footer 2</div>
       <div class="cell cell-8">Footer 3</div>
       <div class="cell cell-9">Footer 4</div>
   </footer>
 </div>

In the CSS, we add the display: grid; property to .cell-5 and set the width of the columns and the column gaps using the grid-template-columns and grid-column-gap properties:

.cell-5 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-column-gap: 1rem;
}
.cell-5 .cell {
   background-color: coral;
}

Our favorite template

Very basic and first lines of our HTML structure:

<body class="tth">
  <header class="tth__header">Title</header>
  <nav class="tth__nav">Menu</aside>
  <main class="tth__main">Content</main>
  <sidebar class="tth__sidebar">News</sidebar>
  <footer class="tth__footer">Footer</footer>
</body>

<div class="container"
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <!-- Navigation -->
  </nav>

  <main>
    <!-- Main content -->
  </main>

  <sidebar>
    <!-- Sidebar content -->
  </sidebar>
  
  <footer>
    <!-- Footer content -->
  </footer>
</div>

Play with CSS grid on w3schools. My first try

Size and units

Viewport-percentage lengths, or viewport units as they are more frequently referred to, are responsive CSS units that allow you to define dimensions as a percentage of the width or the length of the viewport. If you want to put some text in a container and having it size itself to fill that container when resizing, one solution is to use vw as letter size unit.

W3C defines viewport as “size of the initial containing block”. In other words, viewport is the area contained within the browser window or any other viewing area on a screen.

In Grid Layout, you don’t have to size anything. If you don’t define (some) track sizes, their size will be auto, based on the content they need to fit. You could still say which tracks you want with the grid-area syntax, but leave sizing up to the browser. Or you could refrain from defining areas at all, in which case the browser will create tracks for each of your grid items, then size them. The obvious reason to define some, most or all of your track sizes anyway, is because you have intentions about your lay-out. You want your content area to have a maximum length for better readability, or you want your ad bar to be certain size for business reasons.

1920 - default desktop width in a design mockup (equals 100vw) 375 - default mobile width in a design mockup (equals 100vw)

In the CSS, we use 100vh as a height value and 100% as width. We don’t use the vw unit here as by default, scrollbars are also added to the viewport size. So, if we used the width: 100vw; rule a horizontal scrollbar would appear at the bottom of the browser window.

Viewport-percentage lengths

The values are:

    vw (% of the viewport width)
    vh (% of the viewport height)
    vmin (the smaller of vw or vh)
    vmax (the larger or vw or vh)

Minimum and Maximum Grid Track Sizes

Tracks sizes can be defined to have a minimum and/or maximum size with the minmax() function.

Example:

grid-template-rows:    minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

Avoid fixed dimensions

Grid items have an initial size of min-width: auto and min-height: auto. You can override this behavior by setting grid items to min-width: 0, min-height: 0.

It can be very tempting to use fixed dimensions for elements. After all, your favorite hand-off tool probably lets you copy them with ease. Elements with fixed widths (or margins) could easily break your layout if you're not careful.

Try to style element sizes in relation to their surroundings. Use percentages or viewport units. Prevent setting width and height and try to use their min- and max- counterparts. And if you do end up with a width breaking something somewhere, a max-width:100% can work wonders.

Content versus context

Context-based or extrinsic sizing of an element is sizing based on the container it is in. This is often its parent, or it could be the viewport. The extrinsic size of a block element is the size of that container, minus padding and border.

Content-based or intrinsic sizing, on the other hand, is sizing based on the element’s content, so it is independent from its context.

The 8-Point Grid

This is the rule to use multiples of 8 to define dimensions, padding, and margin of elements.

A point, pt is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a “1x” resolution (or @1x), 1pt = 1px.

Media query

Media queries consist of an optional media type (all, handheld, print, TV and so on) and any number of optional expressions that limit when the query will trigger, such as width, pixel-density or orientation.

This CSS trick article has a detailed list of media queries for specific devices.

One rule: you should never base your breakpoints on devices!!. Choosing breakpoints based on your design and not specific devices is a smart way to go.

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

CSS Media Query is used to apply a different set of CSS rules when certain conditions are met. For example, @media screen and (max-width: 768px) { p { font-size:1.2em } }

The @media screen and (max-width: 768px) part specifies the conditions to be met.
When the conditions are met, p { font-size:1.2em } will be applied.

In the CSS code, it is a good idea to give an ID to element

. Example:

    <div id="contents">
      This is the main content area.
    </div>

With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched. To combine media features you can use and, or, not. Example:

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.

You can start with the smallest view and add layout as the viewport becomes larger. This approach is described as mobile first responsive design and is quite often the best approach to follow.

Typical sizes

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Breakpoints

The common practice is to divide screen sizes into 3 categories:

Large: Smart TVs, monitors, desktops, and laptops.
Medium: Tablets, laptops with slightly smaller screens.
Small: Smartphones.

Below are some usual sizes

    mobile: up to 768px
    tablet: from 769px
    desktop: from 1024px
    widescreen: from 1216px
    fullhd: from 1408px

Mobile: 320x568
Tablet: 768x1024

We will choose the following for our design:

Desktop styles (not in a media query)
Tablet styles (max-width: 768px)
Mobile styles (max-width: 320 or 414px)

Viewport

A viewport is a virtual screen size that the web browser creates. For example, a tablet may have a 1024 X 768 pixels screen physically. But in order to fit a desktop website nicely onto the screen, it may create a viewport that is 1200 X 900 pixels.

The only thing you might want to do is to disable the viewport pinch-zoom by adding the following meta tag in the

section of your HTML:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

Iframes

To make your IFRAME responsive you'll need to wrap it in a <div>:

<div class="iframe-container">
  <iframe width="1425" height="559" src="https://www.youtube.com/embed/BS4ojxHC1EM"></iframe>
</div>

Styles

Box-shadow

Box shadow basics

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

Material-design-lite

NOTE: Material Components for the web is the successor to Material Design Lite.

In 2014, GOOGLE published the material design specification to provide guidelines for good design and beautiful UI across all device. This material has been brought to websites with a library of components and templates in vanilla CSS, HTML and JS. The project is called Material Design Lite, or MDL.

Several options are possible to use mdl. The recommended one is to Load the necessary CSS and JavaScript files using Google’s CDN: Content Delivery Network.

NOTE: as shown on the mdl github, Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository.

MDL organizes CSS using namespaced BEM classes.

Colors

One good on line color picker with variations around one color and color name,

color brand-main : #af0420 ou #96031c

green/yellow : rgb(190, 194,0)

TTH bleu: rgb(105, 150, 219) TTH pourpre: rgb(128, 17, 45)

Dark vs light background

Dark Design

Need something with style? Dark web design is the choice of gaming and technology companies, visual content-heavy sites and those after something a little more atmospheric.

While a dark UI is much harder to pull off, the results are worth it when used correctly. These tones are suited to recreational sites used at night, and ones that aim to emphasize visual or video content. Think of lightboxes; dark website colors create the same effect!

In addition, a dark interface is much better on the eyes long-term. While unsuitable for reading short articles, as black on white is more legible, it’s perfect when you’re working with a lot of text or images for hours on end.

Light Design

Light interfaces are known for creating a minimalistic, elegant and universally pleasant atmosphere. However, its oversaturation in web design has led to the inverse being considered more attractive. Still, if you’re not willing to take a risk, white is probably the best idea.

If you run a website made up of articles, such as a blog or news site, use light UI; the text is more legible.

Typographiy

Best practices are largely descibed in this article

Fonts

We use Google fonts. The google webfonts helper let you choose your fonts and describes how to add in the pure.css. Fonts have been downloaded on the server in css/fonts directory, but may be used with a link to google font servers.

The .woff2 compression format is the next generation one with a 30% average gain over WOFF 1.0. Unfortunately, woff format are not supported by old browsers and mobile OS. We need thus to specify all formats this way to enable the best support.

Font choice

Best advice is to stick with a few fonts.

Titles, headers and sidebar : Roboto Mono. This is a monospace and sans serif font.
Text: Bitter. This is a serif font.

TIPS:

To define the font size, one easy measure is rem, which gives a size relative to font-size of the root element. Example:

html {
  font-size:16px;
}

div {
  font-size: 3rem;
  border: 1px solid black;
}

use this app to get the font face declaration for a specific font.

/storage/tth_blog/pure-pelican-themes/pure-single-gabx/static/css/pure.css
----------------------------------------------------------

/* roboto-mono-700 - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-mono-v4-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
       url('../fonts/roboto-mono-v4-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-mono-v4-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-mono-v4-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-mono-v4-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-mono-v4-latin-700.svg#RobotoMono') format('svg'); /* Legacy iOS */
}

NOTE: please visit this link to understand the difference between HTML and CSS font style italic.

Line heights

Line heights are the most important part of achieving consistent vertical rhythm throughout your website or web application. Try to avoid using pixel units with line-height property. Instead, use unitless values for line-heigh

Variables

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the :body selector. The variable name must begin with two dashes (--) and is case sensitive!

The syntax of the var() function is as follows: var(custom-name, value)

Example:

:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

Logo

TTH logo has been created using Inkscape. Inkscape is an open-source vector graphics editor similar to Adobe Illustrator. What sets Inkscape apart is its use of Scalable Vector Graphics (SVG), an open XML-based W3C standard, as the native format.

NOTE:

A png (Portable Network Graphics) file is a raster or bitmap image file format. A raster image is made up of a fixed number of pixels [or building blocks] that form a complete image.

The image cannot be enlarged without distortion occurring. (When you zoom in on a raster image, the pixels become visibly grainy.) Common raster image files include png, jpg and gif formats.

SVG

A svg (Scalable Vector Graphics) file is a vector image file format. A vector image uses geometric forms such as points, lines, curves and shapes (polygons) to represent different parts of the image as discrete objects. These forms can be individually edited. A vector image remains crisp and clear at any resolution or size. SVG isn't (just) an image. SVG is a document.

When you include an HTML file with an <iframe>, you don't expect the text inside to scale when you change the size of the frame. Same with SVG. By default, it will be drawn at the size specified in the code, regardless of the size of the canvas.

The height and width attributes

A first glance at the SVG specifications would suggest that the height and width attributes on the top-level svg element will implicitly set an aspect ratio and therefore make SVG scale like other images. If you use an to embed your SVG, setting height and width will make the SVG scale predictably in most browsers, but not in Internet Explorer. We must forget height and width. You don't actually want to set the exact height and width anyway, you want the SVG to scale to match the width and/or height you set in the CSS. What you want is to set an aspect ratio for the image, and have the drawing scale to fit. You want a viewBox.

The most important aspect is the removal of the width and height attributes that most applications include automatically. This makes the SVG fully responsive in modern browsers.

The viewBox attribute

The SVG viewBox is a whole lot of magic rolled up in one little attribute. It's the final piece that makes vector graphics Scalable Vector Graphics.

Special button: material-design-hamburger

This complete article helped us to build an amimated hamburger icon.

HTML, CSS, JavaScript, fonts

To manage these contents, first and reliable possibility is to add this kind of line in the .html page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

This has the advantage to point to the last version and avoid downloading/upgrading content. A downside is the potential latency this can bring to the site.

Another method is to download locally the content and use the npm bower package.

bower

Install bower in the current directory:

$ npm -g install bower

Install a package with bower in the project root directory

$ cd /storage/tth_blog
$ bower install --save packageName

Bower components will be installed in the /storage/tth_blog/bower_components directory. A bower.json will be updated.

Link in the html file:

<script src="bower_components/jquery/dist/jquery.min.js"></script>

https://css-tricks.com/favicon-quiz/

Responsive sidebar menu

We will build a responsive sidebar navigation with this look. Vertical Responsive Menu is a small JavaScript library which helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation. On small screens, it will converts the sidebar navigation into an off-canvas menu with a toggle icon when the viewport’s size reaches the breakpoint specified in the CSS3 media queries (default to 992px).

We can find a lot of material about a responsive sidebar navigation with a hamburger style button. Most of them use the media query technique with some piece of java script code. After some tests, we decided to use this code as it does not use media query neither java script. The t

Marquees

CSS marquees are the standard method for creating scrolling, bouncing, or slide-in text and images.

HTML CSS

HTML-CSS

Design principals

ID and Class

ID

Class

Grids

Flexbox

CSS grid layout

Explicit and implicit grid

Explicit grid

Implicite grid

Grid container

Grid items

Cell item placement

Navigation

Center

Holy grail

TheTradingHall website CSS

Planning the grid

Size and units

Viewport-percentage lengths

Minimum and Maximum Grid Track Sizes

Avoid fixed dimensions

Content versus context

The 8-Point Grid

Media query

Typical sizes

Breakpoints

Viewport

Iframes

Styles

Box-shadow

Material-design-lite

Colors

Dark vs light background

Dark Design

Light Design

Typographiy

Fonts

Font choice

Font size

Line heights

Variables

Logo

SVG

The height and width attributes

The viewBox attribute

Special button: material-design-hamburger

HTML, CSS, JavaScript, fonts

bower

Responsive sidebar menu

Marquees

Resources

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!