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

Tough time building components of a site using vanilla CSS. What to do?

news.ycombinator.com

Post reply on HN
Print view View original

21–26 of 26 posts

Re: Tough time building components of a site using vanilla CSS. What to do?

#21

Post by mamcx »

I highly recommend to use https://tailwindcss.com/, because it has a very small abstraction layer so is easier to understand. And it means you work only need a single .html file with everything you want so near zero context-switch.

You can see is doable looking at https://duckduckgo.com/?q=tailwindcss+timeline, but the real question is how to learn it.

Apart of the other comments, a good suggestion about this:

- Your MAIN goal is to build structure/layout first, then later visual flairs

This is the most key thing.

- Start from the inside and go outward.

So, if you are doing a form field, you start with the input, put the details (like an icon at the left), then the label, then layout both (putting the label on top for example), etc.

- Make your html editor format the HTML, and try to build a good hierarchy structure

So for example:

    
      
        01
      
      
        03
You wanna see at the code and have 100% clear what is the order of things. Also make spaces that separate components, so is easier to see when something end/start.

--

I will put my major focus in the things that in https://tailwindcss.com/docs are on "Layout", "Flexbox & Grid".

DO THE EXAMPLES YOURSELF, not just "read the tutorial", do it with your own hand and see how things change and flow. When you get how do layout the rest is far easier.

Re: Tough time building components of a site using vanilla CSS. What to do?

#22

Post by dcuthbertson »

The first thing I thought of was the old simile widgets[0]. There is still a timeline demo online[1]. I think they're fascinating, but they are a bit of a challenge (for me at least) to understand how they work - I don't know JavaScript very well and that's what makes them work. Still, they're cool. Note that the timeline demo doesn't work over https, only over an http link. Good luck.

[0]: https://github.com/simile-widgets [1]: http://www.simile-widgets.org/timeline/

Re: Tough time building components of a site using vanilla CSS. What to do?

#24

Post by sourcecodeplz »

mamcx wrote: post #21

I highly recommend to use https://tailwindcss.com/ , because it has a very small abstraction layer so is easier to understand. And it means you work only need a single .html file with everything you want so near zero context-switch. You can see is doable looking at https://duckduckgo.com/?q=tailwindcss+timeline , but the real question is how to learn it. Apart of the other comments, a good suggestion about this: - Yo…

Would have thought starting with vanilla anything is the way to learn new languages before working with frameworks.

What you gonna do when the framework can't do what is needed?

Re: Tough time building components of a site using vanilla CSS. What to do?

#25

Post by mamcx »

sourcecodeplz wrote: post #24
mamcx wrote: post #21

I highly recommend to use https://tailwindcss.com/ , because it has a very small abstraction layer so is easier to understand. And it means you work only need a single .html file with everything you want so near zero context-switch. You can see is doable looking at https://duckduckgo.com/?q=tailwindcss+timeline , but the real question is how to learn it. Apart of the other comments, a good suggestion about this: - Yo…

Would have thought starting with vanilla anything is the way to learn new languages before working with frameworks. What you gonna do when the framework can't do what is needed?

Sure, but in the case of tailwind is so a tiny of a layer on top that is not bad to use it.

Checking the web inspector tell you what is doing and rarely is surprising.

Re: Tough time building components of a site using vanilla CSS. What to do?

#26

Post by tekstar »

shivajikobardan wrote: post #23
tekstar wrote: post #4

I took a few courses from Lynda.com to learn more css. It helped immensely and was free with my library card.

what was the course name?

hey just saw this, sorry - I think I watched the most recent full course for CSS and then the 2 or 3 hour course on flexbox. As well I watched the start of a few courses on website design.
Post reply on HN