How to Got full-width container under classless version of picocss?

[yunfan]

i really like the classless version, but according to the document there were too container style one is fix width while the other is full-width , so if i use classless version, how could i tell which style i want? since i already choose not provide class name

[vardumper]

If I am not mistaken, the Full width container only works when adding the .container-fluid class.
You would need to extend the styles to achieve that without a class.

This is the container SCSS used to add both classes:

@if map.get($modules, "layout/container") and $enable-classes {
  /**
   * Container
   */

  .container,
  .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(#{$css-var-prefix}spacing);
    padding-left: var(#{$css-var-prefix}spacing);
  }

  .container {
    $first-breakpoint: true;
    @each $key, $values in $breakpoints {
      @if $values {
        @media (min-width: map.get($values, "breakpoint")) {
          max-width: map.get($values, "viewport");
          @if $first-breakpoint {
            $first-breakpoint: false;
            padding-right: 0;
            padding-left: 0;
          }
        }
      }
    }
  }
}

You have some options, pick one you like best:

1. Since CSS is for styling, using a class makes absolute sense here. So modify the block, for example by duplicating it to your theme.scss and simply remove the and $enable-classes condition from the first line. This way, your final CSS will have these two classes.
2. You could "abuse" some data-attribute for the sake of not having classes. Feels wrong to me, but hey:

[data-layout="container"],
[data-layout="container-fluid"] {
  width: 100%;
  // ...
}

3. You could also just write some css for your landmark container - since is supposed to be unique per HTML document, something like this works:

main {
  width: 100%;
  // container styles
}

no class needed.
4) oh and there seems to be a fourth option: using pico.fluid.classless.min.css

[yunfan]

thanks, i think i might expressed the wrong question

what i need is both container and container-full without class, and data-attribute also seems as cheating to me
so do you accept making own element name to contains layout relevant info?