๐ Hi, Iโm @jenil
jenil / chota Goto Github PK
View Code? Open in Web Editor NEWA micro (3kb) CSS framework
Home Page: https://jenil.github.io/chota/
License: MIT License
A micro (3kb) CSS framework
Home Page: https://jenil.github.io/chota/
License: MIT License
๐ Hi, Iโm @jenil
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.
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%
}
}
Please include browser support for this framework
thanks
--bg-primary is used but never defined.
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.
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.
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.
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!
names for col
names for hide
It's needed between hide-md and hide-lg that hides the element for screens >= 600px and < 900px, isn't it?
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);
}
<!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>
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.
https://jenil.github.io/chota/#docs
it just serves raw code, not a webpage
Sometimes 100% width columns on the screens <600 are not needed. Add a .col-N-xs
class to override this rule in this cases.
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.
Hey. No more Updates for this Project? ๐ต
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).
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?
Mentioned here
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
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
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>
It would be nice if users could customize the font used for <code></code>
tags. Other than that, thanks for the great project!
Why forcing the scrollbar width on all elements ?
On macOS, scrollbars are pretty neat and appealing, but on Windows, you have something like this
And even worse looking in the dark theme
So I want to add custom scrollbar (using CSS only of course).
Scrollbar may use --color-lightGrey
as an accent color
Or --color-primary
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.
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
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.
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.
it's good libarary but it does not have padding and margin classes .
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
The name of this framework in Argentina literally means dick. I would consider changing it.
Best regards.
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);
}
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?
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.
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
?
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.
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.
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.
hi
please add accent-color for inputs
my Recomended code
input {
accent-color:var(--color-primary)
}
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);
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!
in safari navigate to this section https://jenil.github.io/chota/#buttons
hover over any button
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.
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;
}
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.
Hello,
i think your framework will be much more smaller width grid layout ?!
Thanks for your work.
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.