Tag Archives: CSS

YUI Compressor and NAnt

I have been working on creating a DotNetNuke Skin for AthleticHost.com.   In order to simplify deployment of the skin I wanted to add it as an extension to DNN rather that upload it via FTP.   I choose to use NAnt to build the extension install file.   In an effort to increase page performance I decided that the CSS and JavaScript files should be compressed and choose the YUI Compressor for the job.

I created two targets.  One to minify the JavaScript and another for the CSS.

<target name="JavaScript.minify">
<foreach item="File" property="filename">
  <in>
    <items>
      <include name="${temp.dir}/**/js/**/*.js"/>
    </items>
  </in>
  <do>
    <echo message="${filename}" />
    <exec program="java" workingdir="${YUICompressor.dir}">
      <arg value="-jar" />
      <arg value="yuicompressor-2.4.2.jar" />
      <arg value="--type" />
      <arg value="js" />
      <arg value="-o" />
      <arg value="${filename}.min" />
      <arg value="${filename}" />
    </exec>
    <move file="${filename}.min" tofile="${filename}" overwrite="true" />
  </do>
</foreach>
</target>
<target name="Css.minify">
<foreach item="File" property="filename">
  <in>
    <items>
      <include name="${temp.dir}/**/*.css"/>
    </items>
  </in>
  <do>
    <echo message="${filename}" />
    <exec program="java" workingdir="${YUICompressor.dir}">
      <arg value="-jar" />
      <arg value="yuicompressor-2.4.2.jar" />
      <arg value="--type" />
      <arg value="css" />
      <arg value="-o" />
      <arg value="${filename}.min" />
      <arg value="${filename}" />
    </exec>
    <move file="${filename}.min" tofile="${filename}" overwrite="true" />
  </do>
</foreach>
</target>

The “Deploy” target then calls the “Css.minify” and “Javascript.minify”

<call target="JavaScript.minify" />
<call target="Css.minify" />

Download the full NAnt script.

Resouces:
http://developer.yahoo.com/yui/compressor/
http://nant.sourceforge.net/

jQuery dialog with tabs font-size fix

While developing AspNetInfo I ran into a styling problem when using jQuery tabs nested in a dialog.  Notice in the dialog how the tab font-size is slightly larger than the tag font-size in the page.

jquery-font-size-example 

This is because the dialog and tab widgets are decorated with the jQuery style .ui-widget, which specifies a relative font-size of 1.3em.

.ui-widget { 
    font-family: Arial,sans-serif; 
    font-size: 1.3em; 
}

The font-size of the nested tab widget ends up being larger due to CSS inheritance and relative font-size.  The tab widget inherits the dialog widget’s relative font-size making the nested tab widget items 1.69em in size (1.3em X 1.3em = 1.69em).

This can be fixed by specifying a more specific rule for the nested tab widget to bring all of it’s items back to 1.3em.  This rule can be applied to just the tabs by specifying the tab id or to all instances of nested widgets.

Fix for email tab only:

#emailTabs.ui-widget {
    font-size: 1em;
}

Fix for all widgets:

.ui-widget .ui-widget {
    font-size: 1em;
}

The Golden Ratio

Not having any formal graphic design experience I stumbled across an important number in design,  1.62.  1.62 is The Golden Ratio and design elements using it are more aesthetically pleasing.  If you are a  non-graphical web developer like myself, you may find the The Golden Ratio in Web Design interesting.   You may also want to check out the 960 Grid System. It is a CSS framework based on the golden ratio.

Checking Out the CSS-Framework

I found the CSS-Framework that Mike Stenhouse put together to be very interesting and wanted to try and theme it. I am not at all a graphics designer and learned a great deal while putting this together.

Please feel free to use the CloudySunset template. If you actually find it useful please send me a link to your site.

Download CloudySunset CSS Template