Light Point Security ready to no longer be a one-two combo

Ryan McDonald

Digital Producer

Cyber startup Light Point Security is looking to grow from its two-person team and hire its first full-time employee.

Light Point is looking for a software developer to help grow new products and accelerate some of the features in its existing product, Light Point Web Enterprise.

“We want to find someone who has the right skill set and someone who is eager to learn and someone who can pick up the technical languages really quickly,” said Zuly Gonzalez, chief operating officer for Light Point. “We want somebody that’s looking for more than a job; someone who wants to be a part of a team who’s a startup," Gonzalez said.

Light Point, which launched in 2010, is based at bwtech@UMBC Research and Development Park. Gonzalez runs the company with Beau Adkins, who is CEO.

Often, websites seem to exist primarily to put something into a database in order to pull it out later. While other database methods, such as NoSQL, have gained popularity in recent years, data for many websites still resides in the traditional SQL database. This data often consists of valuable personal information such as credit card numbers and other personal information of interest to identity thieves and criminals. Hackers therefore always look to get this data. One of the most common targets of these attacks is the SQL databases that lie behind many web applications through a process of SQL Injection.

An injection attack works by getting the application to pass untrusted input on to the interpreter. Recently, 40,000 customer records being taken from Bell Canada are a result of an SQL Injection attack. In late 2013, hackers stole over $100,000 from a California based ISP using SQL injection.

The Open Web Application Security Project (OWASP) chose the injection attack as the number one application security risk in their 2013 top ten, based on its prevalence and the risk to the attacked web systems. Unfortunately, it also held the number one position in the previous report from 2010. So what is an SQL Injection attack? In this tutorial I'll discuss how they work and what you can do to protect your application from these attacks.

What Is an Injection Attack?

Any interpreted system behind a web server can be the target of an injection attack. The most common targets are the SQL database servers behind many websites. SQL injection doesn't directly result from weaknesses in the database, but uses openings in the application to allow the attacker to execute statements of the attacker's choice on the server. An SQL injection attack gets the database to share more information than the application is designed to provide. Let's look at an SQL database call that you could write in ASP.NET.

SqlCommand command = new SqlCommand("SELECT * FROM userdata WHERE UserId = " + id);
    SqlDataReader reader = command.ExecuteReader();

What's wrong with this code? Perhaps nothing. The issue is that id string we're using. Where does that value come from? If we're generating it internally or from a trusted source, then this code might work without problems. However, if we're getting the value from a user and using without modification, we've just opened ourselves up to SQL injection.

Let's take a common case where we're getting the parameter to look up as part of the URL. Take the URL http://www.example.com/user/details?id=123. In ASP.NET using C# we can get that passed value using this code:

string id = Request.QueryString["id"];

This code combined with the call above leaves us open to an attack. If the user passes a user id such as 123 as expected, everything works fine. However, nothing we've done here ensures this is the case. Let's say the attacker attempts to access the URL http://www.example.com/user/details?id=0; SELECT * FROM userdata.

Instead of just passing a value as expected, we've given a value and then added a semicolon, which terminates an SQL statement. It then adds a second SQL statement that the attacker would like to run. In this case it would return all records in the userdata table. Depending on the rest of the code in our page, it might return an error or perhaps display every record in the database to the attacker. Even an error can be used with carefully constructed queries to build a view of the database. Worse, imagine the attacker goes to a URL of http://www.example.com/user/details?id=0; DROP TABLE userdata. Now all of your users are lost.

In this example, the attacker can run any code they want on the database server. If the account the database calls run under has full control of the database, a too common scenario, then dropping tables and deleting records makes an easy way to bring down a site. Even if the attacker can only read and write data in the database, then puling data is only a matter of patience and care.

Take a simple database named "Products" consisting of three columns. The first column holds the product id, the second holds the product name, and the third holds the product's price. For our normal query we'll attempt to find every product containing widget in the name. The SQL to do this in the same pattern we've show would look like this:

string sql =  “SELECT * FROM Products WHERE productname LIKE '%” + searchterm + “%'”;

A typical website to access this would look like http://www.example.com/product?search=widget. Here the web page will simply cycle through each returned record and display it on the screen. In this case we see our widget product.

| productid |productname | price |
    | -----------
    |    1      | Widget     | 100.00 |

Let's change our query to http://www.example.com/product?search=widget' OR 1=1;-- and execute the same query. see something more. In fact we'll see every record in the table.

|productid | productname | price |
    |---
    | 1        | Widget      | 100.00 |
    | 2        | Thingy      | 50.00 |
    | 3        | Boxy        | 125.00 |

We've tricked the interpreter into running SQL code of our choice. The resulting SQL executed will be:

SELECT * FROM Products WHERE productname LIKE '%widget' OR 1=1;—%'

The result will be two statements:

SELECT * FROM Products WHERE productname LIKE '%widget' OR 1=1;
    —%'

By adding the 1=1, which is always true, the where clause will be true for every row in the table and the resulting query will return every row. The -- at the start of the second statement turns the rest of the SQL statement into a comment which prevents the error message we'd otherwise see.

Changes to the display cannot prevent this statement. A patient attacker can use even nothing more than the fact a value is returned or not and carefully constructed queries to slowly map out your database and possibly retrieve data even if they only see an error message. There are tools such as sqlmap to automate the process.

Mitigating SQL Injection

You prevent SQL injection by preventing untrusted input from getting to the SQL database or other interpreter. Any input from outside the system should be considered untrusted. Even data from other partner systems must be considered untrusted as you have no way to guarantee the other system does not suffer from security problems that would allow insertion of arbitrary data then passed on to your application.

Going back to our earlier example, if we know that the id parameter should always be an integer, we can attempt to convert it to an integer and show an error if this fails. An ASP.NET MVC application would do this using code similar to this:

int quantity;    
    if (!int.TryParse(Request.QueryString["qty"], out quantity)) {
       return RedirectToAction("Invalid");
    }

This will attempt to convert the string to an integer. If the conversion fails, the code redirects to an action that will display an invalid message.

This can be prevented if we're looking for an integer parameter. It wouldn't help if we're expecting text such as in the earlier product search. The preferred technique in this case is to use regular expressions or string replacements to allow only needed characters in the passed value.

This can be done by whitelisting, the process of removing any characters other than a specified set, or blacklisting, the process of removing an members of a specified set from the string. Whitelisting is more reliable since you specify only allowed characters. To remove anything other than letters and numbers in a string we can use code such as:

Regex regEx = new Regex("[^a-zA-Z0-9 -]");
    string filteredString = regEx(originalString, "");

You will need to evaluate any input respectively. Some database queries might need more specialized attention. Take characters that can be meaningful in an SQL command but also could be a valid character in a database call. For example the single quote character ' is used to start and finish a string in SQL, but could also be part of a person's name such as O'Conner. In this case replacing the single quote ' with consecutive single quotes '' can eliminate the problem.

Stored Procedures

Stored procedures are often seen as the fix for this problem and they can be part of the solution. However a poorly written stored procedure will not save you. Take this stored procedure that includes code similar to what we've already seen to build a query:

ALTER PROCEDURE [dbo].[SearchProducts]
        @searchterm VARCHAR(50) = ''
    AS
    BEGIN
    DECLARE @query VARCHAR(100)
    SET @query = 'SELECT * FROM Products WHERE productname LIKE ''%' + @searchterm + '%''';
    EXEC(@query)
    END

The string concatenation here is the problem. Let's try a simple attempt where we attempt to set an always true condition to show all rows in the table and pass in the same `widget' OR 1=1;--`` as the query we saw earlier. The result is also the same:

| productid | productname | price |
    | --
    | 1         | Widget      | 100.00 |
    | 2         |Thingy       | 50.00 |
    | 3         | Boxy        | 125.00 |

If untrusted data is passed in, we have the same result as if the call were created in our code. That the string concatenation takes place inside a stored procedure instead of in our code provides no protection.

Parameterization

The next piece of the puzzle to protect from injection attacks comes in using parameterization. Building SQL queries by concatenating strings and then passing the finished code doesn't give the database any idea of what part of the string is a parameter and what is part of the command. We can help protect against attacks by creating SQL calls in a way that keeps statements and values distinct.

We can rewrite the stored procedure shown earlier to use parameters and produce a safer call. Instead of concatenating the % characters that represent wildcards, we'll create a new string adding these characters and then pass this new string as a parameter to the SQL statement. The new stored procedure looks like this:

ALTER PROCEDURE [dbo].[SearchProductsFixed]
        @searchterm NVARCHAR(50) = ''
    AS
    BEGIN
        DECLARE @query NVARCHAR(100)
        DECLARE @msearch NVARCHAR(55)
    
        SET @msearch = '%' + @searchterm + '%'
        SET @query = 'SELECT * FROM Products WHERE productname LIKE @search'
        EXEC sp_executesql @query, N'@search VARCHAR(55)', @msearch
    END

Executing this stored procedure with just the word widget works as expected.

| productid | productname |price
    | ----
    | 1         | Widget      |100.00

And if we pass with our parameter widget'' OR 1=1;-- results in nothing being returned showing we're no longer vulnerable to this attack.

Parameterization doesn't require stored procedures. You can also take advantage of it with queries built within code. Here's a short segment in C# to connect and run a query against Microsoft SQL server using a parameter.

const string sql = "SELECT * FROM Products WHERE productname LIKE @CategoryID";
    
    var connString = WebConfigurationManager.ConnectionStrings["ProductDatabase"].ConnectionString;
    
    using (var conn = new SqlConnection(connString))
    {
       var command = new SqlCommand(sql, conn);
       command.Parameters.Add("@searchterm", SqlDbType.NVarChar).Value = string.Format("%{0}%", searchTerm);
       command.Connection.Open();
       SqlDataReader reader = command.ExecuteReader();
       while (reader.NextResult())
       {
           // Code to execute on each line goes here
       }
    }

Least Privilege

Up to this point, I've shown how to mitigate database attacks. Another important layer of defense, minimizes the damage causes in case the attacker gets past the other defenses. The concept of least privilege gives that a module of code which, in this case our database calls, should only have access to the information and resources needed for its purposes.

When a database command runs, it does so under the rights of a user account. We gain security by giving the account the database calls run under only the rights to do things it normally needs to do. If the calls from a database should only be reading data from a table, then only give the account select rights to the table and not insert or delete. If there are specific tables it does need to update, say an orders table, then give it insert and update to that table, but not other table such as one containing user information.

Canceling orders can be handled through a separate account used only on the page doing that task. This would prevent the deletion of an order from the table elsewhere more difficult. Using a separate database account for the administrative functions of the site, with the necessary greater rights than the one the public uses can do much to prevent damage from a user finding an open injection attack.

This won't prevent all attacks. It would do nothing to prevent returning extra results such as the earlier example showing the entire contents of a table. It would prevent attacks from updating or deleting data.

Conclusion

SQL injection is the most dangerous attack, especially when taking into account how vulnerable websites are to it and how much potential this type of attack has at causing a lot of damage. Here I've described SQL injection attacks and demonstrated the damage one can do. Fortunately it's not that difficult to protect your web projects from this vulnerability by following a few simple rules.

Never trust any outside data brought into your application. It should be validated against a whitelist of valid inputs before being processed any further. This can mean ensuring that an integer parameter is actually an integer or a date is a valid date value. Also validate text to only include the characters the parameter would need. For a text search you can often allow only letters and numbers and filter out punctuation that could be problematic such as the equals sign or a semicolon.

Use parameterization and avoid string concatenation when creating SQL calls. Stored procedures are not a panacea as they can be vulnerable too if simple string concatenation is used. Parameterization avoids many of the problems of string concatenation.

The code accessing the database should be run with the least privileges needed to complete the tasks needed. In few circumstances should the database calls used by the web application need to make changes to the database structure such as dropping or altering tables. You can add an extra layer of protection by running separate parts of the website under different accounts. The database account used for normal user actions likely has no reason to modify the table containing the roles or rights of users. Running the administrative parts of the site under a more privileged account and the end user section under a less privileged one can do much to mitigate the chances of code that slips through from causing other issues.

Chemistry and Biochemistry undergraduate majors are invited to apply for a ten-week (May 19- July 25, 2014) research program sponsored by the National Science Foundation (NSF-REU) and 3M Corporation. Program participants will receive a stipend of $4,500, a travel allowance, and housing. Participants supported by NSF and 3M must be US citizens or permanent residents of the US. Please use the application tab above to apply to the Chemistry and Biochemistry REU Program at Georgia Tech.

Each research student carries out a research project under the direction of a faculty member in School of Chemistry and Biochemistry at Georgia Tech. Projects are available in analytical, biological, inorganic, organic, physical, and polymer chemistry. Contributions by undergraduate participants often result in publication of papers in the peer-reviewed literature with the student listed as an author. 

I started with style guides like any other obsessive-compulsive designer: with the desire to make it simple to maintain and grow a design. Plus, knowing which component to use in a given situation is nice, too, right? Since making this a regular practice, I’ve found it’s been like having a nice combination of a CSS class and a pattern library all in one.

One of the first questions, understandably, is why use Fireworks for a style guide? Well, for me, it’s mostly because of symbols and styles. Sure, you could use similar things in Photoshop, but I find Fireworks’ implementation to be smarter.

Here’s why I love it:

• Symbols update everywhere, and you have to update them only once.
• Symbols have states, which let you easily show things such as selected and unselected states.
• Symbols may be placed on a single page for easy editing.
• If the styles are for the Web, you can easily export them as CSS.

This article is all about understanding why you would want to set up a style guide using Fireworks, and you’ll also get a little starter template that I like to use.

Important note: Fireworks’ future is uncertain, as Adobe decided to feature-freeze it in May 2013. There are rumors of Adobe working on a replacement, but nothing definite so far. I’ve spent the last few months with an alternative, Sketch, and found it to be… well, pretty fantastic! It’s a young Mac app but shows promise. Also, while Fireworks (CS6) is unlikely to receive any major updates in future, it is still distributed and supported by Adobe and should work on the latest Windows and Mac machines. You can read more about Fireworks’ future in this pretty detailed article.

