Giter Club home page Giter Club logo

Comments (6)

lucaslarroche avatar lucaslarroche commented on May 21, 2024 6

Hi @ja1den,

Thank you.

I will not create a special case for React and Next.js.
I try to keep Pico as neutral as possible, focused on natives HTML elements.

The only thing I could consider is a variable to enable (disabled by default) a container for React and Next.js

_variables.scss

// Enable React semantic container
$enable-react-container: false !default;

The clean way to override the default semantic container is to disable all the containers in Pico :

pico-react.scss

// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: false;

// Enable .container and .container-fluid
$enable-class-container: false;

@import "pico";

And then import your own container layout :

pico-react.scss

@import "layout/react-container";

layout/_react-container.scss

#root {
  > header,
  > main,
  > footer {
    ...
  }
}

But the default Pico style does not have a semantic container.
You don't have to edit the styles to have a container. Just use .container or .container-fluid.

<body>
  <div id="root">
    <header class="container"> ... </header>
    <main class="container"> ... </main>
    <footer class="container"> ... </footer>
  </div>
</body>

from pico.

MohammadSabbagh avatar MohammadSabbagh commented on May 21, 2024 1

I think the main issue that some Frameworks like GatsbyJs and NextJs wrap the html content in div element.
So its not possible to make the structure as body > header , body > main, body > footer.

A solution can be to use a class instead and manually add the equivalent styles as following

header.header, main.main, footer.footer{
  padding-top: var(--block-spacing-vertical);
  padding-bottom: var(--block-spacing-vertical);

  @if map-get($breakpoints, "sm") {
    @media (min-width: map-get($breakpoints, "sm")) {
      --block-spacing-vertical: calc(var(--spacing) * 2.5);
    }
  }

  @if map-get($breakpoints, "md") {
    @media (min-width: map-get($breakpoints, "md")) {
      --block-spacing-vertical: calc(var(--spacing) * 3);
    }
  }

  @if map-get($breakpoints, "lg") {
    @media (min-width: map-get($breakpoints, "lg")) {
      --block-spacing-vertical: calc(var(--spacing) * 3.5);
    }
  }

  @if map-get($breakpoints, "xl") {
    @media (min-width: map-get($breakpoints, "xl")) {
      --block-spacing-vertical: calc(var(--spacing) * 4);
    }
  }
}

from pico.

archywillhe avatar archywillhe commented on May 21, 2024

@ja1den or can just use water more flexibility

from pico.

lucaslarroche avatar lucaslarroche commented on May 21, 2024

Water is a good classless/reset css library.
But in this case, it would not be very useful. Or even worse.
Because Water container is defined with the body tag.

from pico.

djmtype avatar djmtype commented on May 21, 2024

The div between body and main applies to React, Next and Nuxt, too. Nuxt is one div deep while Next is 2 divs deep when I checked. I agree Pico should be as neutral as possible.

Why not this? Example:

@media (min-width: 768px) {
body > header, body > div[id] header,
body > main, body > div[id] main,
body > footer, body > div[id] footer {
    max-width: 700px;
  }
}

from pico.

bkataru avatar bkataru commented on May 21, 2024

For anyone still looking for a pure CSS-based solution to this problem, paste the following into one of your app's stylesheets.

@media (min-width: 576px) {
  body > div#root > header,
  body > div#root > main,
  body > div#root > footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 2.5);
  }
}
@media (min-width: 768px) {
  body > div#root > header,
  body > div#root > main,
  body > div#root > footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 3);
  }
}
@media (min-width: 992px) {
  body > div#root > header,
  body > div#root > main,
  body > div#root > footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 3.5);
  }
}
@media (min-width: 1200px) {
  body > div#root > header,
  body > div#root > main,
  body > div#root > footer,
  section {
    --block-spacing-vertical: calc(var(--spacing) * 4);
  }
}

body > div#root > header,
body > div#root > main,
body > div#root > footer {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: var(--block-spacing-vertical) 0;
}

I pulled the relevant declarations out of css/pico.css and modified the selector definitions to include div#root.

from pico.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.