selekkt / skelet

Skelet.css a contemporary CSS framework. The basics to get started.

Skelet.css — a contemporary CSS framework that combines modern design principles with a forward-thinking approach.

Lightweight and easy to use. You can get started quickly by using the included HTML5 template or by including the CSS file in your project.

The benefits of using Skelet.css:

• Solid foundation: Skelet.css provides a solid foundation for your next project, so you can focus on creating great web designs.
• Modern design: Skelet.css uses modern design principles to create a clean and responsive user interface.
• Forward-thinking approach: Skelet.css is constantly being updated to keep up with the latest trends in web design and CSS standards.

If you're looking for a modern, lightweight, and easy-to-use CSS framework, Skelet.css is a great option.

Get started

via ZIP

1. DOWNLOAD ↓ Skelet.
2. Unzip skelet-master.zip
3. Files to pay attenion to:
   • skelet.html = HTML5 boilerplate
   • css/skelet.css = CSS framework
   • css/tooltips.css = CSS tooltips

via NPM

npm i selekkt-skelet

via CDN

→ DEV

Use these CDN links only for development; do not use in production, as breaking changes may be introduced at any time with new major versions and break your website.

Unminified

https://cdn.jsdelivr.net/npm/selekkt-skelet@latest/css/skelet.css

Minified

https://cdn.jsdelivr.net/npm/selekkt-skelet@latest/css/skelet.min.css

→ PROD

For production is reccomended to use a specific version from the link below.

CDN for production

→ Development branch: "next"

Future in the making. Where all the new features first appear.

https://cdn.jsdelivr.net/gh/Selekkt/skelet@next/css/skelet.css

Directory structure

This is the dir structure of Skelet.

.
└── skelet/
    ├── css/
    │   ├── skelet.css (CSS framework)
    │   ├── skelet.min.css (Skelet. minified)
    │   └── app.css (is where all of your other CSS goes)
    ├── js/
    │   ├── modules.js (is for all of your JS frameworks)
    │   └── app.js (is where all of your other JS goes)
    ├── img/
    │   ├── logo.png
    │   └── touch.png
    ├── LICENSE
    ├── README.md
    └── skelet.html (HTML5 boilerplate)

Documentation

View the Full Documentation →

View Examples →

---

skelet's Issues

Contrast for links

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?

Custom HTML tags in React JSX?

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?

[docs] Sections repeat themself

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.

Any way to disable ::-webkit-scrollbar-track styling

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

Misnamed box-sizing and white-space properties. Current master and 3.3 release.

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

Screenshot below.

[docs] media query documentation malaligned

Provide NPM package

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. :)

CSS Validator: Invalid Type

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?

Can't make triple column

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?

Section border and cursor

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?

[docs] Section headers feel weird

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

Use prefers-color-scheme over manual selection

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.

Here is my website!

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.

The Grid system is currently limited to columns only

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>