Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

My First CSS

engineering.kablamo.com.au

Post reply on HN
Print view View original

101–107 of 107 posts

Re: My First CSS

#101

Post by city41 »

steve_adams_86 wrote: post #100
city41 wrote: post #86

Earlier quoted context omitted.

I've also found atomic css, such as Tailwind, largely eliminates this problem. Yeah, a controversial opinion, but regardless of how you feel about utility classes, they do avoid this problem.

I used to be a bit of a CSS purist and I thought things like tailwind created a mess where some thoughtful and strategic thinking could prevent it. In reality, preventing the mess costs a lot of time and energy. I'd rather have ugly markup and get things done than have nice CSS. Our users don't give a single shit how nice our CSS is. I'm on a team of 4 competent people who touch front end code, and despite our experi…

I felt similarly before Tailwind. I now put it pretty close to TypeScript on things I don't want to work without.

I think Adam's quote on the front page of tailwindcss.com is spot on "...but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you'll wonder how you ever worked with CSS any other way"

Re: My First CSS

#102

Post by anyfactor »

icedchai wrote: post #85
anyfactor wrote: post #69

> Everything is a rectangle. I remember a time when everything was a table.

Me too. And for a good 10+ years after CSS became popular, it was still simpler to lay things out in tables.

When I was just starting out with CSS I used literally use excel to draw up my design.

Re: My First CSS

#103

Post by michaelcampbell »

KronisLV wrote: post #37
dmz73 wrote: post #30

Earlier quoted context omitted.

I think there is a very easy fix to most HTML/CSS problems when building GUI on the web - use HTML5 canvas. HTML is not a good match for GUI and CSS is not a good match for...anything. HTML5 canvas brings you to where Windows/X was 25 years ago so instead of trying to build GUI using TUI, just use the damn GUI already. Sure, the whole lot of tooling is missing but some copy/paste/fix from either Windows or X should p…

That's not really a fix, though. Flutter is trying to use this approach and if you go to their demo sites you will notice things feeling slightly off: https://gallery.flutter.dev Some of the notable drawbacks: - you can no longer select text on the page, anywhere - right click doesn't work like you'd expect it to, either, since you're looking at a canvas - currently the download sizes are absurdly large, since you ne…

> - you can no longer select text on the page, anywhere

That's a deal breaker for me.

Re: My First CSS

#104

Post by lelanthran »

Brajeshwar wrote: post #48
lelanthran wrote: post #36

Earlier quoted context omitted.

> 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…

That was very helpful, thank you!

Re: My First CSS

#105

Post by andrei_says_ »

brundolf wrote: post #5

These 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…

I really like the ITCSS approach - you define your rules the way you’d create a sculpture out of granite. Start by taking a granite block out of the quarry / define the most common rules with widest coverage, then gradually carve the largest details / more specialized rules and then focus on the details.

This way you work with the cascade, as CSS was designed.

Defining sensible defaults and then having a few utility classes for layout helps with this. You could follow it BEM for the rest.

This structure results in minimal CSS that doesn’t fight itself.

Re: My First CSS

#106

Post by e12e »

> To apply border-box to all elements on the page, make sure you have something like this snippet in your stylesheet (a lot of CSS resets will include this anyway)

They will? I didn't realize that.

Re: My First CSS

#107

Post by Brajeshwar »

panta82 wrote: post #49
nikhila01 wrote: post #42

Earlier quoted context omitted.

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...

Remember, Google was just a simple INPUT field with a Button to search the web. ;-)
Post reply on HN