Working with Compass + Web Workbench to create button sprites within Visual Studio

For this blog post we will be covering basic image spriting using Compass along with Web Workbench from within Visual Studio. Using Sprites for multiple images in your websites reduces the amount of browser requests as well as reducing the total file size, creating faster loading web pages.

Programs used:

Step 1: Setting up Compass

We will kick off by creating a new ASP.NET Website. We can then right click on the web site node in the Solution Explorer and select ‘Setup Compass Project’.

Setting up Compass within Visual Studio

Step 2: File Structure

Once Compass is enabled you will see that two new folders have been created. One is called stylesheets which is where our scss is compiled, and the other is called [sass] where we will find our scss files.

For this example we will need to create three more things, an images folder with a sub-folder where we will place our sprites. It’s best to have all your sprites in one folder to make it easier to manage. For simplicities sake we also have a single HTML file that we’ll store — amazingly — our HTML in!

Add html file and images, as well as subfolders

Step 3: HTML

We need to include our outputted css, so include the screen.css file in the head of your HTML file. As well as the css, we need a button to style! I just used a simple link tag.

HTML markup

Step 4: Generate Spriting Import

To sprite images together first you need images! I created 3 button states:

  • normal
  • hover
  • active

I’ve included the images in the btn sub-folder we made under images.

Once you have done this, right click on the btn folder and select ‘Generate Spriting Import’.

Generate sprites with compass

Step 5: Including the Generated Scss

After generating the spriting import you’ll find that there is a new sprites folder in our sass folder. Inside will be our generated scss. We then include that file in our screen.scss file so the mixin’s defined in that file get included when we save our screen file.

Importing generated scss

Step 6: Using Generated Mixins

Create your awesome button with scss, for the background images use the generated mixins created by compass, along with the image name.

scss markup

Step 7: Changing Compass Defaults

We still need to change some defaults to make our button sprites work. Inside your config.rb file we have to uncomment “relative_assets”.  We want our sprites to repeat horizontally we will need to change the default “no_repeat” to “repeat-x” on line 59 of our generated _btn.scss file. This is primarily for this tutorial, but it’s the easiest way to demonstrate this technique.

Make some changes to the compass defaults

Finished Result!

And that’s it! Our 3 small images are now sprited:

Finished product

Feel free to Download the Source Files and have a look for yourself. :)

Don’t forget to grab the Web Workbench for Visual Studio here.

Compass for Visual Studio with Web Workbench!

I’m pleased to announce that we’ve just released a big update to our hugely popular Web Workbench Visual Studio extension.

Compass for Visual Studio

Why is this awesome for web developers?

  • Compass can automatically handle image spriting for you.
  • Compass includes many more Sass functions than provided by the default Sass compiler.
  • Zero setup needed by you, the developer – one click install of the Mindscape Web Workbench!

One click, get it all!

The Mindscape Web Workbench is available from the Visual Studio Gallery. It includes support for Sass, Less, CoffeeScript, Iced CoffeeScript – both compilation and syntax highlighting. The single VSIX works with both Visual Studio 2010 and Visual Studio 2012.

Compass support is included for free in the Web Workbench and is available immediately. Don’t forget to rate us on the Gallery also!

What do you want to see next? Tell us here or vote!

Metro Elements Weekly Update 4

One of the controls we added last week to Metro Elements was the CoverFlow control. This week we have continued to work on this control by making it more flexible, easier to customize and added more features. The CoverFlow control displays a collection of items that the user can slide through using touch and mouse gestures. Each item can be templated and display any content from simple pieces of data to arrangements of several visual elements. The CoverFlow uses virtualization meaning it can handle even the largest collections of item. The layout of the items is very flexible as you can specify a PathGeometry for the items to follow and define functions to customize the scale, spacing, rotation and opacity of each item. Here are some initial screen shots of what’s possible:

CoverFlow displaying pages of information:

CoverFlow

Curvaceous path:

Curvaceous Path

Rotated items:

Rotated Items

As well as minor bug fixes and improvements to other controls, another useful update is the MonthCalendar.DayOfMonthTemplateSelector property. This lets you customize the look of days displayed in the MonthCalendar control. One way of utilizing this feature is to display data on each day like in the example here:

Month Calendar

Stay tuned for next weeks update as we roll out more features and controls!

Thanks again to everyone who has been providing us with feedback and requesting features. If you have any questions about our Metro Elements controls, head on over to the forum. Or if you have any requests, let us know in the think tank.

Until next time, get the latest beta update now!

Metro Elements: Area Charts and Custom Styling

