Is there a single set of documentation that provides a complete listing of every ionic CSS class names and what elements they can be applied to? I’ve found that the set of class names are strewn throughout the CSS / JS documentation online. There seem to be classes that aren’t documented at all, but rather are found in forum posts (e.g. has-header).
Each entry would have:
className | description | element name list
Such documentation would be incredibly useful.
Thanks
Jason
Rest? Check the css files and forums; )
I agree on the idea, but getting something that detailed would be a real pain for them to maintain.
Plus, I don’t see what you mean by an “element name list”. Something like div,span,input etc ? As you know already, CSS classes can be applied to any element in HTML.
I mean class names as they can be applied to an “ion-*” element.
I think the documentation can be derived. I was experimenting with SublimeText 3 with an Ionic plugin and one that dissects CSS files to extract classes. The text editor was able to auto-complete (show options) for many ionic tags. The current set of Ionic documents doesn’t have the class names in one place. For example, ion-content supports a “has-header” attribute. I found this out by trawling the forums. It’s not mentioned in the documentation for the ion-content element. Perhaps it’s elsewhere. I just like to make things easier. Thoughts
The official docs don’t provide a Ionic class listing. The names of classes are strewn throughout the docs. AFAIK
Any element supports the “has-header” attribute, not only ion-content.
Sure it plays well with ion-content, but you can also use it on something else if you decide to not use ion-content for instance.
“has-header” is just a collection of rules, as is any other class.
Providing a CSS class listing would be pretty much copying the CSS file and replacing the detailed rules by some comment. I guess if they ever do this, they had better do it directly in the source CSS for maintenance purpose.
Yes, but a framework that relies heavily on CSS should be providing documentation for everything relevant. Zurb Foundation is able to do this and so is Bootstrap. I don’t think complete CSS documentation is an unreasonable request.
For instance, just today I discovered that icon-accessory is not documented.
I get your point. Myself, I just don’t get my hopes up any more, seeing how they consider breaking basic HTML functionality is not a bug and deserves no mention in the doc (https://github.com/driftyco/ionic/issues/3211)
Hi all,
I’m the original poster. Thank you all for your responses.
What I’ve found in using Ionic or any other HTML5 UI tool kit is that a significant chunk of the magic is implemented in pretty sophisticated CSS. I find it hard for me grasp the full capabilities of the framework without having a detailed reference for the many CSS styles — what they do, what elements they can be properly applied to, how they can be used in combination, etc. I resort to searching through the CSS declarations in files and inspecting the live runtime use of the styles in a debugger.
SaaS support is very helpful in unearthing some the details. By looking at where there are SaaS variables in the SaaS-a-fied CSS declarations I can gain some understanding of how CSS styles are tied together to achieve an overall look and feel. It would also be tremendously helpful if there was full documentation on each of the SaaS variables – what they control.
I understand that this form of documentation is a big undertaking, but it would so very beneficial to developers. Particular to developers like me who are are not experts at CSS and are deliberately using a framework to avoid working at the CSS level. Ideally, I want to adjust the settings that control the CSS look and feel and a complete inventory of what tools are at my disposal.
Related: How can I use the SaaS compiler statically, rather than live. Adding SaaS support adds a whole lot of bulk to a project, which seems to be for the purpose of running the compiler on the fly. What I’d like to see is a standalone tool that will recompile any project that uses SaaS to produce the static final result. Is this possible?
Thanks so much.
Jason
Hi.
I want to escalate the importance of thorough CSS documentation. What would be helpful is a complete A-Z listing of every CSS style, it’s variations and what is does within the context of the framework. It would also be helpful to document interactions and side effects of using them together.
So here’s my situation. I’m trying to build a commercial app. I come from the J2EE world — all back end architecture – no client side frameworks. I chose Ionic over all other hybrid frameworks because (1) it’s built on Angular (2) provides the full complement of mobile UI elements / behaviors. But what I’m finding is that I have to hunt for for hours in the forums, on Internet and excavate CSS files to find solutions to problems that seem fundamental to me. A framework, IMHO, should be productivity accelerator. I feel frustrated and stupid as my 30 years of engineering experience is not getting me very far.
I’m getting the impression from the many questions in the forum, that folks are crying out for better documentation, more recipes, and more sophisticated UI constructs — e.g. layouts, centering anything in the window, built in form validation, lists that scroll to element positions not pixel coordinates. Perhaps these things can be accomplished with the current CSS (or whatever). But I have no way to know that.
Save me
Thanks
Jason
Hi,
Well I have to second this. I too am a developer and while my CSS skills are not too bad I agree with Jason that the task of finding CSS classes is a pain in the proverbial.
I started playing with ionic at least a year ago but gave up in frustration because of the difficulty in customising my apps. I found that ionic was potentially a great framework but just like bootstrap seemed very restrictive and difficult to bend to my requirements. I have recently come back to ionic because my need to develop mobile apps is growing and ionic provides the best framework so far to achieve my requirements.
But just like the above posts I have struggled to work out how to even basic things like put an image as a background, how to manage backgrounds for things like items and cards etc. Sure, I have found solutions in forums - particularly stack overflow and not so much here 
- but in a lot of cases these are hacks or different ways of achieving end results.
So I too came to this thread looking for a CSS api to save myself hours of head banging. Remember there are thousands of lines of code and it is often very difficult to work out where to place a custom class to get the desired results.
Regards
Stan
How is it a pain to maintain a list of css classes?
Steps: