Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dancespiele/yew_styles
Yew Styles is a style framework for yew
https://github.com/dancespiele/yew_styles
Last synced: 11 days ago
JSON representation
Yew Styles is a style framework for yew
- Host: GitHub
- URL: https://github.com/dancespiele/yew_styles
- Owner: dancespiele
- License: apache-2.0
- Created: 2020-01-27T00:26:02.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-20T23:12:25.000Z (almost 2 years ago)
- Last Synced: 2024-05-19T05:40:36.609Z (6 months ago)
- Language: Rust
- Homepage: https://yewstyles.spielrs.tech/
- Size: 1.49 MB
- Stars: 149
- Watchers: 9
- Forks: 15
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE-APACHE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-yew - yew-styles-page - This is an initial project of a framework style for yew. (Projects)
README
# Yew Styles
Yew Styles is a style framework for [yew](https://yew.rs/docs/en/intro/) without JavaScript dependencies
## Motivation
The purpose of developing this project is first,
provide a style framework for yew that doesn't require any JavaScript dependencies
also to create a layout system which is not far of the flexbox concept, and,
to take the rust benefits and implement properties selected by enumeration
in the most of the cases which makes fast for developing applications and avoids the practice try and error
## How it works
Each component is split in two parts, the logical yew component and its sass module,
however, it is not necessary to worry about the sass module only it needs to be include in the project
**Note:** One of the goals of yew_styles project is include css in the components without depending of any external css file.
Candidate chosen [stylist-rs](https://github.com/futursolo/stylist-rs)
### How install it
1. Install the sass module: `npm install yew-styles`
2. Add the yew_style crate with the features needed for your project in Cargo.toml file:
```toml
yew_styles = { version="0.11", features=["button", "text", "navbar"] }
```
3. Import the main.css file in you main javascript/typescript file project:
```typescript
import 'node_modules/yew-styles/main.css';
```
4. Ready to import and use in your project 🚀
### Yew styles with Trunk
To create an app with Yew Styles framework using [Trunk](https://trunkrs.dev/) instead of `Parcel` is possible, please check [Yew Styles Trunk Template](https://github.com/dancespiele/yew_styles_trunk_template)
## Visual example:
You can find all the visual example in the website https://yewstyles.spielrs.tech
## Run the documentation page
1. `git clone https://github.com/spielrs/yew_styles.git`
2. `cd yew_styles`
3. `npm start`
In the left side there is a list of links where each one access to a correspondent component documentation,
there, shows how to use it.
## Rust Docs
You can also see all the Yew Style documentation in rust docs [here](https://docs.rs/crate/yew_styles).
It includes description and examples for each component
## Run the tests
Inside of the project run:
`cargo test --target wasm32-unknown-unknown --manifest-path=crate/yew_styles/Cargo.toml`
## Development phase
Yew Styles cover all the common cases used in a web application however there are still a lot of work to do and components to implement.
All contributions are appreciated.
## How contribute
First, open an issue describing about the fix, improvement or implementation and as suggestion, don't start to work in it until that is discussed.
If the contribution is a fix or small improvement in a component, only a pull request to master explaining what resolve or improve that, is required.
If it is an implementation, please follow the next requirements:
* Firstable open an issue describing about the component
* Unit tests, which checks that the component is created and
its logic works, in the same file where it is implemented (test events is not needed for now)
* One component per file, if multiple components have connections between them, it is possible create subfolder
* Documentation in the component showing an example of using it and small description of each prop
* Create a component page in `/crate/src/page` with the same structure than the rest of the components
## Do you like Yew Styles?
If you like Yew Styles, help me supporting the project:
- BAT rewards in case that you use [Brave Browser](https://brave.com/)
- [Github Sponsors](https://github.com/sponsors/dancespiele)
If you need a feature that is not cover yet, as soon as possible, you can also fund the issue [here](https://issuehunt.io/r/spielrs/yew_styles)
## Code of Conduct
Please check our [code of conduct](CODE_OF_CONDUCT.md)
## Code Contributors
## Roadmap
- [x] Button
- [x] Layout
- [x] Navbar
- [x] Form
- [x] Card
- [x] Text
- [x] Dropdown
- [ ] get rid of css files
- [ ] Progress
- [x] Spinners
- [ ] Table
- [ ] Pagination
- [x] Modal
- [ ] Sidebar
- [ ] Tab
- [x] Tooltips
- [ ] Collapse
- [x] Carousel
- [ ] Calendar
- [x] Assets (implemented in the new library [yew_assets](https://github.com/spielrs/yew_assets))
## License
Yew Style is [MIT](LICENSE-MIT.md) and [Apache-2.0](LICENSE-APACHE.md) licensed