xz / new.css Goto Github PK

Just a suggestion...

https://codepen.io/xcartmods/pen/OJyYBoN

Some code is duplicated in https://github.com/xz/new.css/wiki/Customizing-Themes/044527198ec26b1b633a06a7c6655ac8840dffd0#usage :

<link rel="stylesheet" href="<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">">

From the demo page: https://newcss.net/usage/elements/

The instructions for a link button:

A "button" can't be wrapped in an anchor element.
This use doesn't pass HTML validators.

new.min.css and lite.css are auto-generated based on new.css so they should not be part of the source but provided as artifacts via releases.

Light mode:

Night mode:

The background of <blockquote> is too dark in dark mode.

How should I be avoiding something like

with https://s.natalian.org/2021-08-10/scalable-prom.svg in the page? Set the background of the image?

Making an Issue first since I'd like to bikeshed gather opinions on where in the stack to put it.

As of this writing, the --nc-font-mono stack is this:

--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

I tried viewing this on my iPad, and I got Courier (New?). Since the rest of new.css uses nice, modern sans-serif fonts, it stuck out like a sore thumb.

Happily, changing the font stack to

    --nc-font-mono: ui-monospace, Consolas, Monaco, "Ubuntu Mono",  "Liberation Mono", "Courier New", Courier, monospace;

made it so I got .AppleSystemUIFontMonospaced (SF Mono). This looks way better on my iPad.

I suggest putting ui-monospace right before Monaco, so the line reads:

	--nc-font-mono: Consolas, ui-monospace, Monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

My rationale:

1. Monaco is a Mac OS/OS X/macOS-only font.
2. Monaco has only one weight and one style: Normal. No bold, no italic, no bold italic. As much as I like Monaco as a typeface, it's not a good font.
3. The last version of Safari to support only Monaco and not ui-monospace was superseded in March of 2020.
4. Chrome and Firefox on macOS will still pick up Monaco, which is still better than any Courier font in most cases.

Thoughts?

(Also, I'd properly capitalize Monaco in passing, but that's much less important.)

On the Customizing Themes page in the Wiki on the very bottom, there is a mistake in the CSS-Import in the example code.

On Safari 13.0.4, the following is rendered on newcss.net:

Also on Chromium (78.0.3882.0) / Default Chrome:

Comparing this to Firefox (76.0.1):

I think Firefox is how it's supposed to look.

To complement the <header> you can create, why not add some basic styling for a <footer> that must be at the bottom of the body, which makes a slightly darker footer that sticks to the bottom of the window? A sticky footer is one of those boilerplate bits of code that would be nice to have if a header is already there. It should have identical styling to the header.

Problem

You can easily reproduce this by running Lighthouse against the demo page @ https://newcss.net/.

In the report, under Accessibility -> Contrast, you will see this message:

Background and foreground colors do not have a sufficient contrast ratio.
Low-contrast text is difficult or impossible for many users to read. Learn more.

"Learn more" links to https://web.dev/color-contrast/

Below that we see a list of the failing elements. They are all the <a> elements within the <header> element.

So the color for <a> elements is fine against the body background color, but not dark enough against the header background.

Workaround

To fix this locally in my project, I override this new.css css rule:

a {
    color: var(--nc-lk-1);
}

with this custom css rule:

a {
    color: var(--nc-lk-2);
}

But I think this makes it less pretty.

Suggested solution

Unfortunately, I'm not really sure what a good solution would be, since I'm not much of a designer, but I thought I would bring up the issue at least.

Off-topic comments

Thanks for the sweet css framework! I'm really enjoying it! <3

https://css.github.io/csso/csso.html

You might be using a normal online minifier.

Alphabetical order makes more sense, or just about any country actually does

thanks! theme is otherwise perfect.

When working on my first PR I was uncertain, if I needed to manually adapt the minified files or not.

Maybe document the release process and add a CONTRIBUTING.md file. Here's a good template: https://gist.github.com/PurpleBooth/b24679402957c63ec426

Thanks for creating and sharing new.cs!

There's a issue on https://newcss.net/usage. The code that you're supposed to copy to add new.css to your website is invisible. Here's what it looks like in Chrome:

By inspecting the page, I saw that the two links are not quoted text, which the HTML in 1. is, and I think it might be the issue.

Is this supposed to work in IE11?

The body has a confusing font-size of 1.03rem.

Given that most browsers have a base font-size of 16px, we end up with a font-size of 16.43px. This seems like an odd choice, especially on normal-density screens.

What is the rational behind this value?
If this has a reason, could you add a comment?

