emareg / classlesscss Goto Github PK

LOVE IT!!! ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 🥇 💯 💯💯💯 #3000 ;p ;) xx ;p !!! :P :) Xxx ;p!! :P ;) :)XXx!!

Maybe padding should be reduced on small device where nav is on the left.
Something like:

@media (max-width:40rem) {
    nav ul:first-child > li {
        padding:0 0 0 0.6rem;
    }
}

If there is <span> element, then float works.

But If there isn't <span> element, then float doesn't work.

I temporarily fixed it removed :not(:only-child).

Why was this :not(:only-child) selector added?

I doubt you will work on it but Dark theme would need some improvement for input boxes as they are white. Currently output from Dark Reader Chrome plugin applied on Light theme looks better (IMO) than dark theme in Classless and it will paint inputs black as well.

Yeah, and thanks for this CSS template! I tried multiple ones including Vuetify and yours is the best. IMO also best from all Classless templates available.

Dark reader plugin:

I'm generating HTML from markdown. I've recently upgraded from an old version of classless and it now seems I need to wrap an image tag into a <figure> tag to make it scale correctly. I'd prefer to now interfere with how the markdown is rendered to HTML. For now, it just puts an <img< tag into the page. You can see the result here: https://rugpullindex.com/blog#March152021

I was able to fix the problem myself for now by adding the following as a global style img { max-width: 100%}.

I have a site designed with classless.css and it's working smoothly in general. The one exception is that the moblie media queries seem too general to accommodate edge-case devices like the iphone 12 mini. In particular, the iphone 12 mini gets drop down menus in the nav no matter how narrow I make the single line content within the nav. I think this stems from these media queries:

media (max-width: 40rem) {
    nav ul:first-child > li:first-child:after { content: " \25BE"; }
    nav ul:first-child > li:not(:first-child):not(.sticky) { display: none; }
    nav ul:first-child:hover > li:not(:first-child):not(.sticky) { display: block; float: none !important; }
}

being too wide for the iphone 12 mini.

So, if I understand correctly 40rem translates to 640px, meaning this media query gets invoked for the iphone 12 mini resulting in drop-down menus with the black down small triangle and such when the width of the content is actually well within the 360 px width of the iphone 12 mini, or 22.5rem.

https://www.webmobilefirst.com/en/devices/apple-iphone-12-mini/

This works for me:

diff --git a/static/css/classless.css b/static/css/classless.css
index a39d75f..bc51052 100644
--- a/static/css/classless.css
+++ b/static/css/classless.css
@@ -235,7 +235,7 @@ nav ul > li > ul {
 }
 nav ul > li > ul > li { white-space: nowrap; }
 nav ul > li:hover > ul { display: block; }
-@media (max-width: 40rem) {
+@media (max-width: 22.5rem) {
        nav ul:first-child > li:first-child:after { content: " \25BE"; }
        nav ul:first-child > li:not(:first-child):not(.sticky) { display: none; }
        nav ul:first-child:hover > li:not(:first-child):not(.sticky) { display: block; float: none !important; }

Is the project open to pull requests around these issues?

I likely don't have the design chops to get this right for every mobile device though the mini is an outlier - most devices seem huge by comparison. I'm not sure what the right answer is as there doesn't seem to be consensus on the wild variety of media queries to target this or similar devices. I just wanted to point out that this part of the mobile spectrum is not handled well by the existing media queries in classless.css, resulting in less usable design choices. An option to prefer desktop rendering would be an option here though I'm not sure what the right implementation is.

I can probably override this in my local styles.css but I ran into some trouble nullifying the media query above.

On pages with little content, the footer ist not a real footer, just an element in the middle of the screen with margin-top: 10rem.

This codepen offers a solution to make it a real footer: https://codepen.io/cbracco/pen/kQmVGM (Not my code, btw. thx to the maker.)
It doesn't work as general solution, because big footers need a bigger padding-bottom for the body. But still, maybe we can find something to make the footer always a real footer?

(I am not a css expert, that's why I love this project so much ;) )

Go to classless.de on your mobile phone and expand the navigation by clicking somewhere near the caret sign ^.
You'll find that the navigation expands and shows all items. However, it's not possible to "close" or roll up the navigation anymore by again clicking the caret.

IMO, it's generally a mobile website user's expectation that such a kind of mechanism can be opened and closed.

I'm happy to send a PR if this is acknowledged as a problem/bug.

In chromium, the

why are most classless example look so thin?

how do i make it at least as wide as 58.com or something?

As noted in recent articles the use of Google Fonts could lead to GDPR concerns.

It may be worth us seeing if we can locally host the fonts for Open Sans, or at least making it configurable, if at all possible?

I find it odd to have to use classes for these functions.
Maybe get some "inspiration" ;-) from https://github.com/vladocar/Basic.css, using sections seems logical to me.

In a previous issue #8, I helped add tool tips as I had a problem with users not understanding my website.
A problem that was discussed in that issue, was that tool tips are essentially useless for any kind of touch-input device.

On my website, it turned out to be that way too. I doubt any user is really clicking on tooltips for more information.
But I kept on wondering what is the best UI modality that works both on desktop and mobile.

And then the other day it hit me when I was browsing another website. It's these ⓘ icons. And ideally, for mobile, they simply act as a button and e.g. open a modal.

So a few questions to push this further:

• I doubt that there's a chance we can add this type of functionality without JS or can we?
• Could we just have the "i" icon and with a :hover tag that opens a tooltip?
• Are we generally interested in this element?
• From a HTML tag perspective, which tag would fit best?

I like this classless style because it's go further than others with a responsive navbar, tabbox for example.
I wonder if a hamburger sidebar will be out of scope ?
Same with a modal dialog maybe.

If it's out of scope, any advice will be welcome.

Thanks for the good works !

Use the CSS @import url() to include the font in the CSS directly.

Hi all,
I know HTML/CSS quite little, I've tried to make this working on a simple page of mine, but with no luck. I've crafted something as simple as:

<!DOCTYPE html>
<html data-theme='medium'>
	<head>
		<link id="maincss" rel="stylesheet" href="https://classless.de/addons/themes.css"></link>
	</head>
	<body vocab="http://schema.org/" prefix = "edam: http://edamontology.org/ bioschema: http://bioschemas.org/ ncbitax: http://purl.obolibrary.org/obo/NCBITaxon_ wp: https://en.wikipedia.org/wiki/">
		<script language="javascript">
			window.onload = function(e) { 
				console.log ( "changing theme" );
				document.documentElement.setAttribute ( "data-theme", "medium" );
			}
		</script>		
...

Initially, I was only trying html.data-theme, then I've added the load handler, but none worked, the log message is printed, but the page remains bare blank. I need the extra attributes in body since this is a page with schema.org annotations. Despite it being a proof-of-concept for a job meeting, I'd like to add a minimum of nice graphics via a classless theme.

Thanks in advance for any help.

Hey, my project https://rugpullindex.com has been using your classless library since a while now. I like it. But now I need tooltips, so I thought I add them using css attributes. See gif below.

Are you interested in this functionality? If so I can send a PR.

¹: we import the font 'Open Sans' but if it fails, we fallback to Helvetica.

I’m seeing Arial as the fallback before sans-serif. Is that because of sans-serif is Helvetica on some browsers but Arial is the default for many browsers?