Does Dojo have any work around to support CSS3
Gradient
Box shadow
Rounded Corner
cross browser support. if not what you guys will suggest with an app build on Dojo to acheive the above.
It does for most browsers except IE (AFAIK), using the claro theme makes it easy as it's built on top of the lesscss framework and mixins are provided to make gradiends, box-shadows and Rounded corners... See http://download.dojotoolkit.org/release-1.8.3/dojo-release-1.8.3/dijit/themes/themeTester.html?theme=claro to check what it looks like in the different browsers you target...
You can easily extend those lesscss mixins to add shims for IE with whatever tricks you need (PIE for example. See http://css3pie.com/)
To get you started quickly, have a look at these files :
dijit/themes/claro/variables.less : that's where you put your theme's custom variables (colors, etc.)
dijit/themes/claro/compile.js : that's the script you launch to recompile your theme after you made modifications to your .less files. This requires you install nodejs. It's documented in the README file in the same directory.
Of course, it's better not to touch any of the claro theme's files directly as they may be overriden if you update dojo, but the compile.js script is a good starting point for creating your own theme-building script based on your own needs and structure.
Related
So I am having this Ghost theme (liebling) that I'd like to modify to my needs. E.g. I'd like to change the font-size of the post title and content.
As the theme is quite complex (at least for me) I am having a hard time to figure out which setting has been made in which SCSS file.
When I start Google Chrome and inspect elements it points me to the CSS file that makes the setting. However it doesn't point me straight to the SCSS file it got created from. Of course it doesn't, as this would require some form of debug-database so chrome is able to deduce/know which SCSS files where involed creating that specific CSS.
So long story short: How can I find out which SCSS file lead to which CSS setting?
I have a task to add rtl support to the site by using some kind of a library to modify css which will swap left to right and vice versa and append [dir=rlt] [dir=ltr] to all selectors accordingly.
What I have done so far:
called ng eject
added rtlcss processor as postcss plugin, but it does not fit my requirements. I need it to append [dir=*] to selectors.
tried other plugins but they did not work.
Possible solutions:
make two css files and dynamically load them. (but then you need to add ViewEncapsulation.None to all components) BAD, not so much work, but can break layout
make two css files and run as two different applications. One for rtl, one for ltr. BAD, no resources for that
make rtl by hand. BAD, too much work
forget about rtl processors and make sass mixins. BAD, too much work
make one css file with correct prefixes generated, [dir=ltr] and [dir=rtl] which will result in a doubly sized css but it will eventually work. GOOD but no idea how to do it
create custom library to do this, or fork existing to modify
find working processor
Currently, I am trying to find working processor with no luck.
Are there any ideas on how to accomplish this?
What is the extent of CSS3 support in JavaFX? According to documentation
JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 [1] with some additions from current work on version 3 [2]
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#introscenegraph
Cannot find anything specific here.
1) However how much percentage of CSS3 is supported in JavaFX?
The CSS3 specification must have come along way since this was first mentioned in the JavaFX CSS specifiaction.
2) What from CSS3 is supported?
There is only one mention of CSS3 in the JavaFX CSS specification.
3) Is it possible to use SASS with JavaFX CSS?
4) What changes does Java 9 have in regards of CSS support?
Although this is a 2yo question, I will answer for the sake of people. There is so little information about JavaFX css and sass, so I hope this answer will be of a help to someone.
1+2) I don't know the exact percentage but my experience with CssFX shows that very little original css3 code got into my css files. Most of the attributes are CssFX ones. Furthermore, there are many css3 attributes that defined on some JavaFX component, but not on others. I suggest you just learn it while going.
3) Yes, it is possible, and I did it just now in my current project.
Sass is a powerful framework to use with css, but eventually, the sass compiles the sass/scss code to a regular css, which can be used in your JavaFX app. just use the CssFX attribute in the sass code instead of the standard css3 attributes.
I'm using eclipse, so I've downloaded LiClipse from the market, which lets me view my .scss files from within their eclipse built-in editor. Sometimes I use SublimeText instead because of its extra tools.
About the sass/scss to css compilation, as I'm working with Maven, I use the maven-sass-plugin (specifically this one) to compile my project's scss files every time that I run my application. In addition, I've added to my project a builder, which compiles my scss files every time that a scss file has been changed (Sass builder example)
4) This is a question about Java 9 css support, which is barely related to the main topic of this question - which is JavaFX css - and should be asked as another topic.
So I'm making a website using Middleman, which I'm trying out for the first time, and just getting my teeth into Susy and Compass, which I plan on using with it. I am not familiar with these tools and was curious if anyone knew whether the reset utilities Compass provides cascade over any of the CSS rules from HTML5 Boilerplate (mainly those from normalize.css). Does anyone know?
You choose whether to use compass/reset or normalize.css. Using both at the same time does not make sense. The reset basically sets the same properties on all elements, then you add your styles on top. What normalize does is that it only sets the properties that vary between browsers to one common set. The difference becomes obvious with elements like <strong>, <em> or <ul>: Using reset, they will just be “plain” text. No list indicators, no paddings, no margins, no bold, no italics. Using normalize, they will look as you would expect them to look: bold, italicized, like a list, etc.
When using normalize.css, you can either use the compass normalize plugin or just download normalize.css and #include it at the top of your SCSS/Sass file. Then, don’t include compass/reset.
The reset included in Compass style is the Eric Meyer's one (version 2.0).
I'm not familiar with HTML5 Boilerplate. Although I know they are a set of good practices, I've never seen myself on need of using it. I like to build my own boilerplates.
After reading the source code of normalize.css and the Eric Meyer's reset I found you will have some colliding rules.
I'd say that if you're interested on keeping normalize.css over the reset mixin just include normalize.css after it.
Is there any solution that allows you to design a webpage (with, say, a wysiwyg editor) and then automatically compile the design as one or several css file(s) compatible across multiple browsers?
Typically, using a WYSIWYG editor will generate superfluous entries to your HTML mark-up and create inefficient stylesheets that don't make use of CSS shorthand.
The best way to create stylesheets that are compatible across multiple browers sadly just comes with experience. By knowing the quirks of IE6 and IE7 you automatically cater for them as you create the stylesheet.
A good reset stylesheet will help to erradicate any default differences between browsers, such as line height, body padding, etc.
The exact solution you're after doesn't exist (yet).
I really don't think so. There are some CSS frameworks trying to deal with this issue, the more popular one I know is called YAML. Some JavaScript libraries are dealing with cross browser CSS issues, too (don't know a particular example at the moment though).
You may want to use PHP to write the content of a .CSS file.