Skip to main content

SILK UI Framework

 

OutSystems

FAQs

Development

I have a custom design for my application. Can I still use Silk UI?

Silk UI themes are fully extensible with CSS. Your custom design should be implemented the same it would be with any other UI Framework, by overriding the default styles and adding new ones.

By following our conventions and rules to customize patterns, you are ensuring that you have an organized CSS structure that can easily be changed and maintained.

Where can I find Silk UI Themes? 

Silk UI Themes come with a Template to start new applications using that Theme.

You can find Silk UI Web Themes / Templates separately in OutSystems Forge searching by “Silk” or filtering by “Templates”.

For Silk UI Mobile, they are already shipped in the Framework.

Can I use the London theme with Silk UI? 

No. The Silk UI patterns depend on some page layout logic, which is not present in London. The Liverpool theme is the closest match to the London theme.

Check the Liverpool Theme

How can I create a custom layout to use with Silk UI Web?

Clone the existing Silk layout for your theme and make the needed changes, but keep in mind to keep the mandatory elements: the "Page" container and the "WidgetsForLayout" Block. More info on Customizing Silk UI's documentation page.

Can I change a Silk UI pattern? 

From OutSystems 10 onward, it is not possible to directly change the Silk UI modules. If you need to change a specific Pattern, clone it and make the necessary changes on your clone.


About Silk UI

What's the difference between Silk UI Mobile and Silk UI Web?

Silk UI Mobile and Silk UI Web have different code bases.

Silk UI Mobile was built from scratch to have a native-like look & feel in smartphones and tablets.

Silk UI Web supports several desktop browsers and implements a responsive approach.

When building a Mobile App you’ll use Silk UI Mobile immediately through one of the provided application templates.

For a Responsive Web application, you can find the Silk UI themes/templates in OutSystems Forge. Install one of them and start creating new apps from it.

Why did you create Silk UI?

User Interface development is described as one of the most challenging tasks in web development. In a big part this is because the complexity of CSS is commonly under-estimated.

Silk UI aims at removing this complexity for common web and mobile patterns, reducing the need for CSS proficiency in OutSystems development teams.

What's the problem with CSS?

CSS looks easy at first. But it quickly grows into quite a mess without some specific know-how. The approach we’re implementing fits a methodology called Styleguide-Driven Development.

http://webuild.envato.com/blog/styleguide-driven-development/ 
http://mediatemple.net/blog/tips/modern-style-guides-for-web-design-and-development  
http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/

How do you ensure quality in Silk UI?

Tests in several browsers and mobile devices with different orientations, developer experience review and installations from Forge.

Why didn't OutSystems use Bootstrap or another Front-End Framework?

In essence, we preferred to build it ourselves, to ensure a perfect fit with the platform. We wanted to make sure we could change the code when required, that it had a perfect preview in the Development Environment and that we could implement an enterprise-grade responsive behavior and native-like mobile performance.


Support and Maintenance

How do I install Silk UI?

Find the latest versions of Silk UI Mobile and Web in OutSystems Forge. Your environment (both cloud and on-premises) is not updated automatically.

What browsers and devices are supported?

Silk UI Web is built to support all modern browsers such as Chrome, Firefox, Edge, Safari, Opera and all modern devices such as IOS 7+, Android 4.0+ and Windows Mobile 8.1+. Internet Explorer, starting with version 8, is also supported, but with some limitations (check patterns documentation for IE8 compatibility).

Silk UI Mobile follows the same requirements as OutSystems Now, Android 4.4.2+ and IOS 8+.

Should I upgrade Silk UI? 

You are always encouraged to upgrade to get the latest and greatest.

Silk UI has a specific team at OutSystems R&D that is working to improve and evolve Silk UI, so periodically there will be new releases with bug fixes and new features. 

We take special care in avoiding breaking changes at all costs, but be sure to review the version's history in Forge to validate how these could affect your applications.

How do I upgrade Silk UI?

Get the latest Silk UI version from the Forge.

Check the version of your Silk UI and review the version history in Forge. There may be breaking changes.

Make sure you review them to know how these could affect your running code.

What qualifies as a Breaking Change in Silk UI? 

Anything that breaks references between modules (change of parameters, for instance) or CSS changes that affect the look-and-feel in an obvious way.

How do I check the version of Silk UI installed in my environment? 

Web

To check the version of Silk UI Web, just change accordingly and access the following URL:

https://[myserver]/WebPatterns

Mobile

To check the version of Silk UI Mobile version, just change accordingly and access the following URL:

https://[myserver]/MobilePatterns

Can I contribute to Silk UI? 

You can contribute by providing feedback of your experience with the framework, sharing ideas and also reporting any issues you find while developing using Silk UI. Use the official forums and get the community involved.

I have a problem with Silk UI. What do I do?

If you have any problems or questions while using Silk UI, contact OutSystems Support.


Responsive and Adaptive

How can my app support both phones and tablets?

Silk UI Mobile comes with 3 templates. Both Template Phone and Tablet are targeted for specific devices, but they also offer a good fallback to other form factors.

If you need to create different versions of the same screen for each device in the same application, use the Universal Template and follow the guidelines on the HomeScreen to be able to navigate to the correct one for the current device.

How does Silk UI handle Responsive?

In Silk UI everything is responsive - themes, layouts and patterns. But it is a different kind of responsive. Instead of using a client-side approach, where all content is always sent to the browser and it decides then, through CSS, what to show to the user, a server-side approach is used.

This server side approach is sometimes called RESS (Responsive through Server Side components). Learn more about the RESS approach through LukeW or Smashing Magazine.

By using a server-side approach, it means that content will not adapt as the browser is resized, however that is not the main use case for responsive. The main use case is when a specific device accesses the application and require an adapted version of the page to improve fit and performance.

Why did Silk UI implement Server-Side Responsive?

The server-side responsive approach has several advantages over the client-side:

  • Only the required content is sent to the browser, because the server is aware of the device in use.<(p>

  • There are no CSS media-queries, which makes the responsive easier to understand and handle.

  • The device context is present on the server, which means different strategies can be used to handle devices.

How does Responsive work in Silk UI Web?

Silk UI uses a responsive server-side approach, which means it does not rely on CSS to handle the page rendering for devices. So, no media queries will be found in our CSS.

And that’s good, in our perspective. Media queries are difficult to read, hard to maintain and easy to break.

  • Was this article helpful?