yeldo-ui-library-next v0.2.2
Introduction
A React UI toolkit used in Yeldo to develop the company design system and reuse across FrontEnds.
After a few test & research, we found styling with SCSS the most effective way to work.
This approach has a few features we definitely wanted to have:
- Scoped classnames, to avoid unpredictable CSS interferences/redefinitions (our design choice is to use it only on component root)
- Readable code, with semantic and logical classnames, for easy evolution/mainteinance
- Keep the library components and sub-components easy to customize from the consumer app, if needed
- Optimization: the consumer app will only import the needed style, and tree-shaking is supported
(We will also try to take advantage of css variables)
The boilerplate for this library is 100% due to this Alex Eagleson's article. God bless you Alex!
Sample component structure
import React from "react";
import style from "./TestComponent.module.scss";
const TestComponent = () => {
return (
<div className={"ye-TestComponent " + style.root}>
this is the component
<div className="ye-frame">
this is the frame
<div className="ye-innerbox">this is the inside</div>
</div>
</div>
);
};
export default TestComponent;
Sample SCSS structure
.root {
:global {
background: #ffeedd;
padding: 1rem;
.ye-frame {
padding: 1rem;
background: #55eedd;
.ye-innerbox {
padding: 1rem;
background: #11dd00;
}
}
}
}
commands
yarn install yarn storybook
to bump a new version: yarn rollup (to bundle the library before publishing) yarn patch (minor|major) npm publish
Dependency updates
yarn audit yarn upgrade-interactive yarn upgrade-interactive --latest
font sizes and distances
the library uses "rem" units, so every distance/size is calculated against the base html root font size.
To keep aspect ratio on every screen size, we use fluid font sizes where the "root" p font sizes are:
- Mobile: 18px (@390px)
- Desktop: 20px (@1920px)
If you have a size in px from the design, please use the formula to get the rem size: Rem size = px size / root px size
To make it all work fine, the consumer app should use fluid types too. This library exports a small CSS that can be imported to this extent:
in _app.tsx @import "yeldo-ui-library-next/dist/style.css";
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago