Can you help with this?

➜  csslayout git:(master) npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: csslayout@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^11.1.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.0.0" from @1milligram/[email protected]
npm ERR! node_modules/@1milligram/design
npm ERR!   @1milligram/design@"^0.4.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I just cloned the repo and did npm i then npm run dev-server
windows 10 2004 x64

ERROR in ./client/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in D:\Temp\csslayout\node_modules\@babel\helper-compil
ation-targets\package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (D:\Temp\csslayout\node_modules\@babel\preset-env\lib\debug.js:8:33)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [LvDl] ./node_modules/lodash/lodash.js 530 KiB {0} [built]
    [YuTi] (webpack)/buildin/module.js 497 bytes {0} [built]
    [yLpj] (webpack)/buildin/global.js 472 bytes {0} [built]
    [z0BS] ./node_modules/html-webpack-plugin/lib/loader.js!./client/index.html 910 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js??postcss!vend
ors/[email protected]/theme.min.css:
    Entrypoint mini-css-extract-plugin = *
    [JPst] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {mini-css-extract-plugin} [built]
    [wP9d] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./vendors/[email protected].
0/theme.min.css 1.33 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js??postcss!vend
ors/[email protected]/tailwind.css:
    Entrypoint mini-css-extract-plugin = *
    [JPst] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {mini-css-extract-plugin} [built]
    [P+/v] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./vendors/[email protected]/tai
lwind.css 598 KiB {mini-css-extract-plugin} [built]
i ｢wdm｣: Failed to compile.

Hi

On this page https://csslayout.io/button-with-icon/ it is opening a button tag but its closing with a div tag.

Thanks Arturo Avilés for the feedback:

I found it difficult to explore different layouts because I had click on each, and if I wanted to look to another, I had to return to the one that contains all the layouts every time. Maybe you could try another type of navigation (Maybe if you click on a layout, it should open a big box down with the specific info (If you want to see another, you would only click on the next one, or have the option to "close" that section to view the layouts below.

I like this project! I got a working demo for tooltip: https://codepen.io/hchiam/pen/VwYXgWP?editors=1100

But slider is not working for me out of the box: https://codepen.io/hchiam/pen/YzPaBYQ?editors=1100

Anything I'm doing wrong?

Hi, I'm afraid the Timeline demo is broken. Whenever I open or reload the page, the demo playground keeps growing and growing infinitely keeping me from reaching to the bottom of the article. As a workaround I toggled the height: 100% declaration of the .timeline class. I'm in Chrome btw.

Hello!
I followed the instructions: Clone, Init, run dev-server

Error:

ERROR in ./client/index.tsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in D:\Best_practice\csslayout\node_modules\@babel\helper-compilation-targets\package.json at applyExports (internal/modules/cjs/loader.js:498:9) at resolveExports (internal/modules/cjs/loader.js:514:23) at Function.Module._findPath (internal/modules/cjs/loader.js:642:31) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1017:27) at Function.Module._load (internal/modules/cjs/loader.js:899:27) at Module.require (internal/modules/cjs/loader.js:1090:19) at require (internal/modules/cjs/helpers.js:75:18) at Object.<anonymous> (D:\Best_practice\csslayout\node_modules\@babel\preset-env\lib\debug.js:8:33) at Module._compile (internal/modules/cjs/loader.js:1201:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10) Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = ./index.html [LvDl] ./node_modules/lodash/lodash.js 530 KiB {0} [built] [YuTi] (webpack)/buildin/module.js 497 bytes {0} [built] [yLpj] (webpack)/buildin/global.js 472 bytes {0} [built] [z0BS] ./node_modules/html-webpack-plugin/lib/loader.js!./client/index.html 910 bytes {0} [built] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js??postcss!vendors/[email protected]/theme.min.css: Entrypoint mini-css-extract-plugin = * [JPst] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {mini-css-extract-plugin} [built] [wP9d] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./vendors/[email protected]/theme.min.css 1.33 KiB {mini-css-extract-plugin} [built] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js??postcss!vendors/[email protected]/tailwind.css: Entrypoint mini-css-extract-plugin = * [JPst] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {mini-css-extract-plugin} [built] [P+/v] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./vendors/[email protected]/tailwind.css 598 KiB {mini-css-extract-plugin} [built] i ｢wdm｣: Failed to compile.

Hello,
Can you please consider adding a RSS feed to be notified when there are new pattern on the website?

Thanks!

Maybe you should consider adding timer pattern.

Ii mean cutdown timer.
https://i2.wp.com/www.cssscript.com/wp-content/uploads/2017/07/Easy-Datetime-Countdown-Timer.png?fit=500%2C374&ssl=1

it popular function on product pages and similar page .

I had the idea of just making a tailwind version/tab for the components.

Please add icon for website its easy to find out when we add into favorites (icon only)

This is what this example looks like in Chrome (Version 88.0.4324.192 (Official Build) (x86_64)), MacOS 11:

tslint and tslint-react are deprecated. Replace them with eslint.

• tslint -> eslint
• tslint-react -> eslint-plugin-react

Hello,

first of all: Thank you for your website!
I'm repeatedly using your patterns in projects I'm working on.

That being said, the other day, I had a chat with Marco Zehe on Twitter. In case you don't know him: He's an accessibility expert with Mozilla and fully blind. Thus, he's relying on a screenreader to browse the web.
Marco tried your Floating label pattern and found some accessibility issues:

1. The <label> isn't linked via the respective <input /> via for attribute. This is critical for screenreaders, but also helps sighted users, as it offers an additional way to raise focus on the <input /> element.
2. opacity: 0; isn't hiding it for screenreaders (that's tolearable. You might want to use aria-hidden: true;.
3. The <label> is behind the <input /> element in DOM order: https://github.com/phuoc-ng/csslayout/blob/7c6afbb80dafabf31f76b7f8e57095a3e90c078b/client/patterns/floating-label/Details.tsx#L47-L66
   That's hindering the train of reading, so rather than an annoyance.

Would you accept PRs addressing these issues if they maintain the visual effect?

"If you thing there" should be "think", I think, in the README.md :)

I'd like to know why this repo is not using CSS grid for card layout instead of flex.

Current code displays the grid using flex as here: https://github.com/phuoc-ng/csslayout/blob/88200a698329be14ddc916053266ac788697de8f/client/patterns/card-layout/Details.tsx#L36

Instead, it would be simpler and more powerful to implement grid as:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}

Am I missing something?

I'll be happy to PR this if you agree.

When using the current CSS for ribbon, I get something like this:

After taking a look at the code, I think the border-left-color should me moved from container__side to container__side--left and a similar border-right-color should be added to container__side--right:

 .container__side {
     bottom: -8px;
     position: absolute;

     /* Displayed under the container */
     z-index: -1;

     /* Background */
     border: 16px solid #CCC;
-    border-left-color: transparent;
 }

 .container__side--left {
     /* Position */
     left: -24px;
+
+    border-left-color: transparent;
 }

 .container__side--right {
     /* Position */
     right: -24px;
+
+    border-right-color: transparent;
 }

Which makes it look like this:

Should that be the correct CSS for ribbon?

Adding transform: scaleX(-1) to container__side--right also works for me, but I'm not sure which way is better.

Hello 👋 Thanks for this great resource! I'll certainly recommend it to my coworkers, nice work 😊

That said, I've found a Firefox-only (Firefox Nightly, 73.0a1 (2019-12-19)) bug where CoverCards's CoverLoader triggers a ChunkLoadError[1] for some patterns[2]. I didn't manage to understand the exact reason, let alone come up with a fix, so I thought I'd leave a bug report.

The above error occurred in the <InnerLoadable> component:
    in InnerLoadable (created by Context.Consumer)
    in Unknown (created by ForwardRef)
    in ForwardRef (created by CoverCard)
    in a (created by LinkAnchor)
    in LinkAnchor (created by Context.Consumer)
    in Link (created by CoverCard)
    in CoverCard (created by HomePage)
    in div (created by HomePage)
    in section (created by HomePage)
    in div (created by HomePage)
    in div (created by Layout)
    in Layout (created by HomePage)
    in HomePage (created by App)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, CoverCard.

ChunkLoadError: "Loading chunk patterns-accordion-Cover~patterns-card-Cover~patterns-centering-Cover~patterns-cookie-banner-Cover~p~e8feece5 failed.
(error: http://localhost:1234/patterns-accordion-Cover~patterns-card-Cover~patterns-centering-Cover~patterns-cookie-banner-Cover~p~e8feece5.c20cad6c14f01cd89b31.js)"
        requireEnsure
        webpackAsyncContext
        importAsync
        requireAsync
        loadAsync
        componentDidMount
        commitLifeCycles
        commitLayoutEffects
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        commitRootImpl
        unstable_runWithPriority
        runWithPriority$2
        commitRoot
        finishSyncRender
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
        b40e
        __webpack_require__
        2
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

First, thank you for such great work on things we use everyday! I wonder how hard would it be to add more levels to the nested menu and still use so little CSS?
Thanks,
Umbundu

无论是使用npm i还是yarn install,即使使用了nrm ls进行更换源，进行依赖安装仍然报错，依赖装不上。

npm版本：6.7.0
yarn版本：1.22.5
node版本：11.14.0
系统环境：macOS Catalina 10.15.7

错误提示：

> [email protected] install /Users/CodeDream/github/css/csslayout-master/node_modules/puppeteer
> node install.js

ERROR: Failed to download Chromium r686378! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
{ Error: connect ETIMEDOUT 172.217.161.176:443
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1088:14)
  -- ASYNC --
    at BrowserFetcher.<anonymous> (/Users/CodeDream/github/css/csslayout-master/node_modules/puppeteer/lib/helper.js:111:15)
    at Object.<anonymous> (/Users/CodeDream/github/css/csslayout-master/node_modules/puppeteer/install.js:64:16)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
    at internal/main/run_main_module.js:21:11
  errno: 'ETIMEDOUT',

Your code is great, can I use angular to rewrite your project？

Xigkon
Thinks!

Thanks Kudo Rei for the feedback:

One thing if I'm forced to say, I'd say this black/white collection doesn't look fascinating for me to see. would be better with colors for me

Seeing as this project is about best practices in Css, one could argue that having a poor mobile experience on the official website; would reflect poorly on the entire project.

Closure in html should be and is

https://csslayout.io/patterns/custom-checkbox-button

Hi there!
I respectively copied your code into my .css and .html files but...the code doesn't show your results.

My results:

What's wrong?

When I did 'npm run dev-server', I got message 'Failed to compile'.
What should I do? Could you advise for me?

Error is below :

ERROR in ./client/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in E:\csslayout\node_modules@babel\helper-compilation-targets\package.json
at throwExportsNotFound (internal/modules/esm/resolve.js:290:9)
at packageExportsResolve (internal/modules/esm/resolve.js:513:3)
at resolveExports (internal/modules/cjs/loader.js:432:36)
at Function.Module._findPath (internal/modules/cjs/loader.js:472:31)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:867:27)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (E:\csslayout\node_modules@babel\preset-env\lib\debug.js:8:33)
at Module._compile (internal/modules/cjs/loader.js:1063:30)

Thanks Andrew Macpherson for the feedback:

It performs poorly on the WCAG principles of perceivable, operable, understandable, and robust. It fails the following WCAG success criteria:

• 2.1.1 Keyboard
• 3.3.2 Labels or Instructions
• 4.1.2 Name, Role, Value

Environment:

Microsoft Windows 7 Professional SP1
Google Chrome v. 79.0.3945.130

I try to open your site and get an empty page with these errors in console tab:

In Network tab:

Note:
About 1 second, the site tries to load (for a short time I see the page), but then everything disappears.

https://github.com/phuoc-ng/csslayout/blob/5228d1ab54c406fa3c4da44cc34646c91c23674f/client/patterns/split-navigation/Details.tsx#L61

list-stype-type must be list-style-type.