wow, nice badges
This commit is contained in:
parent
bfe68ab2b4
commit
bbc50b3037
2 changed files with 35 additions and 10 deletions
21
LICENSE
21
LICENSE
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2024 Svyatoslav Pushkarev
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
24
README.md
24
README.md
|
|
@ -12,6 +12,10 @@
|
||||||
>
|
>
|
||||||
> the latest-trashy state is in the "window" branch
|
> the latest-trashy state is in the "window" branch
|
||||||
|
|
||||||
|
[](https://crates.io/crates/sabry)
|
||||||
|
[](https://docs.rs/sabry)
|
||||||
|
[](https://github.com/yiffyrusdev/sabry/blob/master/LICENSE)
|
||||||
|
|
||||||
At first, I'll show how this crate "tastes". With SABRY, its in your power to:
|
At first, I'll show how this crate "tastes". With SABRY, its in your power to:
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
|
|
@ -65,7 +69,7 @@ tgk_brandstyle = {version = "0.0.1", features = ["utils"]}
|
||||||
`@use` your style-crates in sass code *naturally*
|
`@use` your style-crates in sass code *naturally*
|
||||||
|
|
||||||
```rust,ignore
|
```rust,ignore
|
||||||
styly!(breadcumb {
|
styly!(breadbadge {
|
||||||
@use 'tokens';
|
@use 'tokens';
|
||||||
.scope {@include tokens.badge(primary);}
|
.scope {@include tokens.badge(primary);}
|
||||||
})
|
})
|
||||||
|
|
@ -176,11 +180,11 @@ sabry = {version = "0.0.1"}
|
||||||
```
|
```
|
||||||
And create a style scope wherever you want:
|
And create a style scope wherever you want:
|
||||||
```rust,ignore
|
```rust,ignore
|
||||||
// breadcumblist.rs
|
// breadbadgelist.rs
|
||||||
use sabry::styly;
|
use sabry::styly;
|
||||||
|
|
||||||
styly!(const styles {
|
styly!(const styles {
|
||||||
.cumbs {
|
.badges {
|
||||||
display: flex;
|
display: flex;
|
||||||
&__list {
|
&__list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -192,8 +196,8 @@ styly!(const styles {
|
||||||
});
|
});
|
||||||
|
|
||||||
fn render() -> HtmlElement {
|
fn render() -> HtmlElement {
|
||||||
div().class(styles::cumbs).chain(
|
div().class(styles::badges).chain(
|
||||||
ul().class(styles::_list(styles::cumbs))
|
ul().class(styles::_list(styles::badges))
|
||||||
).chain(
|
).chain(
|
||||||
span().id(styles::thewolf)
|
span().id(styles::thewolf)
|
||||||
)
|
)
|
||||||
|
|
@ -201,7 +205,7 @@ fn render() -> HtmlElement {
|
||||||
```
|
```
|
||||||
> That `const` usage is covered in the [following](#constant-styly-scopes) section. In this example we dont invoke sabry build-magic, so, to be as close to real life as possible, I used a const.
|
> That `const` usage is covered in the [following](#constant-styly-scopes) section. In this example we dont invoke sabry build-magic, so, to be as close to real life as possible, I used a const.
|
||||||
|
|
||||||
Every selector, if that does make sense, now available for you as a member of `styles` scope. In this example - `styles::cumbs`, `styles::thewolf` and `styles::_list()`. More about scoping and member names you can read [here](#styly-scopes).
|
Every selector, if that does make sense, now available for you as a member of `styles` scope. In this example - `styles::badges`, `styles::thewolf` and `styles::_list()`. More about scoping and member names you can read [here](#styly-scopes).
|
||||||
|
|
||||||
### Use styles earlier created in another crate
|
### Use styles earlier created in another crate
|
||||||
|
|
||||||
|
|
@ -238,12 +242,12 @@ fn main(){
|
||||||
|
|
||||||
Now lets get back to the code and use the mixin defined in another crate:
|
Now lets get back to the code and use the mixin defined in another crate:
|
||||||
```rust,ignore
|
```rust,ignore
|
||||||
// breadcumblist.rs
|
// breadbadgelist.rs
|
||||||
use sabry::styly;
|
use sabry::styly;
|
||||||
|
|
||||||
styly!(styles {
|
styly!(styles {
|
||||||
@use "mixins";
|
@use "mixins";
|
||||||
.cumbs {
|
.badges {
|
||||||
display: flex;
|
display: flex;
|
||||||
&__list {
|
&__list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -255,8 +259,8 @@ styly!(styles {
|
||||||
});
|
});
|
||||||
|
|
||||||
fn render() -> HtmlElement {
|
fn render() -> HtmlElement {
|
||||||
div().class(styles::cumbs).chain(
|
div().class(styles::badges).chain(
|
||||||
ul().class(styles::_list(styles::cumbs))
|
ul().class(styles::_list(styles::badges))
|
||||||
).chain(
|
).chain(
|
||||||
span().id(styles::thewolf)
|
span().id(styles::thewolf)
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue