picocss.com header

[kvij]

I try to use the homepage as a way to learn pico css however I'm already running into magic BS just looking at the header.

If I do the exact same html structure:

<header><div.container>
<a />
<nav>
  <ul /><ul.icons />
</nav>
</div></header>

The entire layout is different.
The <a> tag is rendered above the first <ul> is on the left side and the icons <ul> is on the right.

When inspecting I can't see any css that makes the <nav> float to the right or the <a> on the same line as the <nav>.

Please help me understand this CSS black magic. What concepts do I need to understand to create layouts with (pico) css.

[dday9]

PicoCSS is designed to be a starting point. You could use only PicoCSS and nothing else but then it is up to you to make sure the layout fits the rules.

In this case, if you would inspect the applied styles, you would see that the PicoCSS website has custom styling. Specifically:

body>header .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

body>header .container>a {
    margin: calc(var(--pico-spacing) * -.125) calc(var(--pico-spacing) * -.25);
    padding: calc(var(--pico-spacing) * .125) calc(var(--pico-spacing) * .25);
    border-radius: var(--pico-border-radius)
}

body>header .container>a svg.pico-logo {
    transform: translateY(-10%)
}

body>header .container nav svg {
    display: inline-block;
    width: auto;
    height: 1.125rem;
    transform: translateY(-.0625rem)
}

body>header .container nav svg.theme-toggle {
    transform: scale(1.125) translateY(-.0625rem)
}

@media (max-width: 575px) {
    body>header .container nav ul li.hide-before-sm {
        display:none
    }
}

@media (min-width: 576px) {
    body>header .container nav ul.icons:before {
        display:block;
        height: 1.125rem;
        margin-inline:var(--pico-nav-element-spacing-horizontal);border-left: var(--pico-border-width) solid var(--pico-form-element-border-color);
        content: ""
    }
}

body>header .container nav details[class=dropdown] {
    display: inline-block;
    margin: calc(var(--pico-nav-element-spacing-vertical) * -1) calc(var(--pico-nav-element-spacing-horizontal) * -1)
}

body>header .container nav details[class=dropdown] summary:not(:hover,:focus,:focus-visible),body>header .container nav details[class=dropdown]:not(:focus-within) summary {
    border-color: transparent;
    background-color: transparent
}

body>header .container nav details[class=dropdown] summary:focus,body>header .container nav details[class=dropdown] summary:focus-visible,body>header .container nav details[class=dropdown] summary:hover {
    color: var(--pico-secondary-hover)
}

body>header .container nav details[class=dropdown] summary:focus {
    border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
    box-shadow: none
}

body>header .container nav details[class=dropdown] summary:focus-visible {
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus)
}

body>header .container nav details[class=dropdown] summary:after {
    transform: rotate(0) translate(.2rem) translateY(.0625rem)
}

body>header .container nav details[class=dropdown] ul li a svg {
    stroke: var(--pico-current-version-checkmark);
    margin-left: .25rem;
    transform: scale(.75)
}

[kvij]

Somehow I completely missed the body>header .container styling when inspecting everything. This is indeed where the magic happens.

Thank you for taking the time to answer! I've been out of front-end for a while and it is been quite frustrating. I'm sorry that bled trough in my question.

[dday9]

Mais that’s fine! I’m glad it solves your issue.