ingvoo / patterns Goto Github PK
View Code? Open in Web Editor NEWCollection of reusable UI patterns
Home Page: https://patterns.ljomi.ch/
License: MIT License
patterns's People
Stargazers
Watchers
patterns's Issues
Set breakpoints in json / tokens
That way they are accessible within scripts/js
Add paddings
Introduce Cypress for testing
eslint config
Rename setting $transition-duration-zzz
to something shorter and more notable
Setup stylelint sorting css properties
package concurently not working on windows
Refactor list elements to use gap property
Add grid
Add list element
Setup a icons page to display all icons available
We can use a json file with all icons name that can be loaded in a normal page and to import all icons as well.
Button adjustments
- Set button paddings in em's
Max-widths scale and utilities classes
We can possibly reuse size function and adjust it so it would take an optional map.
Consider atomic naming approach
Maybe instead of atom, molecule and organism picking something else just to seperate the smallest components from the bigger ones. e.g. components / structure
Add type option for form-input
Add proper list component styles
e.g.
.list
.list-inline
.list-dash
// Modifiers
.list--small
.list--largeSetup svgxuse for ie11 support
Setup nicer default selected (highlight) styles
Do we need stylelint when we have prettier?
Add negative margin utilities
Set up typescript support
Introduce sass-extra for inline svg
Setup netlify .toml and deployment
Add font-family utility css classes
Accordion or Toggle
Wonder if this should be one and the same component or a toggle component with an extended component for accordion
Add an option for prefixes
I'd love to see an option to add prefixes to classes. (Like .c-button instead of .button)
Just my two cents, feel free to ignore it. Lovely project.
Mobile navigation pattern
- With optional transitions
- body scroll lock if needed
- proper aria states
Create demo page for btn-reset
Add accessibility skip to links
Consider using sassdoc for sass documentation
Setup property to define template language
e.g. <html lang="de">
https://fractal.build/guide/web/default-theme.html#configuration
sass doc
Find solution to generate documentation for css utility classes
Currently the utilites are generated either from tokens scss map e.g. margin and padding or by a configured scss map e.g. displays.
There is currently no good way to document these without the manual effort
Document how mixins work
how to use them and what they output.
Currently the docs shows how they are implemented in the source which is not useful
Add visually-hidden class
and boolean option for form-input
Add functional toggle component
Document mobile-first approach
Update documentation
Document all the scss stuff that does not directly output anything by itself.
Set colors up with scss maps for easier scss looping
To generate utilities classes
.bg-red-500 {}
.text-red-500 {}
.border-red-500 {}
Update dependecy fractal to latest
Automate documentation for utilities
When setting update e.g. spacing list documentation should automatically update
To accomplice we probably need a tool like https://diez.org/ where the source would be a .json or even better .js
Create a nice (and to be proud of) focus state
Add flexbox utilities
Setup a nice typography scale and utility units
Add print styles
Setup jslint
Document convention on how mt mb ml mx-auto etc works
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.