DEV Community: Heggy Castaneda

Flexbox with my fictional company home page

Heggy Castaneda — Fri, 03 Jul 2020 08:01:33 +0000

For responsive mobile first design:

use the media query for mobile portrait


@media only screen and (max-width: 480px) and (min-width: 320px), (orientation: portrait)
.page-description, .staff-intro {
    font-size: 1.8rem;
    line-height: 2rem;
}

Flexbox for my photos so it fits well in different device sizes

.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

Use of flexbox flex-direction: column, so that name, photo, intro are lined up vertically.

  <div class="col">
    <h2 class="team-name">Ashley Sullivan</h2>
    <img src="./img/pro-asian-woman.jpg" alt="smile asian lady look up">
    <p class="staff-intro">Ashley has a MD/PhD and is creative director for anything user related.</p>
  </div>

.col {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

Responsive Local Club

Heggy Castaneda — Sat, 20 Jun 2020 23:48:57 +0000

To have img auto centered horizontally:

img {
  /* prevent weird alignment with other elements */
  display: block;
  /* keep it centered */
  margin: auto;
}

Different width to target for media query:

/* landscape tablet */
@media only screen and (max-width: 960px) {
  .main, header {
    height: auto;
  }
}

/* vertical tablet */
@media only screen and (max-width: 700px) {
  li {
    display: block;
    padding: 0.5rem 0.9rem;
    text-align: center;
  }
}

/* smart phone */
@media only screen and (max-width: 470px) {
  .quote q, .location p {
    font-size: 1.3rem;
  }
}

Responsive coffee site lesson

Heggy Castaneda — Sat, 20 Jun 2020 22:00:38 +0000

Use rem (root) unit for font sizes for easy scaling
For background-image, set it to center so that center of img stays centered when resize


.banner-img {
  /* # is placeholder for img location */ 
  background-image: url('#')
  background-position: center;
}

When reducing the img size, to keep its aspect ratio, only change width.

.fun-img {
  width: 20%;
}

Mobile screen media query rule set max-width: 470px.

Set the img to fill the full width of the mobile

Stack img on top.

@media only screen and (max-width: 470px) {

  img {
    width: 100%;
    float: left;
    display: block;
  }

Responsive space site

Heggy Castaneda — Sat, 20 Jun 2020 21:34:54 +0000

How to set media query for following criteria:
When
The screen has a min-width of 768px
The screen has a max-width of 1024px
The screen has an orientation of landscape
Make
title, description float left

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  .page-title, .page-description {
    float: left;
  }
}

How to set high resolution screen display:
When
The screen min-resolution is 80 dpi
Make
Image more crisp


/* high resolution screen display media query
 */
@media only screen and (min-resolution: 80 dpi) {
  .logo {
    background-image: url("../img/cowboy@2x.png");
  }
}

Summer Travel Blog Site focus on responsive design

Heggy Castaneda — Tue, 16 Jun 2020 22:03:15 +0000

Demo
Use em unit for relative font-size. em multiplies by your base font-size which is the parent container font-size.

Use rem when sizing your font for entire site. The most default html is 16px vs. em localized font-size difference.

min-width and min-height to keep text content to get too short or long (too spread out) when browser window gets too small.

Novelist website facelift

Heggy Castaneda — Fri, 12 Jun 2020 22:43:08 +0000

Things I learned in css typography while building Novelist site.

To increase readability: increase line-height in ratio to the default font size. line-height: 1; is single font size height. line-height: 2 is double font size height.

p {
  line-height: 1.4;
}

A list of websafe computer pre-installed fonts

Typeface is a fancy word for font style and in css, font-family: "Work Sans";.

The difference between "sans-serif" vs "serif" fonts is Serif has the notches/feet or "decorative stroke at the end of letter stem" where serif clean straight line.

Typography and its jargons

Heggy Castaneda — Thu, 11 Jun 2020 05:35:29 +0000

While learning about Typography and building the site, I learn few things I didn't know.

Letter Case (aka case): The difference of upper case vs. lower case in any written language. Letter Case is neat concept and very foreign concept to me. When I first learn English, I was surprised that there are two versions (upper and lower case) for every letter in alphabet.

text-transform and line-height help with readability.

text-transform is css property that converts casing of text.

header {
  // transforms love -> Love
  text-transform: capitalize;
}

line-height property, use unitless ratio value for responsiveness. It is ratio of font size to line-height.

footer {
  line-height: 1.5;
}

Two types of font-family:
1. <family-name> - may not preset in your computer ex: "times", "courier", "arial"
2. <generic-name> - preset in your computer so use this as a fall-back. Do not use quotes for generic names. ex: serif, sans-serif, cursive, fantas, monospace
In order use to locally save fonts: import it in stylesheet using @font-face style rule and place it on top of your css file.

Syntax on how to refer to font-face locally saved and find your fonts at fontsquirrel:

@font-face {

  // name of font
  font-family: "Lovato";

  // relative link where your font is saved and its 'format'
  src: url(downloaded-fonts/Lovato.woff2) format('woff2'), 
       url(downloaded-fonts/Lovato.tff) format('truetype');
}

Web Open Form Format(WOFF) and Web Open Form Format 2(WOFF2) are future of fonts. True Type Font (TTF) is more widely used.

Paint shop with focus on hsl (hue, saturation, lightness)

Heggy Castaneda — Tue, 09 Jun 2020 04:21:18 +0000

Paint shop demo

hsl(hue, saturation, lightness)

Hue:
- unit: degree
- range: 0 to 360
- ex: 0 is red, 120 is green, and 240 is blue.
Saturation:
- unit: %
- range: 0% (gray) to 100% (full color)
Lightness:
- unit: %
- ex: 0% (black), 50% (neither light | dark), 100% (white)

More info hsl

Coffe roasting site with focus on color spectrum

Heggy Castaneda — Tue, 09 Jun 2020 03:01:54 +0000

Coffee site Demo

Some terminology:

font color is called foreground and use css's color property

background color uses css's background-color property

H in hsl is hue which measure of degrees of the color circle ranging from 0 to 360 (red = 0°; green = 120°; blue = 240°)

To change the lightness - change l of hsl
To update the saturation - change s of hsl

More info on hsl

When parent container has position: relative, the children elements with position: absolute are positioned relative to its parent's container.

Demo:

<div class="notice">
  <p>Don't close me!!</p>
  <img src="images/abs-pos-close.png" class="close" alt="close">
</div>

.notice {
  position: relative;
}

.close {
  // close button is position relative to its parent
  //   container .notice
  position: absolute;
  left: 0;
  top: 0;
}

In-dept explanation positioning

Broadway design firm site with css layout position and display properties

Heggy Castaneda — Mon, 08 Jun 2020 05:04:42 +0000

Broadway Demo

For nav to stay fixed on top, set parent container position: fixed;.

<header>
    <nav>
      <ul>
         <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
      </ul>
    </nav>
</header>

header {
  position: fixed;
  width: 100%;
  z-index: 10;
}

Note: For footer add bottom: 0; to make it stay in the bottom since it matters where it is positioned in the page flow.

When element is inline we couldn't add width, however, we could style the element as inline-block or block.

nav li {
  display: inline-block;
  width: 50px;
  height: 50px;
}

This results li to fit inside of nav as a row

note: When applying display: inline-block; to ol>li, we notice the numbering goes away too!

Once we set position: relative, we can add offset position properties (top, bottome, left, right) to position relative to the reserved spot in page flow.

nav {
  position: fixed;
}

main {
  position: relative;
  top: 100px;
}

nav is placed top of main in html page flow. position: fixed breaks out element natural html flow and fix its position top: 100px; regardless where it sit in HTML structure.

Survey site focus on HTML flow

Heggy Castaneda — Sun, 07 Jun 2020 06:11:21 +0000

Survey focus on css flow

The default style for position is position: static and offset properties (top, bottom will not work)
Position: Relative means relative to its default static position on the web page.

.box-bottom {
  background-color: DeepSkyBlue;
  position: relative;
  // offset properties top, left
  top: 20px;
  left: 50px;
}

position: fixed will remove its element out of HTML flow. Therefore, it covers element following.

To fix, add position: relative, provide offset amount to the element that is currently covered by the position: fixed element.

nav {
  // nav element is removed from HTML flow
  position: fixed
}

// element following `nav` is body
body {
  // take the element out of html flow 
  position: relative;
  // offset
  top: 200px;
}

When use display property: inline-block, element can be placed next to each other and have dimension. image element is good example of inline-block.

  <header>
    <ul>
      <li>Question 1</li>
      <li>Question 2</li>
      <li>Question 3</li>
      <li>Question 4</li>
      <li>Question 5</li>
    </ul>
  </header>

We then can set li to display: inline-block; to questions to show up side by side.

Burger Home Page Advance CSS Styling

Heggy Castaneda — Sun, 07 Jun 2020 00:18:06 +0000

Burger Page Demo

To have the content centered

.content .body {
  margin: 0 auto;
}

Once you set fixed height on a container, remember to add overflow

.content {
  width: 100%;
  height: 500px;
  margin: 10px auto;
  border: indigo solid 2px;
  overflow: scroll;
}

To add css borders to see how box-model is displayed for all elements

open dev tool
select top container (html) element
add styling (click on + on dev tool>Styles tap)

* { border: 1px solid red; }