selekkt / skelet Goto Github PK
View Code? Open in Web Editor NEWSkelet.css a contemporary CSS framework. The basics to get started.
Home Page: https://selekkt.dk/skelet/v3/
License: MIT License
Skelet.css a contemporary CSS framework. The basics to get started.
Home Page: https://selekkt.dk/skelet/v3/
License: MIT License
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>
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?
regarding my site atacan.gitlab.io
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.
class="intro"
so I did the landing screen myself. Is it because of that?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?
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.
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. :)
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?
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?
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.
Not everyone want to use "fancy" scrollbar. Is there any way to revert back to browser's native scrollbar design.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.