Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
allangomes authored Aug 18, 2024
1 parent 778e123 commit 6bf8699
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
[![Maven Central Version](https://img.shields.io/maven-central/v/io.github.allangomessl/kotlinwind-css)](https://search.maven.org/artifact/io.github.allangomessl/kotlinwind-css)
[![Tests](https://github.com/allangomessl/kotlinwind-css/actions/workflows/on-push.yml/badge.svg?branch=dev&event=push)](https://github.com/allangomessl/kotlinwind-css/actions/workflows/on-push.yml)

<br/><br/>

## Overview

Kotlinwind CSS is a Kotlin library that enhances your experience with [kotlinx.html](https://github.com/Kotlin/kotlinx.html) by providing a more Kotlin-centric approach to styling HTML. Inspired by Tailwind CSS, this library allows you to apply CSS styles directly within your HTML-building code, utilizing Kotlin's type-safe, declarative syntax through a Kotlin DSL (Domain-Specific Language).
Expand All @@ -14,23 +16,31 @@ Kotlinwind CSS is a Kotlin library that enhances your experience with [kotlinx.h
<img src="https://github.com/user-attachments/assets/b3310eeb-83f6-41b0-97ec-e39fbe8c1c8e" alt="Demonstration" />
</p>

<br/><br/>

## Features

- **Type-Safe CSS**: Write CSS directly in Kotlin using a type-safe API.
- **Seamless Integration**: Designed to work smoothly with `kotlinx.html`.
- **Declarative Syntax**: Benefit from Kotlin's expressive DSL to manage styles inline, reducing the need for external stylesheets.
- **Inspired by Tailwind CSS**: Leverage a similar utility-first approach for styling, now available in Kotlin.

<br/><br/>

## Code Preview

| Kotlinwind CSS Code | Resulting HTML |
| -------- | ------- |
| <img width="704" alt="Screenshot 2024-08-17 at 13 00 49" src="https://github.com/user-attachments/assets/12bc1408-f78f-4127-9e06-7e9985f08719"> | <img width="315" alt="Screenshot 2024-08-17 at 10 56 55" src="https://github.com/user-attachments/assets/dad10d8a-6ffd-4469-80bf-721da7e33290"> |

<br/><br/>

## Motivation

Kotlinwind CSS is built for developers who prefer a Kotlin-native way of styling HTML. By leveraging Kotlin's type-safe, declarative DSL and drawing inspiration from the utility-first approach of Tailwind CSS, this library eliminates the need for traditional CSS files and provides a more cohesive development experience within Kotlin projects.

<br/><br/>

## Getting Started

To start using Kotlinwind CSS in your project, add the following dependency to your `build.gradle.kts` file:
Expand All @@ -41,14 +51,20 @@ implementation("io.github.allangomessl:kotlinwind-css:{VERSION}")

Replace `{VERSION}` with the latest version available on [Maven Central](https://search.maven.org/artifact/io.github.allangomessl/kotlinwind-css).

<br/><br/>

## Documentation

For detailed usage instructions and examples, visit the [Wiki](https://github.com/allangomessl/kotlinwind-css/wiki).

<br/><br/>

## Limitations

Currently, Kotlinwind CSS supports only inline styles. Future versions will introduce support for external stylesheets and CSS classes.

<br/><br/>

## Roadmap

- **0.0.2 - 0.0.9**
Expand All @@ -66,6 +82,8 @@ Currently, Kotlinwind CSS supports only inline styles. Future versions will intr
- Jetpack Compose Integration (returning a `Modifier`)
- Interactivity Support (JS/TS Framework Integration)

<br/><br/>

### Note

Interactivity is not a priority at this stage, as starting with a JS/TS framework may be more beneficial for projects requiring dynamic behavior.

0 comments on commit 6bf8699

Please sign in to comment.