All Projects → chanan → Blazorstyled

chanan / Blazorstyled

Licence: unlicense
CSS in Blazor Components

Projects that are alternatives of or similar to Blazorstyled

Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
Stars: ✭ 1,835 (+1107.24%)
Mutual labels:  styled-components
React Native Boilerplate
A React Native boilerplate with Expo, Redux, React Navigation, Styled Components and some 💕 included.
Stars: ✭ 135 (-11.18%)
Mutual labels:  styled-components
Animated Styled Components
React Animated Styled Components
Stars: ✭ 142 (-6.58%)
Mutual labels:  styled-components
Fluid System
Fluid System is a style props function transformer for generating fluid styles. 💦
Stars: ✭ 130 (-14.47%)
Mutual labels:  styled-components
Gabriel Adorf Portfolio
Gabriel Adorf's personal website
Stars: ✭ 133 (-12.5%)
Mutual labels:  styled-components
Gatsby V2 Tutorial Starter
Gatsby V2 Starter - product of step by step tutorial
Stars: ✭ 139 (-8.55%)
Mutual labels:  styled-components
Fakebooker Frontend
Stars: ✭ 124 (-18.42%)
Mutual labels:  styled-components
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: ✭ 147 (-3.29%)
Mutual labels:  styled-components
Babel Plugin Polished
Compile polished helper functions at build time
Stars: ✭ 133 (-12.5%)
Mutual labels:  styled-components
Django React Typescript
A boilerplate with Django on the backend, React on the frontend, and much more!
Stars: ✭ 142 (-6.58%)
Mutual labels:  styled-components
React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (-15.13%)
Mutual labels:  styled-components
Blockstack.org
The Blockstack website
Stars: ✭ 132 (-13.16%)
Mutual labels:  styled-components
Styled Icons
💅 Popular icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components
Stars: ✭ 1,878 (+1135.53%)
Mutual labels:  styled-components
Scoped Style
A tiny css in js library 🚀
Stars: ✭ 129 (-15.13%)
Mutual labels:  styled-components
Delir
Web Technology driven VFX Application
Stars: ✭ 142 (-6.58%)
Mutual labels:  styled-components
Gatsby Admin Template
Free admin dashboard template based on Gatsby with @paljs/ui component package
Stars: ✭ 124 (-18.42%)
Mutual labels:  styled-components
Next Dark Mode
🌑 Enable dark mode for Next.js apps
Stars: ✭ 133 (-12.5%)
Mutual labels:  styled-components
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+1424.34%)
Mutual labels:  styled-components
React Page Transition
A React component that makes it easy to use the page transitions from the Codedrops page transitions demo with React
Stars: ✭ 145 (-4.61%)
Mutual labels:  styled-components
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-7.24%)
Mutual labels:  styled-components

BlazorStyled

CSS in Blazor Components

Docs

View the detailed docs at https://blazorstyled.io.

Install

NuGet Pre Release

Why BlazorStyled?

  • Maintain your css inside your component instead of a seperate file
  • Eliminate all collisions - no need to use !important
  • No need to worry about depoying css files - great for libraries
  • css are C# strings - use variables instead of solutions like sass

Insperation

Short Example

<Styled @bind-Classname="@hover">
    label: hover-example;
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
</Styled>

<Styled Classname="@hover" PseudoClass="PseudoClasses.Hover">
    color: @color;
</Styled>

<div class="@hover">
    Hover to change color.
</div>

@code {
    private string hover;
    private string color = "white";
}

See more in the docs at https://chanan.github.io/BlazorStyled/.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].