Video: Part 3 – Adding styling with CSS
This video is all about CSS styling.
You’ll see me working on the list created in the previous episodes (Part 1 and Part 2) and transform it to something a lot more interesting.
In this 42 minute video you’ll find:
- 02:30 to 10:20 — Style the list container and setup the structure.
- 10:21 to 19:00 — Style list elements.
- 19:01 to 37:20 — Style the controls within a list element including hover states.
- 37:21 to 38:52 — Using HSL to find colors.
- 38:53 to 42:25 — A little border, saving CSS with the Theme Roller, and wrap it all up including the before and after.
Part 3: Adding styling with CSS from Jorge Rimblas on Vimeo.
Coming next… Drag & Drop!!!
Oh, one last thing, did you like the new video bumpers? I’m pretty excited about them.
Music licensed from Envato’s AudioJungle.
Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm an APEX Tech Lead DRW. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.
One more great presentation, thank you.
Isn’t it better to work with “File URLs CSS” instead of inline and to keep code in one file?
Do you plan to implement subtasks functional? Moreover interesting how drag&drop feature can be developed with subtasks.
Do you mean “File URL CSS” vs CSS inline with the application? Yes, much better and that’s why I keep the global.css so I can deploy it to the server (if available). In this case, I don’t have access to the server.
Subtasks…hmmm, no I was not planning on this. I’ll have to think about that. And yes, if I did drag & drop with subtasks would make it much more “interesting” to say the least. I’ll add this to the list of ideas. Thanks!
Yes, I meant .css file, if you don’t have server access it’s not the solution, I see.
Subtasks functional would be really cool feature, so your solution would be really powerful and could be used for real life purposes. Then add advanced tasks description and you eventually create asana/write etc. :)
*wrike I mean
As for subtasks — I suppose that in systems like todoist all tasks and subtasks stores in one table, because sometimes while testing todoist I eventually changed order, so subtask of task A become subtask of task B without any notices. So if follow this conception, the only difference from flat task list is some flag “is subtask”, so that task should be indented.
If create relation tables Tasks and Subtasks — this case can complicate things a lot, especially when reorder subtasks between different tasks.
I like the simplicity of subtasks being a flag and CSS will indent them and show them a little different than the parents.
I chose a Todo List because the core concept is universal and people get it. It has been a perfect platform for working with different techniques however, I never envision it as a final product. Much less an Asana alternative! Wow
Thank you for the ideas, keep them coming!
Great presentation…!
I have downloaded your sample application but tables (and other objects) are missing. Could you please provide the script for tables and other objects?
Kind Regards,
Bhavin
Thank you for pointing that out. I have now updated the App Export to include supporting objects. I thought I had done that.
Also, this app did not originally contain this “enhanced” version of the todo, but I’ve started it. It doesn’t match the video app completely yet, but it’s getting there.
Thanks for another great presentation. I like the fact that you don’t seem to be rushing through it, but instead are explaining yourself very well. It is great to watch each css change and how it affects the look and feel. Especially the part about scale.
Thanks,
Jeff
Thank you! I really appreciate the feedback, glad you liked it.
Great, Jorge.
Keep going. You’re doing great.
Thanks,
Omar
Thank you Omar!
Thank you. This is very useful.
simply awesome !