Last time I showed you how to get started with Metro Elements and use our charting controls in your application. In this blog post I’ll show you how to create and style Area Series and other similar charts. Area charts render the data by connecting data points with line segments, and filling the area between the line and the X axis. Any chart that draws a line through all the data points is good for plotting values that change over time or a number series. The colored area usually indicates that the total area between the line and the axis is a meaningful value.

Creating an Area Chart

Just like when I showed you how to create a bar chart last time, creating an area chart is as simple as adding 1 or more AreaSeries tags between the Chart tag. Below is a simple code example of doing this. Each series is binding to a collection of randomly generated Point objects. The SeriesBrush property is used to give each series a distinct color.

<ms:Chart Title="Area Chart">
  <ms:AreaSeries ItemsSource="{Binding DataA}" SeriesBrush="#9DB82B" />
  <ms:AreaSeries ItemsSource="{Binding DataB}" SeriesBrush="#F0A82A" />
  <ms:AreaSeries ItemsSource="{Binding DataC}" SeriesBrush="#851215" />
</ms:Chart>

Area Chart

Area Style

Now lets start looking at how to style the various parts of an area chart. First off, the colored area style. Styling the colored area allows you to customize the opacity of the area, make the area a different color to the line, or use a subtle gradient or other brush if you so wished. Here is a simple area style that uses a lighter opacity than the default:

<Style x:Key="AreaStyle" TargetType="Path">
  <Setter Property="Opacity" Value="0.4" />
</Style>

You can apply your custom area style by setting the AreaStyle property on the AreaSeries. Other chart series that also have this property are SplineAreaSeries, StackedAreaSeries and StackedSplineAreaSeries.

AreaStyle

Line Style

Next lets look at customizing the line that connects all the data points. This is useful for changing properties such as the thickness and color of the line. Here is a line style that creates a thick line with slightly rounded points:

<Style x:Key="LineStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="7" />
  <Setter Property="StrokeLineJoin" Value="Round" />
</Style>

To apply a custom line style, simply set the LineStyle property of the series you want to style. As well as all the different area charts, this property is also available on LineSeries, SplineSeries, StackedLineSeries and StackedSplineSeries.

LineStyle

Symbol Style

Last of all is the symbol style. Symbols can be rendered at each data point on the chart. By default, all charts apart from ScatterSeries don’t display a symbol. The SymbolStyle property on line, area and scatter charts lets you enable and customize what symbols to display. Here is a symbol style for rendering a cross at each data point:

<Style x:Key="CrossSymbolStyle" TargetType="ms:DataPoint">
  <Setter Property="Width" Value="18" />
  <Setter Property="Height" Value="18" />
  <Setter Property="Margin" Value="-8,-8,8,8" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ms:DataPoint">
        <Path Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"
               Data="M 0 2 L 2 0 L 4 2 L 6 0 L 8 2 L 6 4 L 8 6 L 6 8 L 4 6 L 2 8 L 0 6 L 2 4 Z" Stretch="Fill" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

SymbolStyle

And that’s all you need to know for customizing the data display of area series, line series and scatter series. Keen to create fantastic Windows 8 charts? Grab the trail from our Metro Elements page. If you have any questions about any of this, let us know in the forum.

Metro Elements Weekly Update 3

The Metro Elements update is a doozy this week with 5 new controls you can start using!

Book Control
With smooth animations and touch support, the book control is an interesting way to display pages of information that feels natural to flip through. Click the image below to see it in action.


CoverFlow Control
This is another fantastic control to put in your Windows 8 store applications that lets the user slide through a collection of items. This control is highly customizable and can virtually handle an infinite number of items.

PromptDecorator Control
The PromptDecorator can be wrapped around various controls such as a TextBox and ComboBox to give your users a handy indication of what they’re expected to input.

PromptDecorator

MonthCalendar Control
The MonthCalendar control displays the days of a particular month in a classic easy to view calendar layout. This control can be used for the user to select a date, or to display information on particular days.

MonthCalendar

UniformGrid layout panel
And last of all, since WinRT doesn’t have one, we’ve provided a UniformGrid layout panel that functions in the same way as the WPF version.

As usual, toolbox icons, samples, documentation and design time support are on their way. While your waiting for these, you can start playing around with the new controls and let us know what you think.

Thank you all who have been giving us feedback and requesting new controls in the forum. If you have any questions about how to use any of the controls available so far, let us know in the forum and we’ll help you out. Also, if you have any control or feature requests, we’d love to hear then in the Think Tank.

Get the latest update of the beta now!

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top