search

itsValyria / choices-choices-the-tech-stack

Kies een andere tech-stack voor het ontwerpen en bouwen van een website voor een opdrachtgever
https://choices-choices-the-tech-stack-nu.vercel.app
MIT License
0 stars 0 forks source link

Code conventions #5

Open itsValyria opened 4 days ago

itsValyria commented 4 days ago

My code conventions for this project

itsValyria commented 1 day ago

Examples

BEM naming

.webinar__carousel {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 0px;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      margin: 0 auto;
      gap: 10px;
  }

  .webinar__carousel li a {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 0;
  }

  .webinar__image--container {
    position: relative;
  }

  .webinar__image--container img {
    height: 12em;
    border-radius: var(--border-radius-sm);
  }

Custom properties

:root {
  /* Fonts */
  --primary-font: "Open Sans", sans-serif;
  --heading-font: "VAGRundschrift", sans-serif;

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;

  /* Colors: generic */
  --darker-black: #000;
  --lighter-black: #222222;

  --darker-white: #F0E5E9;
  --lighter-white: #fff;

  --darker-red: #6a0025;
  --lighter-red: #D2B2BD;

  /* Colors: element */
  --primary-color: var(--darker-red);
  --secondary-color: var(--lighter-red);

  --body-background-color: var(--darker-white);

  --focus: solid 2px var(--darker-red);

  --navigation-active: var(--darker-red);

  --button-background: var(--darker-red);
  --button-text: var(--lighter-white);

  --text-accent: var(--darker-red);

  /* Border radius */
  --border-radius-xs: 4px;
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 18px;
  --border-radius-xl: 24px
}

Use fix or fixes in commit messages

image