I once inherited a project where the previous "webbed" had forced a lot of css formatting using "!important". I wanted to pull out my hair because of how unpredictable everything was.
My First CSS
41–50 of 107 posts
Re: My First CSS
#42I tend to believe that someone who can do magic CSS is about the ability to weave it with Mathematics and patterns. Other than that, the way you use CSS as it evolves become more and more syntactic sugar. Once you are comfortable with CSS, try to dig a tad deeper into design philosophies and patterns. Work with established designers who understand that spacing is not just margins/padding of a designated number but a…
I want to see it, I'm just curious.
I was curious too. Probably https://careers.jpmorgan.com based on his LinkedIn and the fact that he said "Careers Page redesign for one of the biggest banks in the world."
Re: My First CSS
#43> box-sizing: border-box I feel ashamed not knowing about this option. content-box has caused me so many troubles over and over again, and I didn't know it had such an easy solution.
I always thought I knew CSS quite well but only found out about border box quite recently too.
My CSS knowledge has improved substantially since subscribing to Kevin Powell's YouTube channel.
Re: My First CSS
#44These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…
A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some a…
All the problems you just listed are everywhere else but the CSS.
Re: My First CSS
#45> A key way I think about building visual UI components is that basically everything can be broken down into a bunch of rectangles on a page. I created this tiny script[1] in order to be able to view all the rectangles that makes a website, a little while ago. Here's a demo[2]. [1]: https://gist.github.com/corentinbettiol/85a8938175f89a15ac35... [2]: https://up.l3m.in/file/1597168094-tilt.webm
I just add this to the CSS:
* { border: dotted red; }Re: My First CSS
#46These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…
A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some a…
> You know you can scroll to the left and right really easily if you hold down shift?
On a touch interface?
Re: My First CSS
#47I tend to believe that someone who can do magic CSS is about the ability to weave it with Mathematics and patterns. Other than that, the way you use CSS as it evolves become more and more syntactic sugar. Once you are comfortable with CSS, try to dig a tad deeper into design philosophies and patterns. Work with established designers who understand that spacing is not just margins/padding of a designated number but a…
I want to see it, I'm just curious.
On his personal about page: https://cv.brajeshwar.com/
you can see it was jpmorgon for https://careers.jpmorgan.com/
If you do check that page and some more pages you’ll note there are (on latest iphone) serious design issues.
Ironic that its a career page since they definitely need some work done on that web design.
Usually you can ignore “minor” issues but when its a bank such as jomorgan, a “leading” digital company such as razorfish and such glowing HN comments from the actual people involved you really have to wonder about the state of things.
Re: My First CSS
#48I tend to believe that someone who can do magic CSS is about the ability to weave it with Mathematics and patterns. Other than that, the way you use CSS as it evolves become more and more syntactic sugar. Once you are comfortable with CSS, try to dig a tad deeper into design philosophies and patterns. Work with established designers who understand that spacing is not just margins/padding of a designated number but a…
> Advance topics to research and have pace with CSS are vertical rhythm for spacings, modular scaling for typography, and the Cicada Principle, etc. Do you have some links? Because the first DDG result for all those concepts together is your comment on this page.
I did some quick search, and found few ones. You can search for similar ones -- these are beaten topics and have been discussed, blogged, done in length.
- More Meaningful Typography from List Apart, https://alistapart.com/article/more-meaningful-typography/
- Responsive typography with Modular Scale: Create meaningful proportions in your design using SASS, https://www.bugsnag.com/blog/responsive-typography-with-modu...
- How to Establish a Modular Typographic Scale, https://webdesign.tutsplus.com/articles/how-to-establish-a-m...
- https://www.modularscale.com is a tool to define your scale
- The Cicada Principle, revisited with CSS variables from an industry Design + Engineering guru/goddess, https://lea.verou.me/2020/07/the-cicada-principle-revisited-...
- https://utopia.fyi/blog have some good articles, more modern and relevant to the new CSS such as Clamps.
I had fun with Cicada - beautiful background patterns, which you yourself cannot predict. I was looking for my presentation on "Design with Mathematics, and Patterns" (or something in that line) but I think I may have lost it like many other open source files from before Github.
Re: My First CSS
#49Earlier quoted context omitted.
I want to see it, I'm just curious.
I was curious too. Probably https://careers.jpmorgan.com based on his LinkedIn and the fact that he said "Careers Page redesign for one of the biggest banks in the world."
But that's just a basic page with some stock photos...
Re: My First CSS
#50Earlier quoted context omitted.
I want to see it, I'm just curious.
On his personal about page: https://cv.brajeshwar.com/ you can see it was jpmorgon for https://careers.jpmorgan.com/ If you do check that page and some more pages you’ll note there are (on latest iphone) serious design issues. Ironic that its a career page since they definitely need some work done on that web design. Usually you can ignore “minor” issues but when its a bank such as jomorgan, a “leading” digital compa…
True, very true. You should have been there with the limitations we had with an arcane CMS they inherited. Every front-end code was not even allowed to interact directly with the back-end. We wrote routines for it to be sucked in, chewed up and spit out. What you see is the final by-product of that gimmickry. I'd still say, really good work by the team with such restraints and limitations -- no real data, all mocks. And yes, I had 45 days to execute and walk out.