CSS 3 in Design Studio

[terryyang]

[Introduction]

Design Studio dashboards renders by HTML5/CSS3 technology, so lots of great features of CSS 3 are available for us to achieve fantastic layout and user interactions.

CSS has been as standard for a long time, while CSS 3 is newer. In order to share what can achieved in Design Studio by CSS 3, I assembly a Design Studio dashboard which implemented major properties as a Sample Library. Hope this app could help you much in daily work.

This app is a local app which can be imported in Design Studio 1.6 SP1.1+ (Because Scorecard is used in this app). No network is required. No additional SDK components are required.

Download link has been attached at the last chapter. The final file is a zip file exported from my project. Because it is not too big, I compressed the zip with a picture and attached in this artical directly. With the instruction in [Download] chapter, you will easily get the application, I think

[User Manual]

1. Layout

It is recommended to run in full window browser. 9 common categories are listed on the left side of the page. In each category, one or more properties are categorized together and you can review the details by switching the button on the top right corner of the page.

In details parts, you'll find 3 or 4 columns which gives you more information on the property selected. From top to buttom, the titles are, normally, "Explanation" telling you the meaning of the property, "Browser" hinting you which version of which browser is able to support the selected property, "Additional Properties" listing the sub-level properties underlying the selected property and "Samples" demostrating some typical samples by the property.

Through this app, you'll get a more vivid scenario on how CSS 3 works in Design Studio.

2. How to copy styles

Although I have put sample codes on "Sample" part, due to no editable, multi-line text field components available in Design Studio, the only way to copy the style code is from Design Studio designer css files.

#1. Click the formatted elements and find CSS Class name

#2. Open attached CSS file, and position the CSS Class

#3. Copy it and make modification in your app

[Summary]

CSS 3 properties applied in this app are some more useful ones, not all since it is hardly to capture all CSS 3 in a file.

Moreover, the explanations I made, for some properties, are quite detailed, but for some, are a little bit rough. I made the samples with a rule that to include as more as properties/sub-level properties to fully demostrate how they work. However, because of the capability, if you still have some unclear questions regarding some properties, I really recommend to you find some technical documents on them, after all, CSS 3 is quite in.

Reference for you (CSS and CSS 3 are all here):

https://developer.mozilla.org/en-US/docs/Web/CSS

[Download]

1. Save the picture below to your laptop (CSS 3 in Design Studio Sample is a picture :smile: )

2. Change the file suffix from .png to .zip (Ignore the warning)

--> 

3. Now you can import css3.zip into your Design Studio

4. Here we go! Enjoy.

(5. Preview of css3.zip content - please use WinRAR)