From a237b97e0938ad66445e2065fd257de57ae90cfa Mon Sep 17 00:00:00 2001 From: Chase Fleming <1666730+chasefleming@users.noreply.github.com> Date: Sat, 11 Nov 2023 13:03:50 -0800 Subject: [PATCH] Add styles readme --- README.md | 3 +- styles/README.md | 115 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 styles/README.md diff --git a/README.md b/README.md index 25b30e8..1ed4abc 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ - Type-safe definition and manipulation of elements, attributes, and properties. - Supports common HTML elements and attributes. - Utilities for simplified element generation and manipulation. +- Advanced CSS styling capabilities with the `styles` subpackage. (See [styles subpackage README](styles) for more details.) ## Installation @@ -86,7 +87,7 @@ button := elem.Button( ) ``` -See the complete list of supported attributes in [the `attrs` package](./attrs/attrs.go) and style properties in [the `styles` package](./styles/constants.go). +See the complete list of supported attributes in [the `attrs` package](./attrs/attrs.go), and for a full overview of style properties and detailed information on using the `styles` subpackage for CSS styling, see [the `styles` package source](./styles/constants.go) and the [styles subpackage README](styles). ### Rendering Elements diff --git a/styles/README.md b/styles/README.md new file mode 100644 index 0000000..a997384 --- /dev/null +++ b/styles/README.md @@ -0,0 +1,115 @@ +# `styles` Subpackage in `elem-go` + +The `styles` subpackage within `elem-go` offers enhanced functionality for CSS styling in Go-based web applications. This document provides a detailed overview of how to use the `styles` subpackage and its features. + +## Table of Contents + +- [Introduction](#introduction) +- [Usage](#usage) +- [Styling Elements with `styles.Props`](#styling-elements-with-stylesprops) +- [Features](#features) + - [`Merge` Function](#merge-function) + - [`Style` and `CSS` Functions](#style-and-css-functions) + +## Introduction + +The `styles` subpackage provides a convenient way to define and manipulate CSS styles in Go. With utility functions and constants tailored for styling, it simplifies the process of applying styles to HTML elements. + +## Usage + +To use the `styles` subpackage, import it alongside the main `elem` package: + +```go +import ( + "github.com/chasefleming/elem-go" + "github.com/chasefleming/elem-go/styles" +) +``` + +## Styling Elements with `styles.Props` + +The `styles.Props` type allows for defining CSS properties in a structured, type-safe manner. It ensures that your style definitions are well-organized and easy to maintain. + +### CSS Property Keys as Constants + +To further enhance type safety and reduce errors, the styles subpackage provides constants for CSS property keys. This means you don't have to rely on writing raw string literals for CSS properties, which are prone to typos and errors. Instead, you can use predefined constants that the package offers, ensuring correctness and saving time on debugging. + +```go +// Example of using constants for CSS properties +buttonStyle := styles.Props{ + styles.BackgroundColor: "#4CAF50", // Using constant instead of raw string + styles.Border: "none", + // ... other properties +} +``` + +By using these constants, you can write more reliable and error-resistant style code in Go, making your development process smoother and more efficient. + +For a full list of available constants, see the [styles.go file](styles.go). + +### Applying Styles to Elements + +Once you have defined your styles using `styles.Props`, you can convert them to an inline CSS string using the `ToInline` method. This inline CSS can then be applied directly to HTML elements. + +```go +// Define styles using styles.Props +buttonStyle := styles.Props{ + styles.BackgroundColor: "#4CAF50", + styles.Border: "none", + // ... other properties +} + +// Convert styles to inline CSS +inlineStyle := buttonStyle.ToInline() + +// Apply inline CSS to a button element +button := elem.Button(attrs.Props{attrs.Style: inlineStyle}, elem.Text("Click Me")) +``` + +In this example, `buttonStyle` is first defined using `styles.Props` and then converted into an inline CSS string using `ToInline`. This string is used to set the style attribute of a button element. + +## Features + +### `Merge` Function + +The `Merge` method combines multiple style prop objects into one. It's useful for applying conditional styles or layering style sets. + +```go +// Example style definitions +baseButtonStyle := styles.Props{ + Padding: "10px 15px", + Border: "none", + FontWeight: "bold", +} + +primaryStyles := styles.Props{ + BackgroundColor: "blue", + Color: "white", +} + +secondaryStyles := styles.Props{ + BackgroundColor: "red", + Color: "white", +} + +// Merging styles with the new Merge function +primaryButtonStyles := styles.Merge(baseButtonStyle, primaryStyles) +secondaryButtonStyles := styles.Merge(baseButtonStyle, secondaryStyles) +``` + +In the `Merge` function, later style objects take precedence over earlier ones for properties defined in multiple style objects. + +### `Style` and `CSS` Functions + +These functions facilitate the embedding of CSS into HTML documents, particularly useful for creating