tolo / interfacss Goto Github PK
View Code? Open in Web Editor NEWThe CSS-inspired styling and layout framework for iOS
License: MIT License
The CSS-inspired styling and layout framework for iOS
License: MIT License
It would be nice if there was a support for a shorthand versions of these files like there is in CSS.
For example:
point(10, 10)
=> point(10)
insets(10, 10, 10, 10)
=> insets(10)
insets(10, 0, 10, 0)
=> insets(10, 0)
What do you think?
I see that a singleton Stylesheet parser is kept by InterfaCSS - do you think it would be thread safe to create another instance if the Parser to parse data in a worker thread? I think the only thing lost in this case would be CSS constant definitions (@stuff: "stuff").
Clearly the UIView styling passes need to be in the UI thread - but do you think the parsing, factory stuff could be threaded safely?
In the HelloISSLayout example file layout.css has entry
#layoutGuideLabel {
layout: top(guide.top + 1), centerX(parent);
}
I could not find anything in the Wiki that discussed guide. Is there also a guide.left, guide,right, guide.center ?
Would be cool if you could set a frame or layout and tell it to keep its x and y value. Something like:
.offerRowView {
frame: rect(current, current, 30, 100%);
}
Please migrated UIWebView to WKWebview.
Attempting to create a styled tabBarItem in xml, results in UIView being allocated and assigned to filesowner.tabBarItem - I suspect a similar situation might occur for navigationItem
<?xml version="1.0" encoding="UTF-8"?>
<view class="root">
<tabbaritem property="tabBarItem" class="foo" add="NO"/>
</view>
in the current SimpleSample example, the implementation used the methods
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation;
both of these are marked as deprecated in iOS8. InterfaCSS seems to depend on a trigger to restyle the views after rotation occurs (example shows the call being made in didRotateFromInterfaceOrienation)
Is there a suggested pattern to follow to ensure that styles are kept up to date in iOS8 or higher targets?
Hi,
First of all, great library :)
I realised that there is no support for RGBA hex string although, with the following code it should be easy to support it.
+ (UIColor*) iss_colorWithHexString:(NSString*)hex {
hex = [hex iss_trim];
if ( hex.length == 6 ) {
NSScanner* scanner = [NSScanner scannerWithString:hex];
unsigned int cc = 0;
if( [scanner scanHexInt:&cc] ) {
NSInteger r = (cc >> 16) & 0xFF;
NSInteger g = (cc >> 8) & 0xFF;
NSInteger b = cc & 0xFF;
return [self iss_colorWithR:r G:g B:b];
}
} else if ( hex.length == 8 ) {
NSScanner* scanner = [NSScanner scannerWithString:hex];
unsigned int cc = 0;
if( [scanner scanHexInt:&cc] ) {
NSInteger r = (cc >> 24) & 0xFF;
NSInteger g = (cc >> 16) & 0xFF;
NSInteger b = (cc >> 8) & 0xFF;
NSInteger a = cc & 0xFF;
return [self iss_colorWithR:r G:g B:b A:a];
}
}
return [UIColor magentaColor];
}
Could you integrate it into the master branch or do you want me to raise a pull request ?
BR,
The ISSViewHierarchyParser treats subclasses of UITableViewCell as a custom view type, and therefore does not call the designated initializer -initWithStyle:reuseIdentifier: -- as a side effect - the UITableView's dequeueReusableCellWithIdentifier: is not able to recycled Subclassed UITableViewCells.
The Sample's PrototypeExampleCell exhibits this behavior.
In Classy (which we used until now) you can use a custom view name as a selector. As we have a lot of custom views (deriving from UIView), it is a pain to a class name every where. Would this feature be possible?
Hey!
I'm experiencing some latency loading css with an iPhone 5.
`[[InterfaCSS interfaCSS] loadStyleSheetFromMainBundleFile:css];``
"Loaded stylesheet 'main.css' in 2.489952 seconds"
Is there any way to optimise it?
I see that there's a pattern of using fixed or relative sizing - do you see it to be a valid use case to support auto sized labels (perhaps with a min/max size) - perhaps allowing easier integration of dynamic type?
Additionally - do you think having a block like layout would be useful?
I am working on some ideas around data-binding of UI elements to models. I suspect that it will need some additional properties that are parsed from XML.
Similar to how AppKit on Mac supports data binding.
It might be helpful to include a parse delegate that can be consulted for the purpose of extending the parse model.
Or do you think this might be an area of interest in the core of InterfaCSS?
It would be great if there was a way to style an NSAttributedString somehow. I know this might be a bit out of scope of this project, but I would love to be able to style a string I have in code with styles in stylesheet.css
.
For example the text might look like:
<span class="bold">Some bold text</span> and some regular.
and would result in
Some bold text and some regular.
I have quite a large stylesheet file (2048 lines) and I found out that InterfaCSS takes awful lot of RAM. I run profiling and found out that InterfaCSS keeps allocated about 260MB of RAM. Most of the trace seems to be in [Parcoa parse]
.
Is this normal? And is it because of the large file? Even if I split it to multiple CSS files, I will still need to load them sooner or later and will get the memory usage that high again.
Any ideas?
Have you given thought on how to size a frame to maintain an aspect ratio of height vs width?
Example, you want a square view within a resizable parent frame.
Whitespace after variable name causes error:
@stdColor1 : #356b91; -> Unrecognized property variable
@stdColor1: #356b91; -> No error
Stylesheet:
Label {
font: AFont 15;
}
UIButton {
titleLabel.font: BFont 20;
}
Will yield a button with a label with font AFont 15
instead of BFont 20
. The order of style does not matter unfortunately. Or is this something that cannot be fixed?
It would be nice if we could do some calculations in the stylesheet. For example I have a constant called @gridStep
and I would like to do something like cornerRadius: calc(@gridStep * 2);
. Currently I could not find a way to do this in ISS. Is it possible? Or would that feature be possible to add? Thanks.
When parsing styles, it would be good to have a way to delegate the loading of images.
Specifically - I'm thinking about allowing remote images to be specified in the image style markup. This likely has implications for layout or layout managers.
@tolo Really fantastic work with this!
I noticed AutoLayout support is something that hasn't been implemented yet. Just wanted to hear your thoughts on why you chose to go with absolution positioning over AutoLayout (not that it was a bad choice). Is AutoLayout a direction you think this may take in the future?
This also ties in a bit to supporting multiple devices... I imagine in order to support multiple devices (or orientations) we'll either have to a) write additional layout code or b) create a separate CSS file. Usually different orientations have different layouts anyways so a separate file may not be a bad thing.
NSAttributedStrings support a negative kern value, but the
ISSPropertyTypeNumber rejects negative numbers
While it is easy to support custom string properties by way of registerCustomProperty, it seems less clear how to support custom properties with enumerated types - as the implementation to create these is private and the the returned ISSPropertyDefinition consists of readonly fields. should these be promoted to a public interface? Should registerCustomProperty have a implementation that accepts a ISSPropertyDescription?
// Private initializer
- (id) initWithName:(NSString *)name aliases:(NSArray*)aliases type:(ISSPropertyType)type enumBlock:(NSDictionary*)enumValues enumBitMaskType:(BOOL)enumBitMaskType;
Environment: iOS 12.1.* , Xcode 10.1
Question: How do I use the iOS system font in the .css file reference font: ...;
?
San Francisco font is the default iOS font. It is not accessible via name reference and needs to be installed as a resource to use and reference. This is not convenient and feels a little over the top to simply reference the default system font with a weight and size.
Normally a reference to the font name like font: AvenirNext-Regular 15
would be how to set the font for a label. However, using font: System-Regular 15
or font: SystemFont-Regular 15
returns the following error message:
InterfaCSS: ISSPropertyDeclaration[font] - Unable to set value on <UILabel...
This also causes a crash on attributed strings as the font is nil
which is not permitted in arrays or dictionaries.
Two feature requests:
UIColor
. Consider implementing a resolution for ISSPropertyDeclaration[font] - Unable to set value ...
by returning the system font with passed in parameters of size and weight. Example:if (!font) { return [UIFont systemFontOfSize:size weight:weight]; }
/* fontName: FontName; (string) */ fontWeight: bold; // (enum) fontSize: 17; // (integer)
Any assistance in the interim would be greatly appreciated.
It appears that font names which contain spaces can not be specified in style. Adding quotes did not seem to help --- name is parsed as first token in font name
font: Times New Roman, 24
nor does an it help to use a constant
@timenewroman: Times New Roman;
font: @timenewroman, 24
Can you document the usage pattern around
- (ISSPropertyDefinition*) registerCustomProperty:(NSString*)propertyName propertyType:(ISSPropertyType)propertyType;
It looks like what I might need for supporting custom view attributes. It looks like it's parsing the attributes, but I don't understand how I am meant to register a setterBlock
UIColor - the wiki suggests that gradient can not be nested with other color functions, but I expected that named colors were treated as values, not functions. The gradient parser does not get called when passing named colors.
Fails
gradient(white, black)
Succeeds
gradient(rgb(255,255,255),rgb(0,0,0))
I'm finding times when I'd like to style parts of a UIControl that aren't covered by the normal UIControlState values.
I'm playing with extending PseudoClasses, adding selected and highlighted. This allows me to change a wider number of style-able properties based on the state of the control.
case ISSPseudoClassTypeControlStateSelected: return @"selected";
case ISSPseudoClassTypeControlStateHighlighted: return @"highlighted";
// similar treatment as enabled/disabled
case ISSPseudoClassTypeStateEnabled: return @"enabled";
case ISSPseudoClassTypeStateDisabled: return @"disabled";
I could see the being part of the default set of PseudoClasses - but it perhaps this is really a feature request for supporting an extensible ISSPseudoClass implementation?
Hi,
This returns a UIStepper, not a UiSwitch :)
+ (UISwitch*) switchWithId:(NSString*)elementId {
return [self setupView:[[UIStepper alloc] init] withId:elementId andStyleClass:nil];
}
+ (UISwitch*) switchWithStyle:(NSString*)styleClass {
return [self setupView:[[UIStepper alloc] init] withStyleClass:styleClass];
}
Running version 1.5.
Actual InterfaCSS question
Have you considered representing the top and bottom layout guide into the CSS styling?
I've noticed that embedding the PrototypeExampleViewController in a UINavigationController results in a clipped main title. This can be addressed by removing the Extend Edges under top bar, but it would be nice to be able to adjust the top or bottom margins to allow the current root view to add color under the navigation bar and/or tab bar.
In the file Parcoa+ISSAdditions.h
there is #import "Parcoa.h"
which does not work with CocoaPods 0.38.2 and use_frameworks!
directive. I managed to make it work by changing it to #import <Parcoa/Parcoa.h>
but I'm not sure if this is the correct way.
On IOS UITableview and UICollectionView both seem to have a reuseIdentifier registry specific to the instance.
I would think that ISSViewHierarchParser should not call [[InterfaCSS interfaCSS] registerPrototype:currentPrototype]; but instead call UITableView/UICollectionView registerClass:reuseIdentifier:
I think there are still issues related to issue #7 which may require something more dynamic.
In my presented view controllers I am hiding the status bar by returning YES from prefersStatusBarHidden. But FCOverlayViewController defaults to showing the status bar causing a 'jump' as the status bar hides itself and the presented view expands to fill the area.
Adding the following to FCOverlayViewController.m won't work because at the point it is called self.presentedViewController is nil.
- (BOOL)prefersStatusBarHidden
{
return [self.presentedViewController prefersStatusBarHidden];
}
It seems the only way to support this would be add an extra parameter to presentOverlayWithViewController:windowLevel:animated:queued:completion: in FCOverlay.m and implement it in FCOverlayViewController.m too.
What are you thoughts on this?
Do you have an idea on how you'd like to see describing the style for a UICollectionViewFlowLayout? Or the ability to specify a concrete instance of an alternative layout?
It would be great to allow configuration of the default, but it would also be nice to be able to pass properties to the layout to allow it to be configured as well. Consider both UICollectionViewFlowLayout and the more generic UICollectionViewLayout. The later will likely require a much more flexible definition of properties.
I have been trying to extend some properties to support UIControlState (tintColor) for a custom control. But it appears that a duplicate custom property does not get called - it would be great if custom properties would get called - ideally with the setter block for the original implementation - so that the original implementation could get called in the event that the override's special doesn't have to reimplement the original version.
When using InterfaCSS
in a extension target, build fails:
Implementation often relies on UIApplication
, and +sharedApplication
and other methods got attribute NS_EXTENSION_UNAVAILABLE_IOS
Hi,
Is it possible to use an UIStoryboardSegue
from a UIButton in Storyboard? It seems that InterfaCSS blocks my segue.
Code:
-(void)loadView
{
[super loadView];
self.view = [ISSViewBuilder rootViewWithStyle:@"sliderMainView" andSubViews:^NSArray *{
return @[self.okBtn = [ISSViewBuilder buttonWithId:@"onboardingOkButton"]];
}];
}
Apple added a few wrinkles to UIKit in the tvOS variation. Do you have a style preference for how to remove unsupported methods? Ifdef's - stub classes? macros?
I'll likely be sending a pull request in the next couple days with some of these edits as I get the rest of my project working.
ISSParcoaStyleSheetParser's attributedString parser is handy. It would be nice to be able to use the attributed string format used the style sheets for non-style sheet delivered data.
Can parsePropertyValue:ofType: be a public method, or exposed some other way?
ISSParcoaStyleSheetParser *parser = [[InterfaCSS sharedInstance] parser];
NSAttributedString *attribuedString = [parser parsePropertyValue:@"\"Simple\" (foregroundColor: red), \" Sample \" (foregroundColor: #3f3f3f), \"Main\" (foregroundColor: #ab45ec)" ofType:ISSPropertyTypeAttributedString];
label.attributedText = attribuedString;
I'd propose supporting pseudo classes that allow styling on device form factor.
as a minimum "phone". "tablet" -
I could see perhaps following the pattern of size-classes instead (width-compact, width-any, width-regular, height-compact, height-any, height-regular)?
It might also be helpful if the Pseudo Class Parse supported multiple Pseudo Classes in a style definition - or is there another way to express this already?
.simple:phone:landscape{
backgroundColor: red;
}
.simple:phone:portrait{
backgroundColor: blue;
}
.simple:tablet:portrait{
backgroundColor: pink;
}
.simple:tablet:landscape{
backgroundColor: green;
}
I don't seem to get working this:
UICollectionViewCell {
someProperty: value;
}
UIView.main {
UICollectionViewCell {
someProperty: otherValue;
}
}
When doing this, the style does not get applied and also I need to call UIView#scheduleApplyStylingISS
myself in the dequeue
method of delegate. Is this a bug or something that cannot be fixed? Or is it something with my code?
PS: Applies to UITableView as well.
It would be good to enable a viewcontroller to namespace a stylesheet. I want to be able to ensure that styles associated with a stylesheet are not leaked into another viewcontroller.
I am setting my code up such that a viewcontroller load's and retains it's own stylesheet - and removes it when the viewcontroller is deallocated. I sometimes find that naming conventions of style classes in similar but different views sometime will cause styles to leak into another view's viewcontroller.
In a simple application global styles are nice, but as an application grows I think that being able to support some kind of non-global stylesheet would be helpful.
I think the web analog would be an iframe - but that's not exactly the same, as I'd expect global styles to still be inherited.
So perhaps if a stylesheet could be modified after being loaded, and all the selectors chains could be modified in be scoped inside a generated classname selector. And the viewcontroller could assign this classname to the ViewController.view.
I'm getting errors when I try to set for example keyboardType
(or other UITextInputTraits
properties) from stylesheet. The error is that the UITextInput
is not coding-compliant with the property's name (e.g. keyboardType
). Is this a problem when using InterfaCSS with Swift or a bug even in ObjC?
I'm using a library called IQKeyboardManager
(https://github.com/hackiftekhar/IQKeyboardManager). But when I select a textfield and use IQKeyboardManager
next function my app throws an exception at ISSUIElementDetails.m
:
I used this library before and it worked perfectly. Any idea what's causing this?
I would really love if these two great libraries could work together :)
For example:
UITabBarController > UIView {
backgroundColor: white;
}
Now I can't seem to find a way to style a root views (only by setting the styleClass for the view itself).
I have a UITabBarController with 5 tabs. When I switch to another tab, the views are not styled immediately, but after a fraction of a second. It is still visible though and you can see the style getting applied. Is this a bug of InterfaCSS or is it in my code?
I want to use a division operator in my layout statement in a .css file,
#sbButtonLR {
layout: size( sbRoot.width/3, @buttonHeight ),right( parent.width -10 ), bottom( sbGuide.bottom );
}
Subtraction works fine, but not clear how to multiply or divide
#sbButtonUR {
layout: size( sbRoot.width-200, @buttonHeight ),right( parent.width -10 ), top( sbGuide.top );
}
For a working example of this bug see the sample program InterfaCSS-Example on GitHub.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.