DevvitIO / Lanflix

Netflix for your LAN
MIT License
7 stars 13 forks source link

Basic Elements #8

Open KenavR opened 7 years ago

KenavR commented 7 years ago

Implement some basic elements people can use through out the application.

.lf-pill .lf-button .lf-input .lf-spinner

If you want, you could add additional elements, you think we may need in the future. Whoever works on this can also add different styles. E.g. “.lf-pill.red”, “.lf-pill.blue”,...

hotborsh commented 7 years ago

Are there or will be there any style guides for these elements?

KenavR commented 7 years ago

We can talk about color schemes and some other basic stuff, but so far I have nothing specific in mind. We could also look through https://designschool.canva.com/blog/50-meticulous-style-guides-every-startup-see-launching/ find something we like and go from there.

teevik commented 6 years ago

Hey, we could maybe use something like Spotify's styling? Or maybe some material design?

KenavR commented 6 years ago

Do you mean that we should mirror the styling of Spotify or Material or that we should just use the libraries? I know Material, but does Spotify have a style guide or a CSS "framework"?

teevik commented 6 years ago

Meant mirroring, but that's probably a bad idea. Could use material design? Not an expert on this stuff :P

KenavR commented 6 years ago

Actually mirroring is great, it gives a clear reference and we are still building our own. I also really like the Spotify theme.

teevik commented 6 years ago

Yeah not sure what to do, we could just make or own styles from the ground

teevik commented 6 years ago

Also, will all components have .lf prefix in the class name?

KenavR commented 6 years ago

Now you may ask why are the component(class)name and the directory name different? It is good practice to namespace our components. In our case we prefix every component class with "lf-" for "lanflix". This allows people to use our component library in other projects without interfering with other libraries or project specific CSS. -source

but I am open to discussing that. If you want to work on it, I am happy if you just pick a style or framework you like and try to "rebuild" it. If there is no one for whom this would be a challenge I am open to using something that already exists.

teevik commented 6 years ago

Yeah, might be a good idea, but don't think people would use this as component library

teevik commented 6 years ago

Also, i would love to work on it, could maybe go with some sort of material design style? Think it could really work for something like this

KenavR commented 6 years ago

People may not use it as component library, but what if we want to add something like bootstrap in the future. Calling the class "button" may introduce troubles then.

Material design is great and if you really want to mimic it quite challenging but you can take a look at Material Design Lite to get an idea. (e.g. input field)

teevik commented 6 years ago

Yep alright, we can keep the prefix.

By the way, is it ok to use css variables?

KenavR commented 6 years ago

I guess they are fine - https://caniuse.com/#feat=css-variables

teevik commented 6 years ago

Alright, will definitely make something like material design easier

teevik commented 6 years ago

Will try and see how well material design will work, otherwise we can do something else

teevik commented 6 years ago

Hey, is it okay if i try to make a mockup of how the page could look with material design? I'm not good with design programs so would be better if somebody else did it, but i can try

KenavR commented 6 years ago

If it helps you sure, I am not too bad with PS but in this case, I would actually hardcode it using Material design lite or something. I am not sure if there are prepared MD elements for PS, but if not I think I would get faster results just hardcoding it in html.

teevik commented 6 years ago

We have any sketch of how it's going to be layed out?

KenavR commented 6 years ago

Here are some rough sketches (suggestions). The filters are similar to the ones on Airbnb. mockup_main

mockup_series

teevik commented 6 years ago

Alright, will start

teevik commented 6 years ago

Ah hey, sorry but won't have time to work on this next to school :( Can somebody else work on this issue?

teevik commented 6 years ago

Hey, sorry for being away for so long

Any thoughts on this? https://xd.adobe.com/view/9326c9bc-ed4e-4f94-9d2f-08ed6d7f116a (or zip) lanflix.zip

It's pretty much like the sketch, but added some shadows, etc. There's only the home page right now

KenavR commented 6 years ago

Looks great. Sorry, for the delay I am scheduling my days now and I will set aside time for this project.

ghost commented 6 years ago

Hi everyone! I'm wondering if you'd like to use http://materializecss.com/ for front-end, as it's responsive and pretty easy to use. As for the mockup from @teevik we could use the "card" design, along with whatever color-theme chosen. It'll look nice and clean.

teevik commented 6 years ago

Sure, I'm fine with materialize