A CSS-like style library for SwiftUI.

Related tags

Styling css style
Overview

The missing CSS-like module for SwiftUI

Check out the example project using SwiftUI-CSS; Also, Swift Package availble which url is https://github.com/hite/SwiftUI-CSS Supported macOS(.v10_14), .iOS(.v13) The SwiftUI is a great UI development framework for the iOS app. After I wrote some to-be-released app with SwiftUI framework, I realized that I need a solution to write more clear, simple, view-style-decoupled code with lots of custom style design.

So here is SwiftUI-CSS. With SwiftUI-CSS, you can:

1. write View-style-decoupled codes

View-style-decoupled makes your source code more clear to read, easy to refactor like html with CSS support.

Without SwifUI-CSS:

The codes to define View Structure blend into style-defined codes.

             Image("image-swift")
                 .resizable()
                 .scaledToFit()
                 .frame(width:100, height:100)
                 .cornerRadius(10)
                 .padding(EdgeInsets(top: 10, leading: 0, bottom: 15, trailing: 0))

              Text("Swift")
                 .font(.headline)
                 .foregroundColor(Color(red: 0x33/0xff, green: 0x33/0xff, blue: 0x33/0xff))
                 .padding(.bottom, 10)

 
              Text("Swift is a general-purpose, multi-paradigm, compiled programming language developed by Apple Inc. for iOS, macOS, watchOS, tvOS, Linux, and z/OS. ")
                 .font(.footnote)
                 .padding(.horizontal, 10)
                 .foregroundColor(NormalDescColor)
                 .lineSpacing(2)
                 .frame(minHeight: 100, maxHeight: .infinity)

With SwifUI-CSS:

  1. We divide the previous into two parts. The first part is view structures with class name:
            Image("image-swift")
                .resizable()
                .scaledToFit()
                .addClassName(languageLogo_clsName)
  
            Text("Swift")
                .addClassName(languageTitle_clsName)
            
     
            Text("Swift is a general-purpose, multi-paradigm, compiled programming language developed by Apple Inc. for iOS, macOS, watchOS, tvOS, Linux, and z/OS. ")
                .addClassName(languageDesc_clsName)
  1. The another is style definition:
let languageLogo_clsName = CSSStyle([
    .width(100),
    .height(100),
    .cornerRadius(10),
    .paddingTLBT(10, 0, 15,0)
])

let languageTitle_clsName = CSSStyle([
    .font(.headline),
    .foregroundColor(Color(red: 0x33/0xff, green: 0x33/0xff, blue: 0x33/0xff)),
    .paddingEdges([.bottom], 10)
])

let languageDesc_clsName = CSSStyle([
    .font(.footnote),
    .paddingHorizontal(10),
    .foregroundColor(NormalDescColor),
    .lineSpacing(2),
    .flexHeight(min: 50, max: .infinity)
])

2. use module system for reuse or create a custom design system.

module system help to reuse some common style design across the whole app which can save you to write same codes everywhere or avoid to make some mistakes.

Without SwifUI-CSS:

If you change the style of Text("28 October 2014"), you must change the style of Text("Objective-C,[7] Rust, Haskell, Ruby, Python, C#, CLU,[8] D[9]") too.

// in html5.swift
                HStack() {
                    Text("Initial release:")
                        .font(Font.system(size: 14))
                    
                    Text("28 October 2014")
                    .font(Font.system(size: 12))
                    .foregroundColor(NormalDescColor)

                }
// in swift.swift
                HStack(alignment: .top) {
                    Text("Influenced by:")
                        .font(Font.system(size: 14))
                    
                    Text("Objective-C,[7] Rust, Haskell, Ruby, Python, C#, CLU,[8] D[9]")
                    .font(Font.system(size: 12))
                    .foregroundColor(NormalDescColor)

                }

With SwiftUI-CSS

You can change the definition of wikiDesc_clsName once for all.

let wikiDesc_clsName = CSSStyle([
    .font(Font.system(size: 12)),
    .foregroundColor(NormalDescColor)
])

// in html5.swift
                HStack() {
                    Text("Initial release:")
                        .font(Font.system(size: 14))
                    
                    Text("28 October 2014")
                    .addClassName(wikiDesc_clsName)

                }
// in swift.swift
                HStack(alignment: .top) {
                    Text("Influenced by:")
                        .font(Font.system(size: 14))
                    
                    Text("Objective-C,[7] Rust, Haskell, Ruby, Python, C#, CLU,[8] D[9]")
                    .addClassName(wikiDesc_clsName)

                }

the other benefits of using SwiftUI-CSS

  1. more easy to change a lot of styles when state change.
// without swiftui-css
if festival == 'Christmas' {
     Text("Welcome everyone!")
     .font(.largeTitle)
     .foreground(.white)
     .background(.red)
} else {
        Text("Welcome everyone!")
     .font(.title)
     .foreground(.darkGray)
     .background(.white)
}

// with
Text("Welcome everyone!")
.addClassName(fesitval == 'Christmas' ? chrismas_clsName: normal_clsName)
  1. Maybe a reachable way to convert html+css codes to swiftui source
  2. write less code, clear to tell parameters meanings. For example.

