{"id":42814,"date":"2019-05-09T14:20:01","date_gmt":"2019-05-09T14:20:01","guid":{"rendered":"https:\/\/owncloud.com\/?p=42814"},"modified":"2023-01-16T15:30:02","modified_gmt":"2023-01-16T15:30:02","slug":"the-owncloud-design-system-phoenix-makes-frontend-development-easy","status":"publish","type":"post","link":"https:\/\/owncloud.com\/de\/blogs\/the-owncloud-design-system-phoenix-makes-frontend-development-easy\/","title":{"rendered":"The ownCloud Design System \u2013 Phoenix Makes Frontend Development Easy"},"content":{"rendered":"
\n

The ownCloud Design System \u2013 Phoenix Makes Frontend Development Easy<\/h1>\n
\n

Whether you want to write an app or a theme for ownCloud, the ownCloud Design System for the new Phoenix frontend is a great toolbox. How can you get started? An overview:<\/p>\n<\/div>\n<\/div>\n

\n

To make the development process more transparent, there is an update on the\u00a0new Phoenix frontend<\/a>. We already told you how to\u00a0write an app<\/a>\u00a0of your own for Phoenix \u2013 this time it\u2019s about the ownCloud Design System, the new framework for giving Phoenix a nice look and feel.<\/p>\n

You can use it for making both apps and themes; you just need to touch different parts of the ownCloud Design System. This article will give you an overview, so you know where to start.<\/p>\n

 <\/p>\n

\"A<\/a><\/p>\n

The current state of Phoenix \u2013 there are already many components to create pages and apps.<\/em><\/p>\n<\/div>\n

 <\/p>\n

Phoenix is still work in progress. But you can use\u00a0vueJS<\/a>\u00a0to display components, which are based on\u00a0UIkit<\/a>. The ownCloud Design System already defines several useful components. Let\u2019s take a look at them:<\/p>\n

The Interactive ownCloud Design System Documentation<\/h2>\n

One great thing about the ownCloud Design System is that the documentation is interactive. It explains how it works and shows how to use the components in your app. At the same time you can preview the components and their design.<\/p>\n

 <\/p>\n

\"A<\/a><\/p>\n

What it says: you can directly edit the components in the documentation and preview the changes.<\/em><\/p>\n<\/div>\n

 <\/p>\n

Best take a look at it yourself. You can preview the elements here:\u00a0https:\/\/owncloud.github.io\/owncloud-design-system\/#\/Elements<\/a><\/p>\n

Note that this is still work in progress; as of the time of this writing, some of the texts are still missing. On the other hand, it updates itself automatically when new components are added to the ownCloud Design System.<\/p>\n

UIkit Components \u2013 the Atomic Design Approach<\/h2>\n

With Phoenix, all the components of the web interface can be dynamically ordered. You can easily decide what you want to have where, by placing the components where they belong in your vueJS code.<\/p>\n

These components are based on UIkit components. They follow the principles of\u00a0atomic design<\/a>\u00a0for frontend development, so we have elements, patterns, templates, and pages. To start with the smallest unit, elements:<\/p>\n

Elements \u2013 the Atoms of Phoenix<\/h3>\n

Elements are basic items which can be used in many ways; think of them as the atoms of the web interface. Menu items, file icons, search bars, warning messages, confirmation buttons, and all the other stuff a webpage needs \u2013 they are elements.<\/p>\n

 <\/p>\n

\"Some<\/a><\/p>\n

You can find elements in the documentation, e.g. these buttons.<\/em><\/p>\n<\/div>\n

 <\/p>\n

You can implement them easily wherever you need them. They will automatically follow the general look of the page. To get an overview what you can use them for, just take a look at the\u00a0Pages<\/a>.<\/p>\n

If you need to get into the details, you might need the elements. But most of the time, you will not need that level of detail. Instead, the patterns might be all you wish for:<\/p>\n

Patterns \u2013 Molecular Components<\/h3>\n

Patterns are groups of elements; like in molecules, in patterns you have all the necessary elements already ordered in a useful way. An example is the top bar, the side menu, and other screens which belong to the default furniture of any webpage<\/p>\n

 <\/p>\n

\"The<\/a><\/p>\n

An example for a pattern is the navigation bar \u2013 pretty sure you will need it.<\/em><\/p>\n<\/div>\n

 <\/p>\n

This way you don\u2019t have to implement each single element on its own \u2013 you can reuse groups of elements. Because of this, many parts in Phoenix will look similar, and users can find their way even if they use an app they haven\u2019t used before.<\/p>\n

If something does not entirely fit your requirements, just tinker your own! You can take the\u00a0example patterns<\/a>\u00a0as a model, and change them until it fits your need.<\/p>\n

Templates \u2013 Organisms of Patterns<\/h3>\n

Templates define the layout and structure of a section. This is where you order the patterns you need to build a reusable page. The whole organism is defined here \u2013 should your page have arms and a head? Should it be able to walk, and does it need legs for it?<\/p>\n

With templates you can put the components of your app where you need them, and where the user will see them later.<\/p>\n

Pages \u2013 so be it, Amen<\/h3>\n

When your templates are filled with content, you can see a page. This is where arms, legs, and head come together to form the beautiful\u00a0Wolpertinger<\/a>\u00a0you imagined. You should render a few pages to test whether your templates make the content actually look good.<\/p>\n

The documentation mentioned above is a good example of it \u2013 you can see the pages directly rendering the code. If you build it locally, you can change every aspect of it and see how different it looks.<\/p>\n

That\u2019s it! Those are all the tools you need to create the layout of your ownCloud app in Phoenix.<\/p>\n

Design Tokens \u2013 my Kingdom for a Theme<\/h2>\n

So now you know everything for creating an app layout \u2013 but what about the looks? In Phoenix, themes take care of the design. This has the advantage that on one ownCloud instance, every app looks the same.<\/p>\n

Design tokens are where the theming happens \u2013 app developers won\u2019t need it, but if you write a Phoenix theme, this is where you change colors, fonts, and icons.<\/p>\n

 <\/p>\n

\"The<\/a><\/p>\n

You can choose from these colors for your components \u2013 or create a theme with your own favorite colors.<\/em><\/p>\n<\/div>\n

 <\/p>\n

The design tokens are SCSS variables which define how components look like application-wide. When you want to choose one of them for your component, you can preview the look\u00a0in the documentation<\/a>.<\/p>\n

They also include the icons. The ownCloud Design System provides an abundant\u00a0set of icons already<\/a>\u00a0\u2013 but if you want different icons, just ship your own and use them in the design token class.<\/p>\n

No need to make it more complicated \u2013 with themes, you can concentrate on designing instead of worrying about architecture.<\/p>\n

 <\/p>\n

\"A<\/a><\/p>\n

There are plenty of existing icons to choose from.<\/em><\/p>\n<\/div>\n

 <\/p>\n

Intrigued? Try it Out!<\/h2>\n

To start designing, you need an app of your own of course. Fortunately, getting started with Phoenix app development is really easy. This blogpost is a great start:<\/p>\n

Write an ownCloud app for the new Phoenix frontend!<\/a><\/p>\n

Did you like this blogpost? Do you have further questions? Leave something in the comments below or share this article on social media!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Whether you want to write an app or a theme for ownCloud, the ownCloud Design System for the new Phoenix frontend is a great toolbox. How can you get started? An overview:<\/p>\n","protected":false},"author":7,"featured_media":42815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[603,43,55],"tags":[],"class_list":["post-42814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apps","category-blog","category-owncloud-product"],"acf":[],"_links":{"self":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/42814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/comments?post=42814"}],"version-history":[{"count":1,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/42814\/revisions"}],"predecessor-version":[{"id":68035,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/posts\/42814\/revisions\/68035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media\/42815"}],"wp:attachment":[{"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/media?parent=42814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/categories?post=42814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/owncloud.com\/de\/wp-json\/wp\/v2\/tags?post=42814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}