A micro (3kb) CSS framework

Hey! I don't intend to be a troll here, just informative. Maybe you already know, but in the "Rio de la Plata" at least (basically, Uruguay and Argentina), chota is a quite popular slung for referring to the male sexual organ. I'm pretty sure that all the other spanish speaking countries will understand the same for that word. That's actually quite funny (specially because is "really small" haha), but also something you should consider in case you want to make your lib mainstream. Bests!

Added a row-reverse class that allows reversing the direction of rows & hence the stack order.

Right now the following layout is impossible:

Desktop 

+-------+-------+
| Text  | Image |
+-------+-------+
| Image | Text  |
+-------+-------+

Mobile

+-------+
| Text  |
+-------+
| Image |
+-------+
| Text  |
+-------+
| Image |
+-------+

Adding a .row-reverse class allows you to flip the direction of columns on desktops, whilst still stacking up correctly (text above image) on mobile.

An example that implements the above layout:

<div class="row row-reverse">
  <div class="col-6">
    <div>Image</div>
  </div>
  <div class="col-6">
    <div>Text</div>
  </div>
</div>

<div class="row">
  <div class="col-6">
    <div>Image</div>
  </div>
  <div class="col-6">
    <div>Text</div>
  </div>
</div>

Note: The docs include chota.css from unpkgd instead of the project dist/ so the docs don't reflect the new built I've made that includes this change.

There's a bug when switching from a <a> element to a <button> element caused by the button element not having font-family defined (defaults to Arial in my browser).

Browser: Google Chrome v76.0.3809.100 OS: Windows 10 OS Version 1803

To reproduce you just have to compare css of an element of type:

<a class="button primary">Submit</a>

With the same as a button:

<button class="button primary" type="submit">Register</button>

The element's css has a 'user agent stylesheet' that defines its font as the following:

font: 400 13.3333px Arial;

The element's css has its font defined at body normally, this is where the divergence comes from.

This can be even observed at this demo's link.

Proposed fix (also including font-size and letter-spacing, which is also necessary)

.button {
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    font-family: var(--font-family);
    font-size: var(--font-size);
    letter-spacing: .01em;
}

Disclaimer: I have not checked other browsers's behaviour.

This project could benefit from a dropdown component like this I think: https://codepen.io/connorbrassington/pen/raNrEW (not mine, just a random example I found).

The Grid Layout should be usable without a container (e.g. .container) / defined parent width as well. Otherwise the row is wider than 100% of the body and creates a horizontal scrollbar. I would recommend adding .row { max-width:100%; } then this Problem doesn't appear anymore.

Short demonstration what I mean: https://i.imgur.com/q4PR6nc.gif

It works on Chromium. I use arch linux with newest firefox. Haven't tested other operating systems.

Currently chota do not support column sizes for various device sizes, mobile(sm), tablet(md), desktop(xl). This can be achieved with small effort and will be a useful feature

The docs show the "quick start" method of using Chota without installing locally, by referring to the CSS file on a CDN-

<link rel="stylesheet" href="https://unpkg.com/[email protected]">

When I tried to do the same thing by using an @import statement at the head of my local CSS file, I could not get it to work.

Having done some searching on the net, I found a similar issue discussed here-

The discussion on Stackexchange indcates that the issues is caused by the CDN delivering the CSS file with the wrong MIME type (in their case as text/plain instead of text/css). I have not been able to verify that this is what's happening with Chota, but something similar seems likely.

On macOS, scrollbars are pretty neat and appealing, but on Windows, you have something like this

• https://prnt.sc/v6u9z1 (chrome)
• https://prnt.sc/v6udxc (firefox)

And even worse looking in the dark theme

• https://prnt.sc/v6uegp (chrome)
• https://prnt.sc/v6uesf (firefox)

So I want to add custom scrollbar (using CSS only of course). Scrollbar may use --color-lightGrey as an accent color

• https://prnt.sc/v6ugwv
• https://prnt.sc/v6uhzi

Or --color-primary

• https://prnt.sc/v6uik3
• https://prnt.sc/v6uiqr

Scrollbar obviously would change color scheme based on values of custom properties. It's pretty cool too IMO.

Almost all browsers, that you currently support, support this functionality, except for Edge (supports only from version 79) and IE. Scrollbars would have a default look there.

Also, this addition will not significantly affect the library size.

This PR add support for the .grouped.gapless class that allow to group elements (input, select, button ...)

Preview

<kbd>button</kbd>:
<div>
	<button class=button>Left</button>
	<button class=button>Center</button>
	<button class=button>Right</button>
</div>

<kbd>.grouped > button</kbd>:
<div class="grouped">
	<button class=button>Left</button>
	<button class=button>Center</button>
	<button class=button>Right</button>
</div>
<kbd>.grouped.gapless > .button.icon-only</kbd>:
<div class="grouped gapless">
	<button class="button icon-only"><img src="https://icongr.am/clarity/align-left-text.svg?size=18"></button>
	<button class="button icon-only"><img src="https://icongr.am/clarity/center-text.svg?size=18"></button>
	<button class="button icon-only"><img src="https://icongr.am/clarity/align-right-text.svg?size=18"></button>
</div>
<kbd>.grouped.gapless > .button.outline.primary</kbd>:
<div class="grouped gapless">
	<a class="button icon-only outline">&laquo;</a>
	<a class="button icon-only outline">1</a>
	<a class="button icon-only outline">2</a>
	<a class="button icon-only outline primary">3</a>
	<a class="button icon-only outline">4</a>
	<a class="button icon-only outline">&raquo;</a>
</div>
<kbd>.grouped.gapless > .col-2</kbd>:
<form class="grouped gapless">
	<select class=col-2>
		<option>Track
		<option>Artist
		<option>Playlist
	</select>
	<input type=search placeholder=search>
	<input type=submit>
</form>

Shouldn't the color property of .nav a, .nav .brand be depending on previously defined variables? Maybe use color: var(--color-darkGrey); like it's used for .tabs > a?

in safari 16.2 (latest) the radio buttons of the demo page are truncated:

for the height: 1.6rem; the width has to be at least 1.9rem to fit.

i was wondering if a "full on" css approach would be a good idea to unify the look in all major browsers? e.g. https://moderncss.dev/pure-css-custom-styled-radio-buttons/

Adding this code-snippet to a row:

.row {
  flex-direction: column;
  max-height: 1000px;
}

It works only between the fixed height. Someone knows how made a masonry-layout in Chota without the fixed height?

Bumps minimatch from 3.0.4 to 3.1.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

The grid system is a fluid system, Description for the grid system the describe the size of columns by .col-n but when you have mention that Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use .col-4 either if you want 3 columns out of 12. use col-4. If this typing mistake then i can resolve this issue.

Bumps commonmarker from 0.23.5 to 0.23.6.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.