Use css rule development iOS App,autolayout for CALayer
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example
SwiftyCss.xcworkspace
SwiftyCss
.gitignore
LICENSE
README.md

README.md

SwiftyCss

Use Css rule development iOS App

‼️ Significant change alpha 0.1.0

Installation

Simple

Drag SwiftyCss.framework/SwiftyNode.framework/SwiftyBox.framework from iOS/Release/ or iOS/Debug/

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

1. You can install Carthage with Homebrew using the following command:

$ brew install carthage

2. Add github "wl879/SwiftyCss" to Cartfile into your Xcode project

3. Run carthage update

If you want to view the debug information,run carthage update --configuration Debug

4. Drag SwiftyCss.framework/SwiftyNode.framework/SwiftyBox.framework from the appropriate platform directory in Carthage/Build/

Usage

Example

1

style.css

@lazy true
.body {top:64; bottom:40%; width:100%;}
.footer {bottom:0; width:100%; height:40%; background:#333; auto-size: auto}
.footer CATextLayer {color:#fff; font-size:10; left:10; right:10; top:10; word-wrap: true; auto-size:height;}
@media orientation:landscape {
    .body {top:33;}
}

#test-basic .box {background:#aaa;}

AppDelegate.swift

import SwiftyCss

class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        Css.load(file: Bundle.main.path(forResource: "style", ofType: "css")!)
    
        return true
    }
}

ViewController.swift

class ViewController: UIViewController {

    override func loadView() {
        super.loadView()
        self.view.backgroundColor = .white
        self.title = "Test Basic"
        self.view.css(insert:
            ".body#test-basic",
            "   CALayer.box[style=top:10;left:5%;width:43%;height:100]",
            "   CALayer.box[style=top:10;right:5%;width:43%;height:100]",
            "   CALayer.box[style=top:130;left:5%;right:5%;bottom:10]",
            "     CATextLayer[style=float:center;autoSize:auto;fontSize:16;color:#fff;][content=The center of the universe]",
            "UIScrollView.footer > CATextLayer"
        )
        if let text = view.css(query: ".footer > CATextLayer")?[0] as? CATextLayer {
            text.string = 
            css.joined(separator: "\n") +
            "\n------------------------------------------\n" +
            Css.debugPrint(self.view, noprint: true)
        }
    }
    
    // Css.manualRefresh == true
    // override func viewWillLayoutSubviews () {
    //    super.viewWillLayoutSubviews()
    //    Css.refresh(self.view)
    // }

}

Example screenshot

1

1

1

1

Documentation

Css module

  • Css.styleSheet: SwiftyNode.StyleSheet
  • Css.manualRefresh: Bool
  • Css.lazy: Bool
  • Css.load()
  • Css.load(file: String)
  • Css.load(_ text: String)
  • Css.refresh(_ node: SwiftyNode.NodeProtocol, async: Bool = false)

Extension CALayer and UIView attributes and methods

CALayer and UIView conforms to NodeProtocol

  • cssStyler: CAStyler
  • init(tag: String? = nil, id: String? = nil, class clas: String? = nil, style: String? = nil, action: Bool? = nil, disable: Bool? = nil, lazy: Bool? = nil)
  • func getAttribute(_ key: String) -> Any?
  • func setAttribute(_ key: String, value: Any?)
  • func css(id: String, class: String, style: String, action: Bool, disable: Bool, lazy: Bool)
  • func css(addClass: String)****
  • func css(removeClass: String)
  • func css(value name: String) -> Any?
  • func css(property name: String) -> String?
  • func css(insert: String...)
  • func css(query text: String) -> CALayer?
  • func css(queryAll text: String) -> [CALayer]?
  • func cssRefresh()

Support style selector rule

Support base CSS syntax,id, tag, class, and support nestification

CALayer {}
#header {}
#header .btn {}
#abc > .btn {}
#abc + .btn {}
#abc ~ .btn {}

Support pseudo classes

CALayer:nth-child(1) {}
CALayer:first-child {}
CALayer:last-child {}
CALayer:empty {}
CALayer:not(.box) {}
CALayer:not([width > 100]) {}

Support condition expression

CALayer[width > 100] {}
CALayer[float = left] {}

Support style propertys

width max-width min-width height max-height min-height

pt | number%

top left right bottom

pt | number%

float:

center | auto | top | left

align:

right | rightTop | left | leftTop | bottom | leftBottom | rightBottom

center | leftCenter | topCenter | bottomCenter | rightCenter

margin margin-top margin-right margin-bottom margin-left

pt | number%

padding padding-top padding-right padding-bottom padding-left

pt | number%

border border-top border-right border-bottom border-left

width || solid/dashed/(interval value) || color

shadow

y-offset || x-offset || radius || color

opacity fill or fill-color background-color or background

background-image radius shadow hidden z-index or z-position

text-align font-size font-name color content word-wrap

auto-size:auto/width/height mask or overflow transform animate

Support AtRule for StyleSheet

  • @lazy

    @lazy true enable lazy load mode

  • @debug

    ! Need to import the debug version

    @debug all, refresh, status, load, ticker, at-rule, usetime, listen, insert

    enable debug mode, this will print parse messages.

  • @media

    e.g. Definition of landscape style

    @madia orientation: landscape {
      ...
    }
    @madia iphone {
      ...
    }
    @madia ipad {
      ...
    }
    @madia min-width:320 {
      ...
    }

    Support media features

    iphone | ipad | ipadpro

    iphone4 (320/480) | iphone5 (320/568) | iphone6 (375/667) | iphone6plus (414/736)

    orientation:landscape | orientation:portrait

    Determine the size of UIScreen.main.bounds condition

    min-width:xxx | max-width:xxx | width

    min-height:xxx | max-height:xxx | height:xxx