Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prosazhin/pbstyles
Basic styles for quick prototyping
https://github.com/prosazhin/pbstyles
css design design-system design-tokens design-tool less scss style system tailwind tailwind-theme theme tokens tool
Last synced: 3 months ago
JSON representation
Basic styles for quick prototyping
- Host: GitHub
- URL: https://github.com/prosazhin/pbstyles
- Owner: prosazhin
- License: mit
- Created: 2022-09-29T12:33:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-04T13:15:19.000Z (4 months ago)
- Last Synced: 2024-10-26T11:46:41.085Z (3 months ago)
- Topics: css, design, design-system, design-tokens, design-tool, less, scss, style, system, tailwind, tailwind-theme, theme, tokens, tool
- Language: SCSS
- Homepage: https://www.npmjs.com/package/pbstyles
- Size: 154 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pbstyles
[Figma community](https://www.figma.com/community/file/1213609862805339771/pbstyles) | [Behance](https://www.behance.net/gallery/162935391/pbstyles)
## prosazhin basic styles
Basic styles for quick prototyping. Includes typography, semantic colors, color palette, basic sizes, containers and columns, breakpoints, border sizes, rounding, opacity, and shadows.
For generating styles, design tokens are used based on the [Style Dictionary](https://github.com/amzn/style-dictionary) package documentation, but extended with mixins thanks to the [Mixin Dictionary](https://github.com/prosazhin/mixin-dictionary) package. For generating a Tailwind Theme, the [Tailwind Dictionary](https://github.com/prosazhin/tailwind-dictionary) package is used.
## Installation
```bash
yarn add pbstyles
# or
npm install pbstyles
```
## Includes
### Basic variables
| Category | CSS | LESS | SCSS | Tailwind Theme |
| :-------------------- | :-- | :--- | :--- | :------------- |
| Typography | + | + | + | + |
| Semantic colors | + | + | + | + |
| Colors palette | + | + | + | + |
| Basic sizes | + | + | + | + |
| Containers sizes | + | + | + | + |
| Columns | + | + | + | - |
| Border sizes | + | + | + | + |
| Border rounding sizes | + | + | + | + |
| Opacity | + | + | + | + |
| Shadows | + | + | + | + |
### Mixins
| Mixin | CSS | LESS | SCSS | Tailwind Theme |
| :---------- | :-- | :--- | :--- | :------------- |
| Animation | - | + | + | - |
| Typography | - | + | + | + |
| Breakpoints | - | + | + | + |
## Usage examples
### CSS Variables
Package contains only a [basic set of variables](https://github.com/prosazhin/pbstyles/blob/main/styles/css/variables.css).
At the moment, CSS does not yet have the ability to use mixins.
```css
@import 'pbstyles/styles/css';
```
### LESS
Package contains [basic set of LESS variables and mixins](https://github.com/prosazhin/pbstyles/blob/main/styles/less/variables.less).
```less
@import 'pbstyles/styles/less';
```
### SCSS
Package contains [basic set of SCSS variables and mixins](https://github.com/prosazhin/pbstyles/blob/main/styles/scss/variables.scss).
```scss
@import 'pbstyles/styles/scss';
```
### Tailwind Theme
Package contains [Tailwind Theme](https://github.com/prosazhin/pbstyles/blob/main/styles/tailwind-theme/index.js).
```javascript
const theme = require('pbstyles/styles/tailwind-theme');
module.exports = {
...
theme: {
...theme,
extend: {
...theme.extend,
},
},
...
};
```