.frame(minHeight: 50, maxheight: .infinity to .flexHeight(min: 50, max: .infinity) .padding(EdgeInset(top:10, leading: 15, bottom:0, trailing: 20) to .paddingTLBT(10,15,0,20)

  1. You can combile some different style into one.
let fontStyle = CSSStyle([.font(.caption)])
        let colorStyle = CSSStyle([.backgroundColor(.red)])
        
        let finalStyle = fontStyle + colorStyle
        print("finalStyle = \(finalStyle)")
  1. use responsive class to make view larger on larger screen
// In iOS, if the sketch file designed for screen 375x667, the responsive fator should be compared to UIScreen.main.bounds.size.width.
let responsive = Responsive(UIScreen.main.bounds.size.width / 375)
let wikiDesc_clsName = CSSStyle([
    .font(Font.system(size: responsive.r(12))),
    .foregroundColor(NormalDescColor)
    .paddingEdges([.bottom], responsive.r(10))
])
You might also like...
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey 🍯 to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey 🍯 to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
Style Art library process images using COREML with a set of pre trained machine learning models and convert them to Art style.
Style Art library process images using COREML with a set of pre trained machine learning models and convert them to Art style.

StyleArt Style Art is a library that process images using COREML with a set of pre trained machine learning models and convert them to Art style. Prev

iLeaf Solutions Pvt. Ltd. 222 Dec 17, 2022
📄 A Swift DSL for writing type-safe HTML/CSS in SwiftUI way

📄 swift-web-page (swep) Swep is a Swift DSL for writing type-safe HTML/CSS in SwiftUI way. Table of Contents Motivation Examples Safety Design FAQ In

Abdullah Aljahdali 14 Dec 31, 2022
A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewFlowLayout.
A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewFlowLayout.

WrapLayout A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewF

Hiroshi Kimura 6 Sep 27, 2022
A fast & lightweight XML & HTML parser in Swift with XPath & CSS support

Fuzi (斧子) A fast & lightweight XML/HTML parser in Swift that makes your life easier. [Documentation] Fuzi is based on a Swift port of Mattt Thompson's

Ce Zheng 994 Jan 2, 2023
SwiftSoup: Pure Swift HTML Parser, with best of DOM, CSS, and jquery (Supports Linux, iOS, Mac, tvOS, watchOS)
SwiftSoup: Pure Swift HTML Parser, with best of DOM, CSS, and jquery (Supports Linux, iOS, Mac, tvOS, watchOS)

SwiftSoup is a pure Swift library, cross-platform (macOS, iOS, tvOS, watchOS and Linux!), for working with real-world HTML. It provides a very conveni

Nabil Chatbi 3.7k Jan 6, 2023
A Powerful , Extensible CSS Parser written in pure Swift.
A Powerful , Extensible CSS Parser written in pure Swift.

A Powerful , Extensible CSS Parser written in pure Swift. Basic Usage From CSS: #View { "width" : 118; "height" : 120.5; "color1" : "#888888"; "co

null 273 Sep 9, 2022
SwiftSoup: Pure Swift HTML Parser, with best of DOM, CSS, and jquery (Supports Linux, iOS, Mac, tvOS, watchOS)
SwiftSoup: Pure Swift HTML Parser, with best of DOM, CSS, and jquery (Supports Linux, iOS, Mac, tvOS, watchOS)

SwiftSoup is a pure Swift library, cross-platform (macOS, iOS, tvOS, watchOS and Linux!), for working with real-world HTML. It provides a very conveni

Nabil Chatbi 3.7k Dec 28, 2022
A Powerful , Extensible CSS Parser written in pure Swift.
A Powerful , Extensible CSS Parser written in pure Swift.

A Powerful , Extensible CSS Parser written in pure Swift.

null 273 Sep 9, 2022
Flexbox in Swift, using Facebook's css-layout.

SwiftBox A Swift wrapper around Facebook's implementation of CSS's flexbox. Example let parent = Node(size: CGSize(width: 300, height: 300),

Josh Abernathy 811 Jun 23, 2022
Mongrel is a Swift and HTML hybrid with a bit of support for CSS and Javascript.

Mongrel is a Swift and HTML hybrid with a bit of support for CSS and Javascript. Using a declaritive style of programming, Mongrel makes writing HTML feel natural and easy. Mongrel also uses a SwiftUI like body structure allowing structs to be completely dedicated as an HTML page or element.

Nicholas Bellucci 12 Sep 22, 2022
A Powerful , Extensible CSS Parser written in pure Swift.
A Powerful , Extensible CSS Parser written in pure Swift.

A Powerful , Extensible CSS Parser written in pure Swift. Basic Usage From CSS: #View { "width" : 118; "height" : 120.5; "color1" : "#888888"; "co

null 273 Sep 9, 2022
Elm-parcel-capacitor - A sample setup to build an app with Elm, Capacitor, Parcel and Tailwind CSS

Elm, Capacitor, Parcel and Tailwindcss This project is a sample setup to build a

Anthonny Quérouil 10 May 9, 2022
Declarative view styling in Swift. Inspired by CSS modules.
Declarative view styling in Swift. Inspired by CSS modules.

Gaikan gives you powerful styling capabilities using a declarative DSL in Swift. Inspired by React: CSS in JS and CSS modules. To style UIView(s) just

null 141 Aug 23, 2021
SwiftLint - A tool to enforce Swift style and conventions, loosely based on Swift Style Guide.
SwiftLint - A tool to enforce Swift style and conventions, loosely based on Swift Style Guide.

SwiftLint - A tool to enforce Swift style and conventions, loosely based on Swift Style Guide.

Realm 16.9k Dec 30, 2022
A library that makes defines your style sheet like a breeze.

Atelier A library that makes defines your style sheet like a breeze. Requirements iOS 13.0+ Xcode 12.0+ Swift 5.3+ Installation You can add Atelier to

Hsieh Min Che 1 Dec 29, 2022
Rough lets you draw in a sketchy, hand-drawn-like, style.
Rough lets you draw in a sketchy, hand-drawn-like, style.

Rough (Swift) Rough lets you draw in a sketchy, hand-drawn-like, style. It is Swift clone of Rough.js. The library defines primitives to draw lines, c

null 96 Nov 24, 2022
STPopup provides STPopupController, which works just like UINavigationController in popup style, for both iPhone and iPad. It's written in Objective-C and compatible with Swift.
STPopup provides STPopupController, which works just like UINavigationController in popup style, for both iPhone and iPad. It's written in Objective-C and compatible with Swift.

STPopup STPopup provides STPopupController, which works just like UINavigationController in popup style, for both iPhone and iPad. It's written in Obj

Kevin Lin 2.6k Jan 6, 2023
Comments
  • Added Variadics for Semantic Purposes

    Added Variadics for Semantic Purposes

    Added support for variadics to be able to assign multiple CSSStyles to a view with a single addClassName call. Did the same for CSSStyle to eliminate the requirement for brackets in CSSStyle().

    CSSStyles or "Class Names"

    Before

    Text("Hello, world!")
  .addClassName(.blue)
  .addClassName(.lines)
  .addClassName(.padLeft)

    After

    Text("Hello, world!")
  .addClassName(.blue, .lines, .padLeft)

    CSSProperties

    Before

    Text("The history of languages")
  .setStyle([
    .font(.title),
    .height(responsive.r(40))
])

    After

    Text("The history of languages")
  .setStyle(
    .font(.title),
    .height(responsive.r(40))
)

    Note the absence of square brackets.

    I created Unit Tests using the ViewInspector framework for SwiftUI and can add those in a separate pull request if there's interest.

    opened by heloguy 1
Owner
hite
hite
GitHub
The Objective-C Style Guide used by The New York Times

NYTimes Objective-C Style Guide This style guide outlines the coding conventions of the iOS teams at The New York Times. We welcome your feedback in i

The New York Times 5.8k Jan 6, 2023
A style guide that outlines the coding conventions for raywenderlich.com

The official raywenderlich.com Objective-C style guide. This style guide outlines the coding conventions for raywenderlich.com. Introduction The reaso

raywenderlich 3.1k Jan 2, 2023
Style guide & coding conventions for Objective-C projects

This repository is no longer active. These guidelines build on Apple's existing Coding Guidelines for Cocoa. Unless explicitly contradicted below, ass

GitHub 1.7k Dec 9, 2022
The official Swift style guide for raywenderlich.com.

The Official raywenderlich.com Swift Style Guide. Updated for Swift 5 This style guide is different from others you may see, because the focus is cent

raywenderlich 12.5k Dec 30, 2022
Style guide & coding conventions for Swift projects

This repository is no longer active. A guide to our Swift style and conventions. This is an attempt to encourage patterns that accomplish the followin

GitHub 4.8k Jan 4, 2023
A style guide for Swift.

Table Of Contents Overview Linter Standards Naming Conventions File Structure Types Statement Termination Variable Declaration Self Structs & Classes

Prolific Interactive 171 Oct 4, 2022
LinkedIn's Official Swift Style Guide

Swift Style Guide Make sure to read Apple's API Design Guidelines. Specifics from these guidelines + additional remarks are mentioned below. This guid

LinkedIn 1.4k Dec 13, 2022
A powerful lightweight theme 🎨 manager for SwiftUI

SwiftTheming ?? is a handy lightweight handy theme manager which handles multiple themes based on system-wide appearances - light and dark appearances

Dscyre Scotti  38 Dec 29, 2022
A lightweight CSS parser for parsing and creating CSS stylesheets

SwiftCSSParser A lightweight CSS parser for Swift that uses cssparser (cpp) under the hood. Basic usage Here's a simple code snippet to get you starte

null 9 Jul 20, 2022
An awesome Swift CSS DSL library using result builders.

An awesome Swift CSS DSL library using result builders.

Binary Birds 57 Nov 21, 2022