Home

Awesome

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))
])