selekkt / skelet Goto Github PK

Not everyone want to use "fancy" scrollbar. Is there any way to revert back to browser's native scrollbar design.

Hi there,

First of, great work! Very useful to quickly start on small projects.

I extracted the skelet.css file to my React project and trying to use it. However, I'm getting these errors.

Any idea how we can change this for better support?

skelet.css seems to have a number of different misspellings that might have been caused by a errant find/replace.

Screenshot below.

Skelet uses a 16-column grid system instead of the regular 12-column one. This gives fewer grid options, since 16 is only divisible by 1, 2, 4 and 8. 12 is divisible by 1, 2, 3, 4 and 6 giving a better range. How can I solve this issue?

The Grid system is currently limited to columns and you can't work with rows making it useless for more complex layouts.

At the moment a layout like this can't be achieved easily.

something like this would be ideal:

  <x-grid columns="10">
    <x-col span="1+2" span-y="1-3">cell 1</x-col>
    <x-col span="3+2">cell 2</x-col>
    <x-col span="5+4">cell 3</x-col>
    <x-col span="9+2">cell 4</x-col>
    <x-col span="3+4">cell 5</x-col>
    <x-col span="7+4" span-y="2-3">cell 6</x-col>
    <x-col span="3-6">cell 7</x-col>
  </x-grid>

This is how much nesting and code you need to achieve the above layout

this is the code

  <x-grid class="debug" style="gap:1px">
      <x-col>
          <x-grid>
              <x-col>grid>cell>grid>cell</x-col>
          </x-grid>
      </x-col>
      <x-col span="2..">
          <x-grid class="debug" style="width:100%; gap:1px">
              <x-col span="1+1">grid>cell>grid>cell</x-col>
              <x-col span="2-3">grid>cell>grid>cell</x-col>
              <x-col span="4..">grid>cell>grid>cell</x-col>
              <x-col span="row">
                  <x-grid columns="2" class="debug" style="width:100%; gap:1px">
                      <x-col>
                          <x-grid class="debug" style="width:100%; gap:1px">
                              <x-col span="row">grid>cell>grid>cell>grid>cell>grid>cell</x-col>
                              <x-col span="row">grid>cell>grid>cell>grid>cell>grid>cell</x-col>
                          </x-grid>
                      </x-col>
                      <x-col>grid>cell>grid>cell>grid>cell</x-col>
                  </x-grid>
              </x-col>
          </x-grid>
      </x-col>
  </x-grid>

hi

Would it be possible for you to package your work also as npm package?
This would make it much easier to install the css lib into an existing Javascript/Typescript project.

Thanks. :)

The Section headers turn my cursor into an unexpected resizing look, also the "#" link is a bit out of place.

Very impressed with skelet, but noticed when using a couple of browsers based on QT WebEngine (Blink/Chromium), that your documentation site isn't formatted properly.

Using the W3 CSS validator there are issues with selekkt.dk/skelet: https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fselekkt.dk%2Fskelet%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

Any idea what the "Invalid type" errors are about?

Especially in dark mode, I am not sure the contrast between that blue and the dark background is sufficiently accessible.
The code blocks seem to change from blue to green in dark mode, maybe the links should as well?

regarding my site atacan.gitlab.io

1. I don't have any class in the <section>s but when you mouse over the area the cursor turns into a up and down arrow. When you click, it goes to a little below the top of page.

   • I didn't know about class="intro" so I did the landing screen myself. Is it because of that?

2. The horizontal line that is the border of the sections spans the entire screen. In your homepage it has margins from the sides. Why is mine like that?

You created a framework that is exactly what I was looking for. Thank you very much for open-sourcing it.

This is a personal website of me, will be mostly a blog: http://atacan.gitlab.io/
As of now one homepage and three other pages.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Use the query @media (prefers-color-scheme: dark)

I want to use only the CSS but still have adaptive dark mode following user preferences.

When clicking on a section on the website multiple times, it starts repeating itself. Tested in Chromium and Firefox, seems to happen for all sections.