This document is showing the various ways we set backgrounds for all supported controls:

https://github.com/Pixate/pixate-freestyle-ios/wiki/UIView-Background-Handling

(From user seivan)

I think Pixate and non-DOM design could do well by introducing some practices of their own that would find the native style software development (compared to say DOM and HTML).

One practice that I use here is to set the name of the class of each controller on its view styleId and the name of the super class as its styleClass.

That way I can have @import 'includes/controllers/*'; in my default.css.scss.

The purpose is that you might have a viewController OR a set of viewControllers that might have different button design.

One sample is for instance our signup progress or our on boarding process.
All signup views inherit from a signup super class.

That way I can do

#XXXSignUpSuperViewController {
   .button {  
      border-radius: inherit; 
    }
}

There are probably some opportunities to optimize our vector graphics rendering. This ticket is here to capture some thoughts that will need further research. That research should give us an idea of the best approach we can use to optimize rendering while allowing good flexibility to our end users allowing them to modify and augment our rendering:

• GPU-based rendering - Loop-Blinn - http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf
• GPU-based compositing
• GCD to render individual shapes in a scene, or maybe parallel rendering of scenes
• Convert scene to an array of drawing commands - possibly cache this instead of the scene
• May be able to utilize CAShapeLayers

Currently, we collect the declarations to apply to a given styleable, for all states the styleable supports. That gives us an opportunity to cache this information. However, for now, we simply apply the style info right away.

We will have to consider how best to implement this functionality. Initial thoughts are that we can store style info in an NSCache, keyed by the styleable. We need a way to invalidate cache entries if a style info contains a declaration pointing to a stylesheet that has been reloaded or is no longer active/valid.

NSCache allows for a delegate. This delegate can be used to know when items are being pushed out of the cache. We may want to consider serializing the style info to disk, temporarily per run, or even permanently between runs. However, we need to determine if it's faster to calculate styles or to deserialize style info from disk.

We also have the ability to store style info for an entire sub-tree. This is particularly helpful with table view cells and collection view cells. However, this could be applied to other sub-trees. This might turn out to be useful for statically styled sub-trees.

The framework is using "[setFinishedSelectedImage: withFinishedUnselectedImage]" to set the selected and unselected states of a tab-bar-item. According to the docs, this has been deprecated in iOS 7. We should use image and selectedImage with UIImageRenderingModeAlwaysOriginal instead.

Note: UIImageRenderingModeAlwaysOriginal is only avail on iOS 7

need ability to change the color of a rendered svg graphic

If the user places some properties in the top level object and some other ones in the attributed-text child, the attributed-text settings override the base settings, but if a value like color isn't set in the attributed-text version, then color is lost, for example.

Add support for the glyph and text elements in SVG

We currently have this value defaulting to zero. I think it should stay that way in the model itself; however, the SVGLoader can set this to 1 if no stroke-width is specified.

If there is no border radius or alpha, generated images should be opaque.

perhaps also add a background property...

opaque: true [background color] that allows user to specify the color that the transparent areas become (when flatting an image that has opacity)

background-image: none;

does not work once a background image has been set

UIBarButtonItem supports 'rendering-mode' but many of the other controls don't. Add consistent support for it (which allows to tint images/svg icons).

Add support for background-image: none

allow manipulation of the styleClass attribute via the DOMTokenList API:

http://dom.spec.whatwg.org/#domtokenlist