A Style Guide?

What is exactly a “style guide”, and why would you want to create one? Let’s start with a brief quote from a well-known encyclopedia:

“A style guide or style manual is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization or field. The implementation of a style guide provides uniformity in style and formatting within a document and across multiple documents.”

The biggest reason to create a style guide? The sheer amount of time you’ll save. Depending on the size of the project, reproducing your changes could take minutes or hours. Imagine designing a game, a complex website, a mobile app or a large corporate intranet: having to update one element that appears on dozens or hundreds of pages would be a tedious, madness-inducing task. You have better things to do, like look at cute cat pictures — why waste your time doing the same thing over and over again?

A style guide helps you to maintain a consistent look over time, and Fireworks can save a lot of time.

Instead of wondering how to style headings, you could look to the style guide for answers. As your design grows and you add elements, putting all of the elements on one page will help to ensure that they look like they were all crafted by the same hand — or at least look consistent. The secondary benefit is that you won’t have to solve the same design problem multiple times.

If you work on a team or for a client, handing off the document to someone else is very easy. You’ve already done the work of specifying how things should look; so, anyone else can step in and pick up where you left off.

Speaking of which, if you’ve ever applied a CSS class or ID to an HTML element, then you’ve basically written a style guide — even if you didn’t necessarily formalize it as such.

When you’re presenting a design to a client or team, use the style guide to guide your presentation. A lot of people are talking about style tiles, style prototypes and element collages these days; there’s no reason why a style guide can’t fit in there. It’s a great way to help someone visualize what a product will look like without having to design every screen.

Who Uses Style Guides Anyway?

The short answer is: a lot of people. Companies use them; banks generate reams and reams of documentation on how the logo should be implemented and which pixels should go where. While extending a brand across a wide range of products and services is complex, a small company typically does not need such extensive documentation yet still would benefit from consolidating its design standards into a single set of guidelines, a style guide.

The Basics

So what should be included in a style guide? Well, I usually put these few things in mine:

• headings;
• text size of body copy;
• links (don’t forget visited links if you’re making a website!);
• sizes and treatment of images;
• logo;
• important modules, like headers and carousels.

If you’re making an app, the list might be a little more extensive. I’d also include elements such as:

• button types and styles;
• navigation bar styles;
• table styles;
• icons.

Fireworks is not the most suitable application for defining such things as animations, CSS transforms and transitions, or non-Web-font families (or CSS styles in general, although Fireworks does export CSS code, if needed). These are a critical part of the experience but might be better defined with a prototype or the like.

(Some specifications of motion design are useful in a style guide — such as easing, timing, gradient, rotation, and scaling end points — but an interactive prototype would demonstrate these much better than a static image or document.)

All that being said, the size of the style guide should fit the project. If you’re making a simple app, you could probably keep it lean. If you’re working for a financial institution, then it might need to be substantially bigger and more prescriptive. The format and level of detail are up to you.

If you’re developing a mobile app, ensure that the design and development team is familiar with the human interface guidelines of the relevant device or platform. Apple, Google, Microsoft and others publish guidelines to ensure quality and consistency. The guidelines are geared to designers, but you might want to ensure that your team understands things like the minimum touch size for buttons (44 × 44 pixels for iOS, by the way) and the standards for typography and icons.

I try to keep everything on one page in Fireworks, because exporting slices is much easier if all elements are on the same page (more on that later). The alternative is going to each page, exporting an image, checking that I’ve put it in the right folder, and then cursing myself if I’ve accidentally saved it to the wrong spot.

Speaking of which, aren’t slices in Fireworks awesome? Without them, we’d have to do something like this:

1. copy symbol to new document,
2. paste symbol,
3. trim canvas to fit,
4. save symbol,
5. close,
6. repeat 50 times (getting sadder each time).

Clearly, no one would want to do this. If slices were a person you could hang out with at a bar, I’d buy them drinks all night.

Use symbols and styles as often as possible. With them, you can easily create something once and update it throughout the document. (By the way, Fireworks doesn’t always honor updates to styles inside of symbols. Sometimes you’ll have go into each symbol and refresh the style individually. It’s a bit of a drag, but it happens so rarely that I’m not bothered.)

A Quick Primer On Symbols, Slices And Styles

Symbols

Use a symbol when a UI element repeats throughout the website or application. The usual candidates are buttons, icons, images and logos. A symbol has states, too, giving you the flexibility to display various states of an element (for example selected and unselected) or just to test various iterations of an item.

Symbols are helpful and even have states! (View large version)

