quartz/Notes on CSS.md at 0cd910a8618b905643154b4cb033abaa3f493b1f

mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-25 15:35:42 -05:00

Miguel Pimentel a931a4f6ba

Pull-Request [ariasae-12-12-2023] from Obsidian (#44 )

* PUSH NOTE : Past Titles and Roles.md

* PUSH NOTE : Projects.md

* PUSH NOTE : Dominican Republic.md

* PUSH NOTE : Bulma.md

* PUSH NOTE : Markup Language.md

* PUSH NOTE : Notes on CSS.md

* PUSH NOTE : Rhizomatic Learning.md

* PUSH NOTE : Zola.md

* PUSH NOTE : Static Site Generators.md

* PUSH NOTE : NeoVim.md

* PUSH NOTE : Markdown.md

* PUSH NOTE : Chuckwalla.md

* PUSH NOTE : index.md

* PUSH NOTE : Consistency.md

* PUSH NOTE : About.md

2023-12-12 19:18:27 -06:00

1.4 KiB

Raw Blame History

title	compartir	updated
Notes on CSS	true	2023-12-12

Breakpoints

Based on Bootstrap: 320px, 576px, 768px, 992px, 1200px, 1400px, 1600px.

You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent.

Mixins

All mobile-first-designs media queries and 1 desktop-first-design media query per given CSS class.

Anything Above a Certain Screen Width (mobile-first-design)

@mixin screen-min($min) {
  @media (min-width: $min) {
    @content
  }
};

Anything Below a Certain Screen Width (desktop-first-design)

@mixin screen-max($max) {
  @media (max-width: $max - 1) {
    @content
  }
};

Anything In-between Two Values (hybrid)

@mixin screen-minmax($min, $max){
  @media (min-width: $min) and (max-width: $max - 1){
    @content
  }
};

------------------------------------------------------------------
// USING THE MIXINS
// Example - Writing a custom bootstrap-like container from scratch
------------------------------------------------------------------

.container {
  margin: 0 auto;
  width: 100%;
  @include screen-min(768px){max-width: 750px;}
  @include screen-min(992px){max-width: 970px;}
  @include screen-min(1200px){max-width: 1170px;}
  @include screen-min(1400px){max-width: 1370px;}
  @include screen-min(1600px){max-width: 1570px;}
}

1.4 KiB Raw Blame History