What is this?

Right now this is just an idea. CSS has been around for quite some time and is the standard for laying out views on the web. It's often been a source of curiosity for me why that wasn't applied to mobile.

This particular library is meant to take a SCSS-like syntax and turn it into layout constraints. The hope is to provide a robust and easy way to lay out your views outside of the storyboard.

USAGE:

• STEP 1: Add .css or .scss files to your bundle
• STEP 2: Setup your views (you can use a storyboard or do this programmatically)
  • Do not set up constraints on any of your views. This is an all or nothing kind of framework and it'll blow away any constraints you do have
• STEP 3: Add classes or IDs to your view (ID == accessibilityIdentifier). Once again this can be done via the storyboard or programmatically
• STEP 4: Hand your superview off to the CSS parser EXAMPLE:

    import iOSCSS

    //... general view controller setup, class definition etc...

    override func viewDidLoad() {
        super.viewDidLoad()
        view.className = "master"
        Parser.shared.setup(view)
        // Do any additional setup after loading the view, typically from a nib.
    }

Supported SCSS-like syntax:

Class/ID nesting, example:

.outer {
    background-color: blue;
    .inner {
        height: 20pt;
        width: 20pt;
    }

    #findme {
        height: 200pt;
    }
}

Supported CSS terms:

Colors:

The color value supports shorthand hex, hex, rgb, rgba, hsl, hsla and 100+ named colors, the same as CSS

background-color: #fc0;
background-color: #00ff00;
background-color: rgb(120, 120, 255);
background-color: rgba(255, 255, 255, 0.8);
background-color: hsl(120, 100%, 100%);
background-color: hsla(120, 100%, 100%, 1);
background-color: blue

Size values:

Since pixels aren't really a thing in iOS this framework mostly cares about the number and not any other characters, feel free to use the following syntaxes:

left: 100pt;
left: 100;

background-color:

background-color supports shorthand hex, hex, rgb, rgba, hsl, hsla and 100+ named colors, the same as CSS

border-<top|bottom|left|right>-color:

border-color supports shorthand hex, hex, rgb, rgba, hsl, hsla and 100+ named colors, the same as CSS

border-<top|bottom|left|right>-color:

border-color supports shorthand hex, hex, rgb, rgba, hsl, hsla and 100+ named colors, the same as CSS

border-<top|bottom|left|right>-width:

Numbers entered here will be translated into points.

Positioning

<top|left|bottom|right>:

Numbers entered here will be translated into points. Constraints will be made between the view and its' superview when these are specified directly.

Alternately you can specify a particular view by class/ID that you want a margin against. Please note: this will match against the first view in the higherarchy it can find with that class/ID.

EXAMPLE:

.test {
    left: from(#someID, 10); /* gives a left-margin of 10 points from the view with an ID of "someID"*/
    left: from(.someClass, 10); /* gives a left-margin of 10 points from the view with an className of "someClass"*/
}

center-<x|y>:

You can specify a particular view by class/ID that you want a margin against. Please note: this will match against the first view in the higherarchy it can find with that class/ID.

EXAMPLE:

.test {
    center-x: with(#someID); /* gives a center horizontal constraint with the new view that matches the ID of "someID"*/
    center-y: with(.someClass); /* gives a center horizontal constraint with the new view that matches the class of "someClass"*/
}

<height|width>:

Creates a height and/or width constraint on the view