To convert an element to a symbol, simply select it and go to Modify → Symbol → Convert to Symbol… (or press F8).

Convert an object to a symbol.

In the “Convert to Symbol” dialog, you can define the type of symbol (graphic, animation, button), whether to enable 9-slice guides, and whether to save the symbol to the common library:

The “Convert to Symbol” dialog. (View large version)

Styles

I generally reserve styles for text (font family, size, color, drop-shadow live filters, etc.) and buttons (color, appearance, etc.).

A style may define font size, color, font family, live filters and more. (View large version)

For example, if you add borders or live filters (for example, drop-shadows) to an image or button and want them to be easily reusable, make them styles. Also, symbols may contain elements with styles.

Slices

Once your symbols are set, create a slice for each element. Fireworks’ naming convention is not human-friendly (it comes from old Web layout practice: [Document Name]_[Row Number]_[Column Number]). So, look to the all-powerful Properties panel to create your own names for slices.

Insert a rectangular slice an an object. (View large version)

Useful tip: You can highlight multiple elements and create individual slices for each one. Simply select all of the elements on the canvas, and go to Insert Rectangular Slice → Multiple slices! It’s a real time-saver.

To create multiple slices, select multiple objects on the canvas, select “Insert Rectangular Slice,” and then the “Multiple” option. (View large version)

Resolution-Independence

If you’re creating an app, try to work with vector graphics whenever possible, which make it much easier to scale icons infinitely to higher-resolution devices. I’ll have to gloss over some finer points, such as ensuring that icons scale down well.

Useful tip: The Icon Design Handbook has you covered on that front. It has has great tips on making beautiful icons. Also, Ivo Mynttinen teaches quite a few things about designing icons with Fireworks.

So, how do we achieve this in Fireworks? Sure, we could drop in regular and @2x versions, but vectors can be exported as SVGs, courtesy of Aaron Beall’s handy Export extension.

Useful tip: Another article on Smashing Magazine gets a little nerdy talking about “Resolution Independence With SVG.”

Usually when designing for the Web, an icon font is most helpful. I have nothing but love for IcoMoon, which creates an icon font from SVG graphics that you upload, for free. Icon fonts currently have some limitations, such as individual elements being confined to one color. So, if you need multiple colors, gradients and so on for your icons, then exporting an SVG or a @2x PNG might be best. (Note: SVG is supported in Internet Explorer 8+ and in recent versions of all other major browsers.)

When To Start Preparing the Guide?

Picking the right time to build a style guide isn’t an exact science. I usually start once I’ve determined a direction for the project. Creating it first usually wouldn’t make sense because I’ll often experiment with fairly different ideas. Doing twice the work doesn’t appeal to me.

You also don’t want to end up a slave to the process early on. Creativity should be messy, weird and fun — bottling all that up in a style guide too early on would really break your groove and stifle the design. The style guide should reinforce your creativity and, therefore, should come second. Don’t wait till the end either, because you want it to guide the rest of the process.

In short, don’t do it too early, but don’t wait until you’ve finished the design. Having to duplicate objects from page to page is a good sign that you should create an asset (i.e. with symbols) or define a style (i.e. with styles). My style guides usually start out as a working canvas: Design elements and type treatments that I like will hang out on the canvas until I decide they should be standardized (and become part of the style guide) or discarded.

Using symbols and styles early on also means that you won’t have to apply endless updates if one icon changes. I’ve overlooked doing this a few times and probably said some words that I regretted as I went back to adjust each little mistake afterwards.

Getting Started With Your Style Guide

Before creating the canvas, keep in mind that it is a living document, so you’ll need to help it grow, pruning here and adding there.

“How Do I Set One Up?”

The short answer is, whatever works for you. I’ll share what works for me, and you can build on it. Or throw it away. It’s fine, really. Your mileage will vary according to what you’re creating.

I’ll open a page at the beginning of the document. Once I’ve gotten a sense of the direction of the design, I’ll put some of its elements on this page and make styles and symbols out of them.

Then, I’ll lay out a few common elements. If we were making an iPhone app, they would be the following:

• colors;
• typography;
• icons;
• interface elements.

A Starter Style Guide

Good friends help by telling; best friends help by sharing. Because we’re basically besties at this point, I’ll share a style guide that I made for a simple app. Inside, you’ll find the following:

• elements page, with icons, images and font examples;
• home screen;
• detail screen for articles.

Teehan + Lax has made its own UI PSD for iOS 7 that is perfect for getting an app style guide going. Even though the file is not in a native format of Fireworks, it can be easily opened in Fireworks; all of the elements are vectors and so are perfectly editable. (Fireworks can read PSDs pretty well in general, with just a few minor limitations.)

OK! We’ve got our interface elements. Now, create a document that is 2000 × 2000 pixels.

