Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Bjorn-Strom/FSS
https://github.com/Bjorn-Strom/FSS
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/Bjorn-Strom/FSS
- Owner: Bjorn-Strom
- License: mit
- Created: 2020-07-09T10:45:20.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-28T18:15:54.000Z (2 months ago)
- Last Synced: 2024-04-29T00:09:16.277Z (2 months ago)
- Language: F#
- Size: 12.3 MB
- Stars: 97
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Lists
- awesome-fable - Fss - Type-safe CSS styling library. (Libraries)
README
Fss
[](https://actions-badge.atrox.dev/bjorn-strom/FSS/goto)  [](https://github.com/Bjorn-Strom/FSS/blob/master/LICENSE.md)
Fss is a dependency free CSS library for dotnet that provides statically typed styling for your projects and aims to
cover a huge part of the CSS spec.
It gives you CSS as a first class citizen in your projects and was made to be predictable and easy to use.
## [Documentation 📖](https://bjorn-strom.github.io/FSS/)
## Examples 🤓
Quick Elmish example here, check the documentation for more information.
```fsharp
let buttonStyle =
fss
[
BackgroundColor.hex "44c767"
BorderRadius.value (px 30)
BorderWidth.value (px 1)
BorderStyle.solid
BorderColor.hex "18ab29"
Display.inlineBlock
Cursor.pointer
FontSize.value (px 17)
Hover
[
BackgroundColor.hex "5cbf2a"
]
]
button [ ClassName buttonStyle ] [ str "Click me" ]
```
You can also check out this sample repo: [samples](https://github.com/Bjorn-Strom/Fss-Samples).
## Installation 💾
Install the Nuget package you need. If you are using Fable or Feliz then you probably want `Fss.Fable` or `Fss.Feliz`.
If you are using Giraffe then you probably want `Fss.Giraffe`, and if you are using `Falco` then you probably want `Fss.Falco`. Doing something custom or extending Fss? Then you
probably want `Fss.Core`.
| Package | NuGet | Downloads |
|----------------------------------------------------------------|-----------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| [Fss.Core ](https://www.nuget.org/packages/Fss-lib.Core/) |  |  |
| [Fss.Fable](https://www.nuget.org/packages/Fss-lib.Fable/) |  |  |
| [Fss.Feliz](https://www.nuget.org/packages/Fss-lib-feliz/) |  |  |
| [Fss.Giraffe](https://www.nuget.org/packages/Fss-lib.Giraffe/) |  |  |
| [Fss.Falco](https://www.nuget.org/packages/Fss-lib.Falco/) |  |  |
To install `Fss` you need to install the nuget package.
```
# nuget
dotnet add package Fss-lib.
// For example
dotnet add package Fss-lib.Fable
```
## Motivation 🏁
When it comes to styling in F# you do have some good alternatives for styling:
- [Fulma](https://fulma.github.io/Fulma/), an F# wrapper on [Bulma](https://bulma.io/)
- [TypedCssClasses](https://github.com/zanaptak/TypedCssClasses), a type provider if you want to write CSS or SCSS
- Or some kind of webpack configuration if you want to use CSS or SCSS directly.
There is however no good solution to writing CSS purely in F#, CSS-in-Fs if you will, and this library aims to do just
that. If you wish to write your own CSS and you are using dotnet, Fss is the best solution for just that.
The primary goal of this project is to have an easy way to write type-safe discoverable styling with F# that supports
most of the CSS spec. It was also important to me that it works independently of any other frameworks and would work
anywhere you can run F# code. Therefore you can use Fss with Fable, Giraffe or any other solution you can think of.
Major goals of Fss
- I did not want to reinvent the wheel - it should be easy to use if you already know CSS.
- Writing CSS in F# should be discoverable, strongly typed, and the IDE to help out as much as possible.
- It is important to support pseudo-classes and elements as well as animations, counters and combinators.
- Have a system in place and use that to create framework specific libraries.
- Boilerplate free, just download one nuget package and you are ready to go!
## Features 🛠
- IDE discoverability. Have the IDE help you write the styling as you go.
- Static types, have statically typed CSS. Compilation will fail if you have written invalid CSS (With no guarantees it
looks good, that is on you!)
- Works independently of any HTML framework.
- Compiles anywhere F# compiles, so it works effortlessly with Dotnet or Fable.
- Server side rendering for free.
- All the benefits of having your styling in your language as a first class citizen.
- Covers a large part of the CSS spec.
- Framework specific helper libraries.
See the [Documentation](https://bjorn-strom.github.io/FSS/) for more information
## Who is it for? 😎
Fss is intended for developers who want to write their own CSS using F#. If you have an existing stylesheet Fss does
nothing for you, (unless you want to rewrite it), in that case you might want to check
out [TypedCssClasses](https://github.com/zanaptak/TypedCssClasses). If you do not want to write your own CSS but you
want to have some prebuilt stylesheet then something like [Fulma](https://fulma.github.io/Fulma/) might be what you are
looking for. IF however you wish to write your own CSS in a type safe way, then Fss is what you want to use.
## Contribution 🔨
The best way to contribute to Fss is to use it! 😎 The more it is used the more tested it gets. If you do find any
missing or bugged CSS properties, or maybe you are missing a framework library, feel free make an issue or PR. If you
have some cool samples or examples feel free to to contribute to the documentation. In short, any and all contributions
are very welcome.