Styleguide Nextcloud

[Espina2]

So I start design a styleguide with what I already have in the link below. https://cloud.paulomoura.com.pt/nextcloud-styleguide/#!introduction

The link is just updated to the block "Typography".

So I want to know where I can deploy this. Maybe a new repo?

And of course know what you guys think about this. This is really early on version so don't focus in my actual content.

@nextcloud/designers @jospoortvliet @LukasReschke

[enoch85]

Really cool! What about the Documentation?

[Espina2]

@enoch85 what you mean?

[enoch85]

I mean that this could be a part of the Nextcloud Documentation maybe? @nextcloud/documentation

[skjnldsv]

I'm interested in the form section of your guide. I want to summarise the inputs on nextcloud to simplify it for the scss switch. Right now we have a lot of various stuff in inputs.css which could really be improved. Your guide isn't up-to-date right now, right?

[Espina2]

@skjnldsv No this part is not updated. The ideia is to have this in a public nextcloud repo so all we can change and add things. The final ideia is to this platform compile a css file that we would use in our platforms, so we don't need to repeat all the style properties. Like if that are components, you only need to call them in the HTML and it looks the same.

This will make everything more easy and get sure that everything looks the same and works in the same way.

Anyway this an "WIP" so if you think we can use this in another way just let me know.

[Espina2]

If you want to take a look this are in public repo.

https://github.com/Espina2/nextcloud-styleguide

You have the documentation right here. http://hugeinc.github.io/styleguide/start.html

Let me know if you need some help

[jancborchardt]

@Espina2 so @eppfel is also doing a styleguide, can you please coordinate here? https://github.com/nextcloud/nextcloud.com/pull/140

Some feedback:

• the heading styles look a bit strange with the alternating regular and light. We should never use Regular because it has too little contrast to light. h1 should be light for sure, and we should only minimally go down to h4, ideally h3.
• Inputs should get a border-radius: 3px; and border-color (no inset shadow) same as in the web interface
• The list bullets and 1/2/3 etc should be hanging: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-2
• What’s that »Bring your data home« in the footer? It’s »A safe home for all your data«, no need to modify ;)

[Espina2]

@jancborchardt this are only updated to the buttons section like I said. I will have the points you said in consideration, but you will able to change to. I just need that you guys create a repo for me deploy this. And everyone can contribute, with code and with design knowledge.

The page that @eppfel have is much more textual and conceptual, with links for previous discussions. For sure that we should take a look at that but the ideia in here is to show more visual examples and default guidelines for what we already do.

[eppfel]

Yes, different approach, but still we should coordinate this @Espina2. You wanted something like a brand guideline and more visual approach and it's part of the agenda in #140; so let's not work in parallel. The collection of discussions are also a lot of examples what we already do, just more focus on interaction, than on visual, so your input is needed. Feel free to add your thoughts, examples or else to the pull-request description. I still feel we need a better action plan for this process...

[Espina2]

@eppfel I want to stop having same things in different way. At this point I just start using a framework to make that happen. The "perfect solution" is to get throught all the components that we already have, see if have for the same thing two different solutions and think about what is the best solution. For example if do the illustrations with that style we should mantain that right? We should have one place where we can discuss that, but for now we only have github and I dont think its a good approach to have thousands of issues just to ask for example, what do you think about we change the lists?

So I believe this Will take many time to see the "lights of the day" first because are few little people interested in doing that, I can't do this alone, and we need expertise in front-end development. I can do some things but in the end my code it will be bad, and for example I can do some things that can't be very optimized, and by sending all the bad code I'm making the things worse.

I think this is the opensource way, if you want something you have to do it yourself, you can't only suggest and now I don't have the time and the development skills to do that.

[jancborchardt]

@Espina2 the open source way is also to collaborate – as you said you can’t do it alone (and you’re not the only person interested in this ;)

Your start using that framework looks good. @eppfel’s points from #140 should be in the same place, as should be the existing CSS guidelines https://docs.nextcloud.com/server/11/developer_manual/app/css.html

If we take the approach of starting with what we currently have and gradually improving it, it won’t take much time to see the light of day. In fact it’s already there. We can start new things all the time and be ignorant about what was in the past, but there was thinking behind that and things which exist following that. So we need to adjust piece by piece.

[eppfel]

For example if do the illustrations with that style we should mantain that right?

@Espina2 I didn't get this example.

The idea behind #140 was to collect these examples every time they come up, so you don't have to search for them in thousand issues. But still, let's not argue, we can easily do both. Again feel free to add your stuff to the PR or include #140 in your work.

[Espina2]

@nextcloud/designers this is dead? :p

[jancborchardt]

Well we have some people working on separate things, so if we focus on one approach that would be pretty awesome. ;)

For example, I talked with @skjnldsv that we should add the new stuff like 3-dot-menu and such to the CSS page at https://docs.nextcloud.com/server/11/developer_manual/app/css.html

Then our UX / design guidelines from https://docs.nextcloud.com/server/11/developer_manual/general/codingguidelines.html#user-interface should be the base for a new site at nextcloud.com/design:

• Listing these guidelines (in the future providing examples)
• Linking to the HTML/CSS/icons page for developers
• Letting designers know how to get involved
• And of course also listing the colors and typeface/sizing we use, as you collected on that other page @Espina2 :)

[skjnldsv]

Yep, I'm working on finishing implementing all of this, then updating the dev manual :)

[eppfel]

Then our UX / design guidelines from https://docs.nextcloud.com/server/11/developer_manual/general/codingguidelines.html#user-interface should be the base for a new site at nextcloud.com/design:

We could just use nextcloud/nextcloud.com#140 to finish this or we close it and start fresh. I still think there is a strong need to discuss Nextcloud Design Principles, so we safe time on discussing particularities on future issues/redesign/changes. But now I believe, we need more then a PR / issue to do this. Maybe @jancborchardt and me could draft something @ FOSDEM and then we make a online video conference with @nextcloud/designers to discuss/refine it.

[jancborchardt]

Good call! So @skjnldsv works on the CSS/HTML and then updating the dev manual. @eppfel and me will sit together at FOSDEM for the more higher-level guidelines and a first start of a nextcloud.com/design page. :)

[skjnldsv]

I shall warn and remind you that I need to finish the scss implémentation first! 😉

[Espina2]

@eppfel @jancborchardt sounds like a plan. :)

[Espina2]

Useful Reading and examples http://designguidelines.co/index.html