× _

// SNIPPETS.TXT

So much text!

Over christmas break 2024 I decided to take some time and learn more html and css, but also get a stronger foundation in JavaScript. To help myself, but also others, I am now starting this page to keep track of some tricky, or useful patterns that I have learned! I hope you learn something new!

CSS

The boring stuff

selector {
   property: value;
}

input[type="text"] {
   border: 2px solid black;
}

HTML5 Validations

```html type="text" minlength="5" maxlength="20" required // makes form invalid unless value is used pattern // crazy syntax, can also be "email", "url", "tel" ```

CSS Text Properties

- text-align - font-weight - text-decoration - blue dotted underline - red wavy overline 4px - #000000 double line-through - line-height - the spacing between other lines - letter-spacing

CSS Selectors

Element selectors

- img

Selector list

- h1, h2 { color: blue; }

id selector

- Can only be used to reference one single element on a page - #id-name to select it in css

class selector

  • Can be used across many elements
  • Can be combined with other classes by separating them with spaces
  • .class-name to select in css

descendent selector

css div a {
color: white;
} Targets all a that live somewhere nested in a div.

Adjacent selector

css h1 + p {
color: red;
} Selects all paragraphs that come right after a h1.

Attribute selector

css input[type="text"] {
width: 300px;
color: yellow;
} Can match any attribute like href, value, src and others!

Pseudo classes

  • :active
  • :checked
  • :first
  • :fist-child
  • :hover
  • :not()
  • :nth-child()
  • :nth-of-type()
    • useful for making something striped with 2n

Pseudo elements

  • ::first-letter
  • ::selection
    • way to style how code looks that has been selected using the cursor!! so cool

CSS Cascade

The order you define styles in your css document matters. The further down something is on the page, the more power it has. The same goes for the include order of css.

Specificity

The most specific selector is the one that decides on a given style.

Box model

To avoid having to calculate the size of an element by deducting the size of a border you can use this attribute - box-sizing: border-box;

Display

- inline - elements share a line - width and height do nothing - block - elements own the line - inline block - respects width and height - none - does not show, but is there

CSS size

- em - a multiplier of the parents font size. If a div has a font-size of 10px, a child h1 with font-size 2em will have a real size of 20px. - For padding, margin 0.5em relates to the font-size of self. So if my font-size is 2em and margin is 0.5em, 2*0.5=1 times the parent font-size. The em padding is really useful when using emoji as icons because I can style things relative to the size of the emoji, this eliminates guesswork. - rem - works like em, but relates to root element and thus doesn’t create recursive multiplication

CSS transparency

- using colors rgbA - only affects specific property - using opacity - affects all properties and children

CSS position

- static - the default value for position - relative - object can be offset relative to itself using top, left, right and bottom - It’s like moving the pivot of a spite. It’s position is still the same, but the graphic is offset. Space is still taken up in the area that it would have if it was static - absolute - element is not taking up space, it’s kind of moving something to ui space. - the pivot is based on the parents position, only if the parents position is relative. - fixed - Works like absolute, but does not respect parents position. Follows the initial containing block. Used for navbars that follow when user scrolls through window. - sticky - Works like fixed only follows viewport once it’s at the edge of the screen.

CSS Transitions

transition: 1s; ```css property name | duration | timing function | delay ``` - property name - all - to affect everything - timing function - ease - ease-in - ease-out - ease-in-out - cubic-bezier(0.1, 0.7, 1.0, 0.1); - easings.net

CSS Transform

- transform: rotate(45deg); - rotateX() - rotateY() - rotateZ() - transform-origin: bottom right; - transform: scale(x, y); - transform: translate(x, y); - moves an element - skew(15deg, 20deg); Can be combined by adding a space between each effect.

transform: rotate(45deg) translate(15px, 20px)

Background

background-image: url(my.png);
background-size: contain/cover/auto
background-repeat: repeat;

CSS Flexbox

- display: flex

Default

x main axis y cross axis - flex-direction: row; - default, makes x the main axis - flex-direction: row-reverse; - inverts the x axis - flex-direction: column - y is main axis - flex-direction: column-reverse; - inverts the y axis

Justify Content

- justify-content: flex-start; - default, respects the flex-direction - justify-content: - flex-end - space-between - space-around - space-evenly

Flex wrap

- flex-wrap: - wrap - makes content begin a new row if it doesn’t fit in the container - wrap-reverse - does the same thing, but inverts the placement, for rows this makes new rows stack on top instead of under.

Align-items

- align-items: - flex-start - flex-end - center - baseline

Align-content

Takes effect when we have multiple rows or columns due to wrap. - align-content: - space-between - flex-begin - flex-end - center

Align-self

Used on an element in a flex container to change the alignment rules of a single item.

CSS Grow & Shrink

Assigned to individual elements in a flex container. - flex-basis: - controls the initial size of an element in the flex-direction. - flex-grow: - the amount of space to grow if there is extra space. - flex-grow: 1; - flex-shrink: - the amount of space to give up if there is not enough space Can be used in combination with min-width and max-width to control how much elements are allowed to grow.

Responsive Design

Media queries

Only use the nested css if height of viewport is at least 360px, if it’s lower this rule will not be used. Can be combined with other rules by using and keyword.

@media (min-height: 360px) and … (another role) {
   h1 {
      color: purple;
   }
}

Flex box

Used for single rows/columns

  • display: flex;
  • justify-content: center or space-between;
  • align-elements: center;
  • flex-direction: column; # used for, columns!

Grid

  • display: grid;
  • grid-template-columns: 1fr 2fr 1fr; # fr means fractional unit
  • grid-template-rows: 100px 200px;
  • flex-direction: column; # used for, columns!

Clamping

  • width: clamp(200px, 50%, 600px); # Will make it flex between 200px and 600px

html variables

In css we can use variables. To passa value to css, almost like a function you can use style="--var-name: 10" which will make it a paramter

Focus

element-name:focus-within element

visibility: visible