For example, with the following gradient:

    linear-gradient(yellow, blue 20%, #0f0);

we should have stops 0%, 20%, and 100%; however, we recalculate all offsets and end up with 0%, 50%, and 100%.

The workaround for now is to use an offset for each stop.

I want to target the children of selected table-view-cells. I can't."

Example:

.MyTableViewCell:selected > label{
font-weight : bold;
}

Makes all labels bold.

Need to add support for styling this view, not so much to style it, but to allow it to also be in a not() group for non-styling (ie. style all labels except those that are in an UIAlertView).

To better clarify it's usage, we should rename PXStylerContext.color to backgroundColor. The PXColorStyler and PXPaintStyler use our catch-all mechanism to add "color" properties. We should create a new "color" property for those stylers after this one has been renamed

#myTableView table-view-headerfooter-view { ... }

doesn't work as table-view-headerfooter-view doesn't work as a child. it should.

This does not work:

userCell text-label {

font-family: Comfortaa;
font-size: 20;

}

userCell detail-text-label {

font-family: Comfortaa;
font-size: 16;
color: red;

}

This one does not work as well:

userCell text-label attributed-text {

font-family: Comfortaa;
font-size: 20;

}

userCell detail-text-label attributed-text {

font-family: Comfortaa;
font-size: 16;
color: red;

}

This view probably shouldn't be stylable per Apple's request.

Can you distinguish UINavBars by parent somehow?

If a user is using "WhitneyCondensed-Bold", they have to use the following CSS:

font-family: "Whitney Condensed";
font-stretch: condensed;
font-weight: bold;

It's a little challenging to determine that. So, we should allow the following:

font-family: "WhitneyCondensed-Bold";

We also have cases where there are ambiguities between what is specified in CSS and what PS names those map to. This would allow those cases to be disambiguated

workaround for now is to use a very large number for iteration count.

I was hoping to animate an attributedString like so. Is there support for this yet?

  label.name {
    attributed-text {
      transition: letter-spacing 1s linear;
      font-size: 14pt;
      letter-spacing: 1.8;
    }
    &.navigationbar-title {
      attributed-text {
        letter-spacing: 0.5;
      }
    }
  }

Basically, we need to clip to those values as an upper bounds. We need to verify if this same rule applies when using percentages.

switch on{
background-color:#7CAEE0;
}

This was tested on iOS 6.1

The following CSS does not work:

#gpbutton:selected icon{  
    background-image: url(logo-gplus-white.png);  
    background-size: 20px;  
}  
#gpbutton:normal icon{  
    background-image: url(logo-gplus.png);  
    background-size: 20px;  
}

This is due to the fact that the framework processes pseudo-classes on the last element only. We need to make an exception for virtual children to allow this case to work properly.

Currently, we default to 16pt as our font size, if none is specified in CSS. This causes styling that sets font properties, not including font-size, to change the size of the font in the view. Pixate should try to preserve current settings when none are provided.

With the following CSS applied:

#todo_title
color: red;
text-shadow: 2px 2px 20px #000;
}

The blur does not appear to have any effect regardless of the value.

FileWatcher is able to monitor files; however, if a file is imported from another CSS, we need to reload that parent CSS file when the imported file changes.

We have a few choices:

Allow PostScript names for font families
Allow for a "book" font-style, since we already support normal
Use slightly different numbers for "Heavy" and "Black". Right now they both map to 900 per the spec.

iOS 6

Crashed: com.apple.root.default-priority
EXC_BREAKPOINT UNKNOWN at 0xe7ffdefe

Thread : Crashed: com.apple.root.default-priority
0 ??? 0x2fe2f0c4
1 ??? 0x2fe2fef3
2 ??? 0x2fe31644
3 libdyld.dylib 0x3ae771fc dyld_stub_binder + 20
4 GRR 0x0044164d -[PXEllipticalArc initWithCx:cy:radiusX:radiusY:startingAngle:endingAngle:]
5 GRR 0x0044157f CGPathAddEllipticalArc
6 GRR 0x003fbd1d -[PXRectangle newPath]
7 GRR 0x00436e8d -[PXShape path]
8 GRR 0x004373cd -[PXShape render:]
9 GRR 0x00437585 -[PXShape renderToImageWithBounds:withOpacity:]
10 GRR 0x00442a8d -[PXStylerContext backgroundImage]
11 GRR 0x0041cef5 +[UIBarButtonItem(PXStyling) UpdateStyleWithRuleSetHandler:context:target:]
12 GRR 0x0041ce39 -[UIBarButtonItem(PXStyling) updateStyleWithRuleSet:context:]
13 GRR 0x003fd801 -[PXStyleInfo applyToStyleable:]
14 GRR 0x0041f85f +[PXStyleUtils updateStyleForStyleable:]
15 GRR 0x0041f9cf +[PXStyleUtils updateStylesForStyleable:andDescendants:]
16 GRR 0x0043447f -[UIBarItem(PXStyling) setStyleClass:]
17 GRR 0x010d5873 -RTPSPDFActionBarButtonItem initWithPDFViewController:
18 GRR 0x010de6e1 -RTGRRDocumentsViewController init
19 GRR 0x010cfd93 __32-[RTGRRItemsViewController init]_block_invoke55 (RTGRRItemsViewController.m:85)
20 libdispatch.dylib 0x3ae5811f _dispatch_call_block_and_release + 10
21 libdispatch.dylib 0x3ae5c961 _dispatch_root_queue_drain + 252
22 libdispatch.dylib 0x3ae5cac1 _dispatch_worker_thread2 + 84
23 libsystem_c.dylib 0x3ae8ca11 _pthread_wqthread + 360

