sakofchit / system.css Goto Github PK

View Code? Open in Web Editor NEW

2.3K 11.0 75.0 269 KB

A design system for building retro Apple interfaces

Home Page: https://sakofchit.github.io/system.css/

License: MIT License

JavaScript 12.62% CSS 87.38%

css design-system classic-macos macos hacktoberfest hacktoberfest2022

system.css's People

Contributors

Stargazers

Watchers

system.css's Issues

Dropdown doesn't appear to close old menus when opening another

First of all, beautiful library!

I'm not sure if this is by design, but the menus don't close when another menu opens.

Nested single list item of menu item do not behave as expected

Hi @sakofchit, nice job working on System.css, I am using it for my blog and I mentioned it as credits! Extremely happy! Thank you for the work. I use version ^0.1.9

If I ever encounter any weird behavior, I override it. One of the things I encountered was using a menu that has an item that is lonely and does not have a nested menu. For example:

<ul role="menu-bar">
   <li role="menu-item" tabIndex={0} aria-haspopup="false"> <!-- this one -->
      <Link aria-label="home page" href="/">
      Home
      </Link>
   </li>
   <li role="menu-item" tabIndex={0} aria-haspopup="true">
      About
      <ul role="menu">
         <li role="menu-item">
            <Link aria-label="about page" href="/about">
            Me
            </Link>
         </li>
         <li role="menu-item">
            <Link aria-label="about page" href="/about-website">
            Website
            </Link>
         </li>
      </ul>
   </li>
</ul>

Link is the link (a tag) Next.js component. The menu works as expected. However, the first element has an attribute of aria-haspopup="false" because I have a single item which is an a children. If I use a plain list item like <li>This is my single item as a plain item</li> the menu item behaves as expected, but in cases to have a children for the list item, then it behaves differently (per child type, in my case an anchor tag).

Using aria-haspopup="false" has no effect so I had to override that:

ul[role="menu-bar"] li[aria-haspopup="false"] * {
  
  /* all tags */
  background-color: inherit;
  color: inherit;
  margin: 0;
  padding: 0;

  /* for a tags */
  text-decoration: none;
}

The expected behavior, in my opinion, is that if a list item contains a children (no matter what type) but does not have a nested menu, that list item should look like the other items.

Do you think that added code is semantically good to work with System.css? If so, should I open a PR and add this to be naturally implemented?
Or, am I off the road here and there is something I am missing?

Working on fixing the layout

Hey @sakofchit , I was working on fixing the layout of the website, as it is messed up ( Issue #3 ) . So for this I am planning to change the html structure little bit.
I am planning to wrap the aside and main in one container and want to make it a grid.
Here's the codepen.

In this codepen I have created the rough layout . You can see the html structure in the codepen that I am planning to implement in the system.css

So should I change the HTML structure?

Add smooth scrolling behavior on click

Hey there , I'm frontend dev

I cam across the website and its quite unique and like vintage i.e. awesome

But in this we can add a smooth scrolling behavior to it which looks good

didn't you notice that p is actually broken

it doesnt display geneva, and it doesnt fall back to Inconsolata.

less of a Issue and more of a question

i want to have the body of my page be black but have a box with content have the defalt background img how would i do that i want it to look like how th origonal system6 running on a monitor with a black margin my current code looks like <body style="background-color: #000000;display: flex;justify-content: center;background-image: none;"> <div class="content" style="size: 90vw, 90vw;box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);"> how would yall do this

somthing like this

Menu navigation messes up documentation page layout

When accessing https://sakofchit.github.io/system.css, if you navigate to the Intro section, the page layout suddenly expands making content be under the left menu window. If you try to go to any other menu link, the issue remains.

Steps to reproduce:

Go to https://sakofchit.github.io/system.css/#intro
Click on Intro in left menu
Try accessing any other section

Screenshots:

Styling Select Menu

Just an idea:

Currently, the Select Menu component's appearance is based on the user's OS.

It'd be nice if it looked like something closer to the Dropdown menu component

Styling it doesn't seem to be tough a task. However, accessibility is my bigger concern. The component may need a tabindex=0 property in its HTML in order to preserve page tabbing. This is not possible to enforce using CSS alone, so docs may need to reflect the importance of having a tabindex=0 attribute.

sakofchit / system.css Goto Github PK

system.css's People

Contributors

Stargazers

Watchers

Forkers

system.css's Issues

Dropdown doesn't appear to close old menus when opening another

Nested single list item of menu item do not behave as expected

Working on fixing the layout

Add smooth scrolling behavior on click

didn't you notice that p is actually broken

less of a Issue and more of a question

Menu navigation messes up documentation page layout

Styling Select Menu

Cursors

Default Button Type

Fonts don't work correctly on mobile safari

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent