jenil / chota

A micro (3kb) CSS framework

👋 Hi, I’m @jenil

chota's Issues

RTL Support

first, thank you for this great project

I think this beautiful design should be available for Arabic Persian and Hebrew mean "RTL layout support", I have made edits on my project to make Chota support RTL, but if that be official it will be nice.

Deprecation warning in Chrome

Hi,
I am getting a deprecation warning in Chrome.
[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

Seems like the arrow-down SVG has "fill='#555'" attribute which is causing this issue.
As said in the warning message, requesting you to replace # with %23 .
Thanks in advance.
Nice 'Chota' project. Keep up the good work.

Importing Chota core from CDN using CSS @import does not work

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/chota@latest">

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.

Customization for the media query breakpoints would be great

First of all, love this project! Thanks for the work you've put into it.

However, one issue I've run across is using chota for a chrome extension. Trying to keep the width 400-500 pixels which I find myself having to manually override many of the media queries you have hard coded. Having some variables like --breakpoint-small --breakpoint-medium --breakpoint-large or something similar where we can control the breakpoints would be very helpful!

Here's an example of a media query getting in my way

@media screen and (max-width: 599px) {
    .container {
        width:100%
    }

    .col,[class*=col-],[class^=col-] {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 100%;
        flex: 0 1 100%; // this lil bugger
        max-width: 100%
    }
}

preprocessor?

Is this Project dead?

Hey. No more Updates for this Project? 🌵

Unfortunate name

The name of this framework in Argentina literally means dick. I would consider changing it.

Best regards.

Grid layout

Hello,
i think your framework will be much more smaller width grid layout ?!

Thanks for your work.

Button element 'font-family' diverges from a[role=button] or a[class=button] on Chrome

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.

no margin and padding

it's good libarary but it does not have padding and margin classes .

Footer is not centered in github.io documentation page

Reference: https://github.com/jenil/chota/blob/master/docs/index.html#L178

The footer uses the is-text-center class, which doesn't exist and has no effect on the page. I assume the intended class is text-center which would make the footer look much more standard. Currently the footer text is aligned to the left instead of being centered.

set accent-color for input

hi
please add accent-color for inputs
my Recomended code

input {
accent-color:var(--color-primary)
}

Is first-mobile?

bug with Safari links-button classes and hover interaction

in safari navigate to this section https://jenil.github.io/chota/#buttons

hover over any button

Does it support ie9

Please include browser support for this framework
thanks

Update NPM version?

Hey @jenil . I am currently using v0.7.2 using RawGit (which is in it's sunset phase) because I need the --font-family-mono option. Would it be possible to update the NPM package so that I can use jsDelivr or unpkg?

Thank you

outlined buttons are larger than their non-outlined counterparts

With static content that's not an issue but I got some jumping buttons in edge-cases, where 2pixels make the difference if some buttons are on the same line or on separate lines.

I think this can be easily mitigated using box-shadow instead of border for .outline. Right now, I'm using the following dirty fix.

.button.outline { 
    border: 0px;
    box-shadow: inset 0 0 0 1px var(--color-lightGrey);
}

.button.primary.outline {
    border: 0px;
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

Grid Layout Overflow Problem

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.

Custom scrollbar

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.

Accessibility: Don't force scrollbar-width: thin;

Why forcing the scrollbar width on all elements ?

Full width tabs

Full-width tab links need to take width if available.

Current

Expected

needs flex: 1 1 auto;

Property mismatch

In the following code display: -webkit-inline-box; mismatch with the inline-flex.

.button.icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

Use a linter or IDE

Hi,

I opened the CSS file in my IDE (phpStorm) and the IDE directly found mistakes in the code. May be worth tried a similar tool, or use some linter. A linter can be added in the GitHub Action to check pull request.

[feature] Customize code font as a variable

It would be nice if users could customize the font used for <code></code> tags. Other than that, thanks for the great project!

is-full-height

Would it be an idea to add is-full-height with height: 100%?

This allows you to have a .row with multiple cards and they all fill their parent in case your content is not the same length.

remove font-size: 62.5% hack

For reasons given by user @lcech on a comment on the blog post Respecting Font Size Preferences: Rems and 62.5% Base Font Size:

This is a good idea, unless it isn't. E.g. when you don't have 100% control over all the CSS on your website. Think of 3rd party components (e.g. cookie consents so popular these days, online chats, etc.), libraries like Bootstrap etc. - these sometimes expect that the root font-size is somewhat reasobanle and therefore use rem as well. But if you change the root font-size, suddenly those 3rd party components act accordingly.

It seems likely to me that the use case where Chota has to play nicely with at least some other non-user-defined CSS is going to be much more common than the use case where it doesn't.

If modifying the base library isn't feasible or desirable, perhaps an alternative build could be provided that simply divides all rem values by 1.6?

col inside col?

Hi! I want to make a navbar with background, and I used 1 col for each anchor, but I don't like the gaps between cols. I tried to put multiple <div class='col'><a>anchor</a></div> inside a <div class='col-6'>, but it didn't seem to work, the navbar was displayed vertically inside of horizontally. Is there a way to remove the gap between cols? Thanks!

Add `.col-N-xs` class for responsive grid

Sometimes 100% width columns on the screens <600 are not needed. Add a .col-N-xs class to override this rule in this cases.

how to hide if width < 900px

names for col

• All columns are 100% for device width < 600px
• .col and .col-N for all device sizes >= 600px
• .col-N-md for >= 900px sizes
• .col-N-lg for >= 1200px sizes

names for hide

• hide-sm - hides the element for screens <600px
• hide-md - hides the element for screens >=600px and <=1200px
• hide-lg - hides the element for screens >=1200px

It's needed between hide-md and hide-lg that hides the element for screens >= 600px and < 900px, isn't it?

Dropdown menus / button list

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

Don't use browser prefix

I was going to open an issue with "don't use browser prefix when unnecessary" as I encounter things like -webkit-box-flex: 0;.

But really I don't think prefix is necessary for this project.

Input's style should match the color theme

Hello! I'm using the dark theme in a project with the variables introduced in PR #50. But the inputs look weird beeing always white.

It would be nice if the color and background color of the inputs matched the theme. I've managed to do this adding these two lines in the input's rule:

color: var(--font-color);
background-color: var(--bg-color);

Do you know what `chota` means in spanish?

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!

errors in documentation

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.

Don't you want to detect what color scheme the user has requested?

Does it make sense to you, if initially, the values of custom properties would reflect the color scheme which the user prefers (dark or light theme)?

---

This feature is CSS-based and almost all browsers, that you currently support, support this functionality, except for Edge (supports only from version 79) and IE. There it will have no effect.

Make navbar look nicer on mobile

Hi, first of all, I would like to say thank you for developing this framework. It makes all of this front-end stuff a lot easier for back-end guys like me.

My only slight problem is that, when on mobile, the navbar tends to look very squished. Forgive me if this is a problem with the way I'm doing things, but is there a way to fix this?

My site is here, and here are some screenshots.

Desktop

Mobile

TIP: Masonry layout

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?

Rename .tag Class as it breaks WordPress Tags Archives

Chota CSS uses .tag in CSS to style tags component

.tag {
  display: inline-block;
  border: 1px solid var(--color-lightGrey);
  text-transform: uppercase;
  color: var(--color-grey);
  padding: 0.5rem;
  line-height: 1;
  letter-spacing: 0.5px;
}
.tag.is-small {
  padding: 0.4rem;
  font-size: 0.75em;
}
.tag.is-large {
  padding: 0.7rem;
  font-size: 1.125em;
}
.tag+.tag {
  margin-left: 1rem;
}

WordPress generates tag class in body in Tag archives by default
<body class="archive tag tag-tutorials tag-49 logged-in wp-embed-responsive" >

This means that the tag class gets applied to the entire tag archives and breaks my site.

Request to rename .tag to some other class so it can work plug and play in WordPress

A11y: A form label must be associated with a control.

I am getting this error when including Chota in svelte with Routify:

{
  code: 'a11y-label-has-associated-control',
  message: 'A11y: A form label must be associated with a control.',
  frame: '36: <div class:nomessage={!message} use:events {...$$restProps}>\n' +
    '37:   {#if label}\n' +
    '38:     <label>{label}</label>\n' +
    '        ^\n' +
    '39:   {/if}\n' +
    '40:   <p class:grouped class:gapless><slot/></p>',
  start: { line: 38, column: 2, character: 815 },
  end: { line: 38, column: 24, character: 837 },
  pos: 815,
  filename: '/Users/mrw/git/ntbl/spa/node_modules/svelte-chota/cmp/Field.svelte',
  toString: [Function: toString]
}

I suggest having a look at https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md about what can be done.

[Feature Request] bigger and smaller text

My proposal is to add theese classes to utilites:

 .text-sm {
    font-size: calc(var(--font-size) * 0.8);
  }

  .text-lg {
    font-size: calc(var(--font-size) * 1.2);
  }

your demo link doesn't work

https://jenil.github.io/chota/#docs

it just serves raw code, not a webpage

Selected option does not show on Firefox on Linux

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.

Variable --bg-primary is not defined

--bg-primary is used but never defined.

Extend .gitignore for the sake of easier contribution

Hi, @jenil! First of all, thanks for such comfortable to work with framework!
I am currently trying it out and also plan to contribute if my additions would be useful and relevant of course (I want to bring native custom scrollbars and a particular accessibility feature btw)
So for the sake of easier contribution could you extend .gitignore?
Something like this would be great in my opinion.

node_modules
_site
*.lock
.jekyll-cache
.idea
.vscode
package-lock.json

It's a minor thing, but different people use different tools. For example a lot of developers prefer JetBrains IDEs instead of VSCode in Russia or someone wants to use more familiar npm instead of yarn.
So PRs would be a bit cleaner without unnecessary files and folder.

[Feature Request] Supporting grid column sizes for various device sizes

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 name...

Saw this and like it a lot! But the name in latin-american countries has terrible meanings... http://www.asihablamos.com/word/palabra/Chota.php

Center elements in full screen

Hello,
How can i center several elements, in my case a p and h1 tag in full screen?
Trying different Chota-classes, but nothing do the right thing.
When using is-center then it displays the components 'inline':

That's my code:

<div id="app" class="is-full-screen">
    <div class="row is-full-screen">
      <div class="col is-center">
        <h1 class="">Test app</h1>
        <p class=""><a href="#" class="button">Bestel online</a></p>
      </div>
    </div>
  </div>

Add "mentioned in awesome" readme badge

Mentioned here

See https://github.com/b3u/chota/tree/b3u/badges

`.nav a and .nav .brand` should not have a fixed color

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?

form with horizontal fields can't display inline

<!doctype html><html><head><meta charset='utf-8' />

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

 </head><body>
 
 
<div class="container" >
<div class="row">
  <div class="col">  
  
  <form >
<br><label> title </label>
<input name="title" />
<br><label> choice </label>
<input type="checkbox"  name="lang[]"  value="es5"> es5
<input type="checkbox"  name="lang[]"  value="es6"> es6
<br><label> content </label>
<textarea  rows="15"   ></textarea>
</form>

  </div></div></div> </body></html>