Would it be out of the scope of this project to add a sidebar?

It may be fixed on the left, to always show navigation between pages.

Hello,

I like this classless CSS framework a lot! Any plans about publishing it on NPM? In this way devs might use more standard ways to add this CSS to their workflow

Thanks for this great framework!

I wrote a simple python converter from a plain markdown to an html with new.css. Just for your information 😄

https://github.com/matsui528/markdown2newcss

i'd love to know if there's a matrix alternative to the discord server listed in README.md

I assume it'll be easy enough to tweak - simply add a new variable.

Would you like a pull request, or is this not something you are interested in?

Is the site/nav supposed to look like this?

At the very least there's an error with header's margin:

Chrome/81.0.4044.138 (Macintosh; Intel Mac OS X 10_15_3)

Description

When the web browser is in "dark" mode, the calendar icon on the right side of the date input is barely visible, as shown here:

The issue is not present when the web browser is in "light" mode, as shown here:

To reproduce

1. Configure your computer so that apps use their "dark" mode by default.

   

2. Use a web browser to visit the official new.css demo site: https://newcss.net/demo/

3. Use the web browser's Developer Tools to edit an existing <input ... /> element so its type attribute has a value of date. For example:

   - <input type="email" name="email" required="">
   + <input type="date" name="email" required="">

   

4. See that the calendar icon in the date input field is barely visible.

Environment information:

• OS: Windows 10
• Browser: Brave Version 1.36.116 Chromium: 99.0.4844.74 (Official Build) (64-bit)

Based upon what I see in the demo site's HTML source code (excerpt shown below), I think it is using new.css version 1.1.2:

<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/inter.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css">
</head>

By default, all input elements have a 12px left-right padding:

textarea,
select,
input {
	padding: 6px 12px;
	...
}

For an <input type="range" ... this causes an issue (at least in Chrome 83) with incorrectly rendering the input:

Min value:

Mid value:

Max value:

Without the left-right padding, the input is rendered correctly.

Maybe it is opinionated but i find this very disturbing.

I wanted to make an open discussion about if default browser styles should be integrated/used to reduce the amount of CSS or giving more focus on setting the styles for each browser the same.

1. Adding appearance: none to all form elements and updates the styles for each property e.g. border, box-shadow, outline, etc. Therefore the elements could be customized even more.
2. Just adding missing properties to override browser defaults

Screenshot from iPhone in Safari

this is unclear in the doc. Thanks.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fnewcss.net%2F reports duplicate use of the usage id attribute for an h2 and an h3 as well as invalid values for the width attribute.

Additionally, for the demo page validation ( https://validator.w3.org/nu/?doc=https%3A%2F%2Fnewcss.net%2Fdemo%2F ), there is an error with the placement of the tbody tag.

Hi, in new.css#L41
maybe you should replace this:

• | --nc-ac-tx: var(--nc--dac-tx);
  with this:

• | --nc-ac-tx: var(--nc-d-ac-tx);

new.css#L39
this:

• | --nc-lk-tx: var(--nc--dlk-tx);
  with this:

• | --nc-ac-tx: var(--nc-d-lk-tx);

I almost didn’t notice the form fields in the demo. When the form fields are not focussed in the browser they have no outline/border and are only distinguished from the website by their background colour. But the element background colour is extremely close to the page background colour.

There should be some form of form element indication in place at a higher contrast. Possibly just the border around it.

accent-color property is still not fully supported, but this will be pretty neat feature. It will change background color of checkboxes and radios to the theme color.

Read more on mdn

Can I use

https://natalian.org/2020/06/09/Games_for_a_four_year_old/

Not sure why this is happening to score:

Night and Terminal themes are currently not working, or at least they don't work for me, what I did was pasting <link rel="stylesheet" href="https://newcss.net/theme/night.css"> inside <head>,
default theme does work though

When you use an example as shown in https://newcss.net/usage/elements/:

<a href="https://example.com">
  <button>Click me!</button>
</a>

The text in the buttons are the same color as background in night mode.

Grids are Great components in web.
New.css needs a grid.
but grid needs classes. We need to add some classes for grid.

Grid is based on 4 css techniques.

• css tables
• css floats
• css flex
• css grid

Can I make a PR

What would be the right way to add a sidebar to this? I find this css refreshing and clean for docs, but docs should have a sidebar.

I think

In LICENSE, we have the copyright owner as "Example".

Shouldn't it be "bdn"?

I suggest to highlight these tags.

Bootstrap 3 used this style to add a cursor and a bottom border:

abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #999999;
}