Create a new 2000 × 2000-pixel canvas for our style guide. (View large version)

You might not want to give the style guide the shape of an app or website, or else a client or team member might think that they’re viewing an actual app.

Drag in some interface elements and start experimenting! Depending on the scope of the app, you’ll be dragging in various elements. Here are a few that appear in almost every app I make:

• status bar,
• menu bar,
• action icons.

Once you’ve determined a direction, there’s no reason why you can’t begin to customize this style guide to match the feel of your app. It’s a nice way to ensure that everything you’re designing works holistically. Plus, your client will appreciate the details.

I’ll also start to use the guide for some production duties, like saving assets. When designing for iOS, ensure that the normal versions of icons look as crisp as the @2x versions. I’m a big fan of “Snap to Pixel” when working with icons (go to Modify → Snap to Pixel or type Control/Command + K) — it helps with keeping things looking sharp at small sizes. I fully admit that this is a case of designer’s OCD, and I’m OK with that. I’ll create the normal-sized versions later in the process, when I’m ready to send over some assets to the developer. No sense in creating extra work for myself early on.

Also, I design at the @2x resolution by default because I find that scaling down for smaller resolutions is easier than scaling up. Remember, though, that your font sizes and other elements will be double their normal size when you do this. When working with text, specify in the style guide the intended type size, not what Fireworks says. (When scaling text along with the document’s overall size, Fireworks will change its size, but the Properties panel might not report the actual new size. It seems to be an odd limitation of Fireworks’ text engine).

Your Style Guide and Production-Ready Assets

Here’s where it gets more fun. Now that your buttons, logos and other elements are in the style guide, you can easily highlight them and creates slices. If you’re working on a project that requires higher-resolution assets, then duplicating your symbols on the style guide’s canvas and exporting them directly from that page is simple.

Select all of the elements to be sliced, and then go to Edit → Insert → Rectangular Slice. (Remember what I said earlier about human-unfriendly slice names?)

Create rectangular slices. (View large version)

Note: When Fireworks asks, choose “Multiple,” or else it will create a single large slice.

Slices are ready to be exported whenever you’re ready! You can even give slices their own export settings (PNG32, PNG24, PNG8, GIF or any custom format — for example, PNG8 with a limited number of colors, JPEG Progressive with a set quality, etc.). The settings will be saved in the Fireworks PNG file, so exporting and re-exporting assets is very easy.

Each slice may have its own export settings, which are remembered by Fireworks. (View large version)

Sample Style Guide

After some experimentation, et voilà! A shiny new style guide! The following three screenshots show mine:

The “article” page of my style guide. (View large version)

The “article list” page. (View large version)

The elements page. (View large version)

In case you missed it, you can download my starter style guide via Dropbox.

Helpful Tips For Working With Fireworks Style Guides

I usually have a few panels open in Fireworks:

• Pages,
• Layers,
• States,
• Styles,
• Document Library,
• Properties.

The Pages, Layers and States panels help you to navigate quickly through the Fw PNG file. I use states to prototype designs for a particular view or page, and each view or page will have its own page in the document. I’ll generally make a master page (containing the chrome and unchanging elements in the design, such as the menu or tab bar) so that I have one less thing to paste in the page.

Styles are helpful because you can select an element and immediately apply a style to it.

The document library holds all of the symbols, and it’s an easy reference point if you need to drag something onto the canvas. I find myself just copying symbols from an existing page. (Quick aside: Fireworks has some issues with trackpad scrolling in panels, but you Windows geeks should be just fine with scrolling, I hear).

Finally, the Properties panel gives you complete control of the properties of all types of objects, including vector objects, bitmaps, symbols, auto shapes, vector masks, slices and more.

Closing Thoughts

Style guides, in their various shapes and sizes, are a critical part of any project, and using one brings many benefits, including the following:

• keeps the project visually and functionally consistent as it grows;
• keeps you from having to repeat the same task over and over;
• helps the developer understand how to build what you have designed, so they’ll ask you fewer questions;
• makes it easier to grow or modify the website or application.

In short, if you’d like a consistent, healthy app, then don’t overlook style guides. A guide converts design styles into values and standards of coding, and it could be invaluable to your project.

If you use Adobe Fireworks in your daily design workflow and have any questions about how to build a style guide, let me know on Twitter or here in the comments — I’d be more than happy to help! I’d also be glad to hear of your own experience with making (and updating) style guides.

Further Reading

If you’d like to dig a little deeper into style guides and other neat things that you can do with Fireworks, here is some reading:

