Give Your Web Prototype Designs Some Style with CSS

While you can set basic styles for each of your components using the Info dialog box inside ProtoShare, you may want to add CSS (Cascading Style Sheets) to add extra flavor to your web prototype designs. You don’t have to be a programmer or even have much experience with HTML to specify background images, font types, colors, borders, padding, alignment, and more using CSS.

Each project in ProtoShare has its own Style Sheet, which is where you can specify your styles. The Style Sheet for a project is found the in the Style Sheet folder in the Library. The Style Sheet is a WYSIWYG text editor that can be saved automatically or manually (Hint: you can use the ⌘S shortcut when auto-save is turned off). Changes saved on your Style Sheet are reflected on your designs immediately.

web prototype stylesheet

CSS uses code to define what and how elements of your design are displayed. Like any code, there are certain grammar rules that need to be followed. CSS syntax has two main pieces: a selector and at least one declaration.

With ProtoShare, you’ll want to use either #id or .class mark-up as your selectors. You can specify project-wide (with the .class selector) or component specific (with the #id selector) styles in your Style Sheet. Each component available in the Palette has its own .class selector name, which is found under the Mark-up section of the Info dialog box. Here, you can also set the #id selector name for a specific component.

CSS for web prototypesThe declaration line is where you’ll specify what style change is going to affect your selector. A declaration consists of a property and the value that is assigned to that property. A declaration or group of declarations needs to be enclosed by curly brackets and each declaration needs to be followed by a semicolon.

CSS for web prototypesIn the example above, the code specifies the background color of the myBox component to be coral. You can read the code almost like a sentence: “I want myBox component’s background color to be coral…”.

CSS for web prototypes

In the example code, I used an actual color name, but CSS also supports hex codes and RGB values. There are more than 145 color names you can use in your CSS code; click this link to see an extensive list has compiled. There is a plethora of CSS resources and tutorials available on the web, which you may find to be invaluable.

Now that you’ve got the basics on how to use CSS with ProtoShare, you should be able to get started customizing your designs quickly and easily. One of the quickest ways to familiarize yourself with using CSS with ProtoShare is by experimenting with it yourself.

This entry was posted in Blog, ProtoShare Workflows. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *