1–10 of 40 posts
I feel as though I have a decent theoretical understanding of CSS but I want something that is just drilling home stuff like creating great looking buttons, panels and input fields.
Any suggestions are much appreciated!
- Make a sketch of the design, form positioning or interface you want for a certain page.
- Try to translate this design to a more comprehensible form for your interpreter (I mean writing CSS lines).
- Long cycle of try and error, reading stackoverflow, testing, reading snippets.
Practice this for a certain amount of time (be patient!) you will find yourself a world class CSS "writer". The main basis is moving from a sketch to CSS script.
In my opinion it goes like this : - Make a sketch of the design, form positioning or interface you want for a certain page. - Try to translate this design to a more comprehensible form for your interpreter (I mean writing CSS lines). - Long cycle of try and error, reading stackoverflow, testing, reading snippets. Practice this for a certain amount of time (be patient!) you will find yourself a world class CSS "writer…
In my opinion it goes like this : - Make a sketch of the design, form positioning or interface you want for a certain page. - Try to translate this design to a more comprehensible form for your interpreter (I mean writing CSS lines). - Long cycle of try and error, reading stackoverflow, testing, reading snippets. Practice this for a certain amount of time (be patient!) you will find yourself a world class CSS "writer…
However, for the last two years I've been building a related web app that's all JS. We've cobbled together our own UI conventions out of HTML, CSS, and Backbone/Marionette classes. For a long time, I got frustrated with any task that involved doing UI layout. I inevitably found myself reduced to desperate googling and randomly flipping CSS attributes in the hopes that I might finally get things to slide into place.
Fortunately, in the last couple months things seem to have finally come together for me. The two keys for me have been:
- Grasping the core concepts of the HTML box model and block/inline behavior
- Flexbox. Flexbox FTW. I've been able to replace SO many nasty CSS hacks with simple flexbox directives over the last few weeks.
Here's two key links that have really helped me:
- http://learnlayout.com/ is a great guide to the basics of layout in CSS
- http://jonibologna.com/flexbox-cheatsheet/ is a simple graphical overview of flexbox commands
Obviously, all this is focused on the layout aspect rather than the "styling" part per se, as that's been my biggest concern on this project.
In my opinion it goes like this : - Make a sketch of the design, form positioning or interface you want for a certain page. - Try to translate this design to a more comprehensible form for your interpreter (I mean writing CSS lines). - Long cycle of try and error, reading stackoverflow, testing, reading snippets. Practice this for a certain amount of time (be patient!) you will find yourself a world class CSS "writer…
Similar experience, but I focused on finding UI elements I liked from native apps or websites and attempted to clone them without looking at the source, then played around with the result to figure out how I could simplify it, how it behaved cross browser, etc etc.
https://twitter.com/SaraSoueidan https://twitter.com/anatudor https://twitter.com/LeaVerou
2. Get a codepen account and start experimenting, sharing new ideas on css forums ect.
3. Try to replicate some css frameworks like pure. Read the code; try to figure out how they did something.
4. Finally, I recommend CSS Secrets book by Lea Verou. You can buy a pre release copy.
- Find and read some front-end designer blogs.
- Take a good (CSS) framework like HTML5 boilerplate and dissect its code.
- Remake your last favorite designed site without looking at their code. Then compare afterwards.
- Start creating your own framework for rapid prototyping. Add layout-rules to common UI elements: breadcrumbs, pane lists, buttons, forms etc.
I'm an applications programmer. My first meaningful web dev experience was a GWT app I built from 2011-2012 using the SmartGWT widget library. They completely bypass the standard CSS layout modes - everything is absolutely positioned using locations calculated in JS. Felt very much at home given my previous desktop UI toolkit experience. However, for the last two years I've been building a related web app that's all…