DEV Community

Giuseppe
Giuseppe

Posted on

Help me with frontend frameworks

Hi, I have read some posts on the site where frontend frameworks like Foundation or Tailwindcss were recommended. I tried to install Foundation, with poor results. Why does everyone need npm? The reason is not clear to me, can someone explain it to me? :)

Could you recommend something like Bootstrap which does not require installations?

I had tried with pure CSS but I can't make nice sites :(

PS: I use Django as backend

Top comments (8)

Collapse
 
snickdx profile image
Nicholas Mendez

Hi, I'd describe foundation/Tailwind/Bootstrap as CSS libraries that provide styled-components for your project. The term "Frontend Framework" is more used to describe projects like Angular, Next.js, Vue etc that provide state management and templating among other things for building Single Page Apps.

Node Package Manager (NPM) handles the installation of dependencies for web projects (and the dependencies of those dependencies). These dependencies need be installed in a node_modules folder to CLI tools like angular/cli can run (very much like pip packages).

That being said, if you are looking for another CSS library I like to use (materializecss)[materializecss.com/].

Collapse
 
ziggo profile image
Giuseppe

Thanks Nicholas, so we can say that a frontend (e.g. VUE) performs operations with JavaScript on data, like a template language (e.g. Jinja2 on django)?
But with Jinja2 the user receives the page already formatted, instead VUE performs the operations via JS in the browser? Forgive me but I really have so much confusion about it :)

Collapse
 
snickdx profile image
Nicholas Mendez

Correct! They give client side templating syntax.

Collapse
 
boiledsteak profile image
boiledsteak • Edited

It sounds like you're confused with the full stack. I recommend you learn static HTML + CSS, then learn how to have simple JS onclick functions, then try Flask with regular HTML + CSS, then try AJAX. Lol then you can try switch to NodeJS and tackle a full MERN stack. Yes this is far more arduous than bootstrap, but this is how I started webdev, and it gave me a better understanding of each component. HMU if you need help :)

Collapse
 
ziggo profile image
Giuseppe

Yeah, you're right, i'm really confused ahahah Actually i don't want to change my stack, i'm looking for a way to improve the look of simple sites. For example, I'd like to create a layout and graphics similar to those of medal.tv (maybe it's made with Grommet). I tried to create elements with CSS that could be nice, but they are always ugly, for that something like bootstrap would be ideal :)

Collapse
 
clarky profile image
Nick Clarkson

You need NPM to install and use programs, in this instance tools, to help you develop. The irony being these things sent to help, particularly when you're just starting out, make things really confusing.

Why can't you make nice sites with CSS? what are you trying to make? Starting with the base tech ( HTML, CSS and Javascript ) is way more simple and those skills are ones you will never forget.

Collapse
 
dillonheadley profile image
Dillon Headley

You could try a can link if you just want to try out the framework. See here for tailwind tailwindcss.com/docs/installation#...

But you will want to eventually learn how to use npm to include only the styles you are actually using. Tailwind is huge if you are including it all.

Also just a heads up - Frameworks are not a replacement for learning plain css. In fact the more you understand css the better you will be able to use these frameworks and understand how they do what they do. There is nothing that a css framework does that you can’t do yourself. They do give you a good foundation of nice looking styles as long as you stick pretty close to what they provide and don’t go out of the box too much.

Collapse
 
ziggo profile image
Giuseppe

Thanks, I love you! To start, that's just fine!