• “Creating a Pattern Library With Evernote and Fireworks,” Kris Niles, Smashing Magazine
• “Useful Fireworks Techniques and Features for Large Design Teams,” Kris Niles, Smashing Magazine
• “Developing a Design Workflow in Adobe Fireworks,” Joshua Bullock, Smashing Magazine
• “UI Style Guide Template (PSD),” Tony Thomas, MediaLoot
• “Style Guide,” Wikipedia
• “Icon Design Handbook,” Jon Hicks
• “Design Cutting-Edge iOS Apps With Adobe Fireworks,” Ivo Mynttinen, Smashing Magazine
• “The Present and Future of Adobe Fireworks,” Michel Bozgounov, Smashing Magazine

(mb, al, il)

© Joshua Mauldin for Smashing Magazine, 2014.

There are plenty of techniques for implementing responsive navigation menus on your site.

One of your options: Build your menu from scratch. There are many tutorials on the Web for that if you need to learn how.

But some of us may just be interested in getting the task done as quickly and as painlessly as possible. In this case, you could use open source code.

In this post, I’ll discuss a few excellent open source projects for building responsive navigation menus.

There are many options out there, so for convenience, I narrowed it down to just 8.

At the end of the post, you’ll find a summary table that has links to the official site, demos, usage guide, and official open source repository for each project I’ll talk about.

1. Responsive Nav

This responsive navigation menu system is lightweight — less than 1KB when optimized. Responsive Nav doesn’t have external dependencies, meaning you don’t need to include a JS library like jQuery for it to work.

2. Bootstrap Navs and Navbar

Bootstrap has two components for building responsive menus. They’re called Navs and Navbar. If you just need a responsive menu, you should customize your Bootstrap build to include only Navs- and/or Navbar-related files.

3. menu-aim

This jQuery plugin will allow you to make responsive mega-dropdown menus modeled after Amazon.com’s fast and responsive menus. This is great for sites with lots of content. Read about the genesis of this plugin at this blog post.

4. Sidr

Sidr is a jQuery plugin for creating those vertical slide-out drawer menus you often see in responsive websites and mobile apps like Facebook.

5. FlexNav

FlexNav was created with a Mobile First approach. It has good browser support: For example, IE7 is supported. FlexNav is dependent on jQuery.

6. TinyNav.js

If you simply want to responsively change your HTML unordered/ordered lists to HTML dropdown menus when viewed on mobile devices, check out the first version of Responsive Nav (discussed above) called TinyNav.js.

There’s also a jQuery-independent fork of TinyNav.js called SelectNav.js.

7. Pushy

Pushy allows you to build a responsive, mobile-friendly slide-out drawer menu. It requires jQuery and Modernizr to support old browsers like IE7 to IE9.

8. SlickNav

SlickNav is a robust responsive menu navigation system that has a ton of options. It’s suitable on sites and apps with many links and subcategories. The development philosophy also emphasizes on Web accessibility: SlickNav is ARIA-compliant.

Summary Table

More Responsive Navigation Menus

• MeanMenu
• Menutron
• Navigataur
• Responsive Multi-Level Menu
• Off-Canvas Navigation for A Responsive Website
• Bamboo.js

Related Content

• What Is Responsive Web Design?
• 10 Infographics for Learning About Responsive Web Design
• 10 Best Responsive HTML5 Frameworks and Tools
• Related categories: Resources and Tools

About the Author

Jacob Gube is the founder and editor-in-chief of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post 8 Ways to Add a Responsive Navigation Menu on Your Site appeared first on Six Revisions.

The February edition of what’s new for web designers includes new web apps, icons, color resources, webmaster tools, graphics programs, CSS frameworks, JavaScript resources, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

GV Library

The Google Ventures Library is a great resource for entrepreneurs and designers alike, straight from Google. They offer founder interviews, design advice, and more.

Nasty Icons

Need something to spice up your designs? Nasty Icons is a set of 45 free icons with a decidedly adult theme, featuring plenty of violence and some rather racy content. (While these icons are just line drawings, they may not be safe for work.)

CSS Colours

Want to call your colors by name rather than hex code? CSS Colours is an incredibly thorough guide to CSS color names, including many obscure ones like “lavenderblush”, “tomato”, and “oldlace”. You can even view specific color families.

Feedthebot

Feedthebot offers up a complete guide to complying with Google’s webmaster guidelines. There’s a brief rundown of each topic on the homepage, linked to more in-depth coverage of each.

DevArt

DevArt is a new gallery from Google of art created with code by developers. It includes some truly innovative, engaging digital art installations.

BootstrapTaste

BootstrapTaste is a collection of free templates for use with Twitter Bootstrap. So far there are templates for a landing page and a single-page site.

Rrrepo

Rrrepo is a new site that features collections (repos) of high quality links on individual topics. It’s currently in private alpha release.

Headlinr

Headlinr is a billboard featuring startups and product launches, with no more than ten features each day. It’s a great way to stay on top of the industry.