css
.action-text {
font-family: Comfortaa;
font-weight: bold;
font-size : 20px;
color: red;
background-color: green;

border-radius   : 5px;
border-width    : 1px;
border-color    : white;
border-style    : solid;

}

provide a list of elements and supported attributes

Add ability to Set number of lines for a UILabel.

In a box shadow defined with

'box-shadow: 0px 1px 1px 5px #000'

the 5px spread value has no effect.

add remote url support to @import

note: this should be synchronous so that could have a dramatic effect on startup time.

Looking at the spec:

http://www.w3.org/TR/css3-background/#the-box-shadow

shadow syntax is

<shadow> = inset? && [ <length>{2,4} && <color>? ]

where && means items may occur in any order. The following is a link to the value type syntax

http://www.w3.org/TR/css3-values/#value-defs

I have a UILabel that is being styled using the attributed-text property. I need to grab the updated frame after the styles are applied. Since Im in a layoutSubviews while checking this, I wanted to force an early styling with -updateStyles, but the frame appears to be the same even after calling this, but the actual frame should be wider (and is later in the lifecylce).

UITextFields have their own 'border-style' property (border-style: none | line | bezel | rounded-rect), which is conflicting with the generic border-style property. Thus, unless the iOS-specific border style is set in IB, the border style property in the CSS won't work properly.

UITableView doesn't support "content-inset: 50 0 50 0" property

According to reference there're pseudoclasses which can be assosiated with specific states:
There're 4 pseudo-states for 'ubutton'control, such as
drawRubber icon { }
drawRubber icon:highlighted { }
drawRubber icon:Selected { }
drawRubber icon:highlighted selected { }
The last one, when set, wouldn't work. How can I set both 'selected' and 'highlighted' states

Have you guys merged Pixate with Freestyle fully?
Is it eventually going to be impossible to get Pixate without Freestyle?

Also is this Pixates entire source code?

In map views, we can easily customize the annotations as explained here:
http://www.pixate.com/blog/2012-12-16-mapview-annotations/

However, the callout can not be customized so easily. Basically, what I need is a way to specify different fonts for the title and the subtitle. I have tried this code:

map-view label {
    font-family: $font-regular;
}

This changes the fonts, but both of them. Any idea how can I change them separately? also, the legal attribution label of the map is changed, which is probably not a good idea.

Thanks!

Please implement support for the CSS "line-height" property.

Hey Pixate Team,

I wanna get a license key over your website
pixate.com/key

But the site can not be loaded :(
How to get a license key?

Cheers,
Fab

This ticket exists to capture some thoughts on how we might optimize styling by reducing the amount of tree walking that is occurring.

• Use plist to set the default value for pxStyleMode
• If style mode is off, then we may be able to prevent sub-classing
• Minimally, we should simply call [super layoutSubviews] and exit if the style mode is none
• I think we are now doing too much work walking virtual children. Perhaps we should revert back to having the application of styling also applying styles to virtual children as before. We removed that because we're getting duplicate styling

Support borders on individual sides, not just all the way around.