sakofchit / system.css Goto Github PK
View Code? Open in Web Editor NEWA design system for building retro Apple interfaces
Home Page: https://sakofchit.github.io/system.css/
License: MIT License
A design system for building retro Apple interfaces
Home Page: https://sakofchit.github.io/system.css/
License: MIT License
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
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:
Screenshots:
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.
This DeviantArt page has cursors ripped from MacOS 9. I do not know what the license implications would be tho...
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
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?
it doesnt display geneva, and it doesnt fall back to Inconsolata.
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?
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.