🪄`LivePreview` support

Live preview

To make it work with live preview you need to specify either all styles or exact autolayout's one

With all app styles included

class Welcome_Preview: WebPreview {
    override class var title: String { "Initial page" } // optional
    override class var width: UInt { 440 } // optional
    override class var height: UInt { 480 } // optional

    @Preview override class var content: Preview.Content {
        // add styles if needed
        AppStyles.all
        // add here as many elements as needed
        WelcomeViewController()
    }
}

With exact app styles including autoalyout's one

class Welcome_Preview: WebPreview {
    override class var title: String { "Initial page" } // optional
    override class var width: UInt { 440 } // optional
    override class var height: UInt { 480 } // optional

    @Preview override class var content: Preview.Content {
        // add styles if needed
        AppStyles.id(.mainStyle)
        AppStyles.id(.autolayoutStyles)
        // add here as many elements as needed
        WelcomeViewController()
    }
}

⚡️The full power of CSS3

I'm in love with iOS autolayout and building web without its power is painful job.

I experimented with autolayout and built fully working version 0.0.1 using JavaScript and it works great until any page resize, then JS reflows UI too many times and UI become laggy during resize. You can try it if you want with tag 0.0.1, it is full copy of iOS with the power of relative constraints. Maybe I will use it in the future when browsers will give batch CSS updates or something else.

Current version 1.0.0 is built on pure CSS3 with the power of its translate and variables. So no lags at all. Pure power and maximum FPS.

All the details are available in the README.

Enjoy! ⚡️

🚁 Taking off

0.0.1