Mondrian

Mondrian is a free online vector graphics editor that works right in your browser. It’s completely open source and easy to learn.

900dpi

900dpi is a hosting service that lets you create a simple CMS using only CSS that’s managed from right inside your Dropbox folder. They offer designers a free portfolio site, and paid sites for your clients are just $20/month.

Guideline Colour

Guideline Colour is a guide to the official colors used by some of the most popular brands out there. It’s broken down by category, and also searchable.

Titon Toolkit

The Titon Toolkit is a collection of UI components for creating responsive, mobile, modern websites. It includes toosl for HTML5, CSS3, Sass, JavaScript, jQuery, and more.

Min

Min is a tiny CSS framework, weighing in at less than a single kilobyte. It includes all the basics you’ll need for things like buttons and typography, and has support all the way back to IE5.5.

Start Bootstrap

Start Bootstrap is a collection of templates and themes for Bootstrap from Iron Summit Media Strategies. There are templates for single page sites, admin dashboards, landing pages, and more.

CSS Front-end Frameworks

This comparison of CSS Front-end Frameworks will show you compatibilities of the various major CSS frameworks, including Bootstrap, Foundation, Kube, Less, and many more.

Creditcard.js

Creditcard.js is a more usable credit card form built with JavaScript that addresses many of the UX shortcomings present in most credit card forms.

Uinames.com

Need names for your next project mockup? Uinames.com is a simple way to generate fake names for your projects. Just pick whether you want male or female names and press the spacebar.

Bootstrap 3 Vector UI Kit

This Bootstrap 3 Vector UI Kit includes all of the Bootstrap 3 UI controls in vector format, as well as Glyphicons and other bonus UI elements.

Social media cheat sheet – super speedy, all you needy

This Social Media Cheat Sheet gives you the image sizes and specifications of every major social network, including Facebook, LinkedIn, Twitter, Pinterest, and more.

Share Button

This beautiful Share Button is quick to implement and looks fantastic on virtually andy kind of site. Click on the button and a tooltip-style group of share buttons will appear.

Wow.js

Wow.js lets you reveal CSS animations as you scroll down the page.

HTML5 UP

HTML5 UP is a set of fully responsive HTML5 and CSS3 site templates that are super customizable and completely free.

Squarespace Logo

If you need to create an incredibly simple logo quickly and easily, then check out Squarespace Logo. Using stock shapes and typefaces, it’s not going to replace a real designer, but it is a passable quick and free stand-in.

Speaking.io

Speaking.io shares a great set of practical advice for those who worry about public speaking, whether it’s at a conference, company meeting, or anywhere else.

UI Faces

UI Faces is a simple way to grab avatar images for your mockups. Just set the avatar size,spacing between avatars, border width, background color, and container width, and you’ll get a block of avatar images to use. You can even get avatars that are authorized for public use.

The Pattern Library

The Pattern Library is a set of free patterns offered up for free by leading designers. You can use them freely in your designs, or even submit your own pattern to share.

Bebas Neue (free)

Bebas Neue is a sans serif typeface that’s become a sort of “Helvetica of the free fonts”, now with four weights: thin, light, book, and regular.

Simplifica (free)

Simplifica is a condensed sans serif typeface designed by KAIWA. It’s simple, clear, and very legible.

Abraham ($10)

Abraham is a free display font that includes upper and lowercase characters, fifty standard and interlocking ligatures, and more.

Brandon Printed ($29)

Brandon Printed is an eroded, printed take on the famous Brandon Grotesque typeface. There are four variations of every letter and several different styles in the family.

The Carpenter ($51.35)

The Carpenter is a stylized, elegant script family in three weights. It also includes ornaments and patterns, and is great for titling, posters, logos, and more.

Industry Inc ($29)

Industry Inc is a type collection based on the uppercase styling of the Industry family, with fourteen fonts included, with both stand-alone styles and a layered type system.

Castor ($24.50)

Castor is a distressed woodtype and letterpress style hybrid font based on grotesque letterforms. There are three options for each letter: lowercase, uppercase, and alternates.

Hitchhiker (free)

Hitchhiker is a stylized display font inspired by mid-20th century America and Jack Kerouac’s On the Road.

Port Vintage ($84)

Port Vintage is a modern twist on the Didone typeface. It has the exuberance and elegance of calligraphic type, while being inspired by the well known forms of Bodoni and Didot.

Black Fox ($59)

Black Fox is a bold, retro-styled typeface designed by Mans Greback.

Have you tried any of these resources? Know of a new app or resource that should have been included but wasn’t? Let us know in the comments.

Featured image/thumbnail, Leather Nunchuck via The Pattern Library.

4,000 Icon Web Fonts + SVGs (with Reseller License) – only $35!