search

youseedk / dna

CSS framework for yousee.dk
ISC License
6 stars 6 forks source link

The good old sample-mockup page #265

Open exetico opened 3 years ago

exetico commented 3 years ago

Hi

I really like all the good design-elements in the YouSee DNA. Is there a place where most of the things is shown, in a mock-up like template?

It would help users to find inspiration, for usage of each element, not to mention a good effective way to give a powerfull example of the ys-container, ys-row, ys-bow, ys-card in multiple ways.

I'm aware of most users would start with a design mock-up, but sometimes it's nice to see elements in use on a page, which quite a few real-scenario mockups. Not to mention a way to have a quick overview of all options, and routes to the specific elements/rulesets in the YouSee DNS-documentation.

And oh, maybe I totally overlooked that part. If so, could you be kind and provide the link? Thanks, that's much appreciated. 👍

razvandk commented 3 years ago

i am not 100% sure i understand what are you looking for, maybe try https://dna.yousee.dk/ for the raw version of youSee DNA or the react version at Latest: https://dna-react.netlify.com/ Next: https://dna-react-next.netlify.com/

grandorf commented 3 years ago

Our homepage (yousee.dk) is made by YouSee DNA. Here you can find below code in use;

But I think what you are asking for is an example in dna.yousee.dk that shows page-layouts as examples?

dechowdev commented 3 years ago

We could make an issue for a kitchen sink kind of demo page - like bootstrap...

But I think maybe you want to see use cases like tailwind @exetico ?

e.g. https://tailwindcss.com/components/cards ?

I think we can do something in this regard... but it is really up to how the designer wants to implement the DNA style :)

Lubbe91 commented 3 years ago

e.g. https://tailwindcss.com/components/cards ?

Isn't that what dna-react is doing ?

Latest: https://dna-react.netlify.com/ Next: https://dna-react-next.netlify.com/

exetico commented 3 years ago

Hi,

I just realized that I mixed my private and business account, wherefore I'll stick to this one, in the current issue.

I'm sorry for not making it 100% clear. My request is as @grandorf metions, a sample-page with full page-layouts, where most of the components are used, to give the user a good and fast overview (Which can help with inspiration, on how to combine elements, but also allowing to user to see most, if not all, components in actions).

I'm thinking of Cards (as mentioned by @Dechowmedia), but also full-page examples, which could provide helpful inspiration, and a fast overview of all (if not all) components, stylings, and so on.

Bootsrap have done something like that, in their Bootstrap Doc > Examples-section. It's overkill to make multiple pages, for sure, but I was thinking of something like that, maybe with even more components on (each) page.

dechowdev commented 3 years ago

That can be done - there is nothing implemented like that today unfortunately. It will take some time though, and different parts need to be aligned on it - a recipe page of sorts would also be a great tool for designers to showcase / share - how e.g. landing pages (for the most part) are utilized in other squads.

I think a designer though needs to gather references for this, as we do not have much reference implementation examples in the org (but many can maybe be gathered from our respective tribes)