I have a series of CSS files that I am concatenating and minfying (using the YUI Compressor) with an Ant build script. The CSS files are:
Reset.css
Formalize.css
Typography.css
Site.css
There are other CSS files like ie.css and editor.css that I don't want to include in the minification. I have my build script working with the following code, but the problem now is that the files need to be concatenated in the order posted above.
<target name="minifycss">
<!-- Combine all CSS files except for ones specified for IE or the content editor -->
<concat destfile="css/e123-1.css">
<fileset dir="css" includes="*.css" excludes="ie.css editor.css print.css" />
</concat>
<!-- Minify the css -->
<java fork="true" jar="${yuicompressor.lib}" dir="css" output="css/e123-1.min.css">
<arg value="e123-1.css" />
</java>
</target>
I assume that the files are added alphabetically, but I was wondering if there was a way to tell Ant what order to concatenate the files without renaming them to 1reset.css, 2formalize.css, etc.
Use a filelist, as shown in the ant concat documentation.
If using wro4j, you can control the order of the resources to concatenate like this:
<groups>
<group name="all">
<css>/static/reset.css</css>
<css>/static/fonts.css</css>
<css>/wildcard/*.css</css>
<js>/static/js/lib/core.js</js>
</group>
</groups>
It allows you to use wildcards and also can be used for javascript resources (not only css)
This is a biased answer, because i'm working on wro4j project.
Related
Where should I put my css file if I have only one file (style.css) ?
I use sass for my project and I convert all my sass files to only one css file.
But I don't know where I have to put this file.. because normally I would create a static folder for each app but I think that makes no sense if I have only one file...
You just need to put the CSS file somewhere and tell HTML were to find using the link tag.
For example, if the file is in the folder "style" the tag will be.
<link rel="stylesheet" href="/style/file.css" />
Usually the main css style fail was in the root folder or in a style folder.
I finally figured out how to prepare and run the "node compile.js" file from the claro theme folder, so that it compiles each *.less file into its associated *.css file, but the old claro.css file is left as is.
Is that intended? If so, then what is the process for updating the claro.css file to reflect all the changes to the individual *.css files? Up to now I've always had the claro.css file imported into my jsp file like so:
<link rel="stylesheet" type="text/css" href="/CompassThemesURS/themes/html/commonurs/dojo/1.9.1/dijit/themes/claro/claro.css" />
Am I missing something? Using the node tool (and the provided "compile.js" file in the claro theme directory) to generate a custom theme based on the claro theme is great, but what about the step to update the large claro.css file? Please tell me I'm missing something to complete this customization process.
Thank you in advance,
Gregor
Due to the way Dijit themes are traditionally structured, yes, this is intended. claro.css doesn't contain any styles of its own, it simply contains #imports to each individual file which is being compiled by compile.js.
Dojo's build system is already capable of flattening CSS imports, so that is the point at which claro.css ordinarily becomes a flattened file with all of the rules from the individual widgets' CSS files.
I am new to magento and i want to add one css file 'responsive.css' in the page.xml. But this file i want to add last of all css files including the extension's css files.
<block type="page/html_head" name="head" as="head">
<!-- other css & js files -->
<action method="addCss"><stylesheet>css/responsive.css</stylesheet></action>
</block>
And if i view the page source, my responsive.css file is showing before the extensions css files. So please help me how i can include at last of all css files.
You can remove and add your responsive.css again in your page.xml. Be sure to do that after all other css files have been added:
<?xml version="1.0"?>
<layout>
<default>
<reference name="head">
<!-- ... add your other css files ... -->
<action method="removeItem"><type>responsive_css</type><name>css/responsive.css</name></action>
<action method="addItem"><type>responsive_css</type><name>css/responsive.css</name></action>
</reference>
</default>
</layout>
I did a quick google search and found the magento stack exchange website and a brilliant answer there that seems like it would work for you: https://magento.stackexchange.com/questions/12150/overwriting-a-css-style
One way to combat this is, instead of using page.xml, to put the declaration in local.xml of your theme's layout folder. This will be loaded last and therefore your css overrides will come last.
Another way to handle this is to create a custom layout file and reference it from a local module's config.xml
Edit the original css file at the bottom to override its styles
See the post above for more information on this list of fixes. Basically you're looking for ways to insert your css code after the code you want to override so you can avoid using !important declarations.
try
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
I am attempting to use Chirpy to mash all the CSS files from various sub directories into a single file.
This works to the extent that I get a single minified file containing all of the CSS.
The problem I am having is that the CSS files that are referenced contain relative paths to images so when mashed the resulting file contains CSS with invalid image references.
For example:
<!-- Jquery -->
<File Path="ThirdParty\Jquery\jquery-ui-1.8.custom.css" />
<File Path="ThirdParty\Jquery\Plugins\colorbox\colorbox.css" />
<!-- Ext -->
<File Path="ThirdParty\Ext_3.2.1\ux\LockingGridView.css" />
<File Path="ThirdParty\Ext_3.2.1\plugins\Schedule_1.7\css\sch-all.css" />
Each of these files contains entries along the lines of:
.ui-widget-header { url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) }
When this entry gets "Mashed" into a central file in another location the url is no longer valid.
Does anyone know of a way around this other than updating all of the urls in every CSS file?
(I am wondering whether the YUI compression tool via chirpy can do this for me).
I would like to avoid absolute urls because the site code is re-used in sub directories on the same web server.
I suggest switching to Sass / SCSS combined with Scout App. That way, you can #include all helper sheets (like mixins or themes) in the main one, that is compiled and minified into a single css file.
All css files work seamlessly as scss, so no headache there.
My coding (and life) have so much improved after this upgrade.
First, here's what I want to do:
* Compile my library code into a SWC
* Do not staticly link the Flex framework
At first, I tried just setting up a Flex module, clicking the "library" and "use framework as an RSL" buttons. This however doesn't compile any of my code into the SWC, and it basically just compiles a new SWC of the entire Flex framework, all resources and classes included.
Then, I managed to get my classes into the build using a custom compiler config, but it still includes the few Flex classes that I reference in my library code.
Finally, I figured I could use the custom flex-config.xml file, remove the parent reference to the library using <library-path append="false"></library-path> and then using a custom command line parameter (and also from ant), add -compiler.external-library-path references to the SDK and PlayerGlobal.swc. This should probably work, but Idea won't let me set command line parameters when I'm using a custom config file :'(
Any suggestions are greatly appreciated!
OK, Through help on the Idea forums, much googling, and random experimentation, here's what worked. Take careful note that some parameters are specified like "{name}" and some are "${name}". No, I don't know why :-/
<!-- Specifies the minimum player version that will run the compiled SWF. -->
<!-- 9.0.124 is the April 2008 security release -->
<target-player>9.0.124</target-player>
<compiler>
<source-path>
<path-element>src</path-element>
</source-path>
<incremental>true</incremental>
<keep-as3-metadata append="true">
<name>Inject</name>
<name>InjectInto</name>
<name>InjectIntoContents</name>
<name>Singleton</name>
<name>PostConstruct</name>
</keep-as3-metadata>
<!-- Remove the "include" library path. -->
<library-path append="false"></library-path>
<!-- Set up an "external library" path that is compiled against but not linked. -->
<!-- SWCs not used for SP are left in but commented out to make it easier to copy this script -->
<external-library-path>
<path-element>${flexlib}/libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element>
<path-element>${flexlib}/libs/framework.swc</path-element>
<!--<path-element>${flexlib}/libs/flex.swc</path-element>-->
<!--<path-element>${flexlib}/libs/rpc.swc</path-element>-->
<!--<path-element>${flexlib}/libs/utilities.swc</path-element>-->
<!--<path-element>${flexlib}/libs/datavisualization.swc</path-element>-->
</external-library-path>
</compiler>
<static-link-runtime-shared-libraries>false</static-link-runtime-shared-libraries>
<include-classes>
<class>net.expantra.smartypants.impl.InjectorImpl</class>
</include-classes>
<output>./build/SmartyPants-IOC.swc</output>