Choosing a lightweight CSS framework that plays well with Phoenix?

I’m building a simple Phoenix app (web 1.0), and I’m at the point where I need to make it look slightly more pretty than just naked HTML. However, I haven’t done any front end stuff in a decade, so I don’t know which CSS frameworks are recommended, and especially which ones integrate nicely with Phoenix.

My needs are few: easy to make it responsive, and simple/dumb for the dev (me) to use. I’m sure there are several good options, but I would like to choose one which will be easy to integrate with “the Phoenix way”.

Suggestions?

3 Likes

I prefer Foundation over Bootstrap.

You might also want to look at the http://bourbon.io family :slight_smile:

Also see:

2 Likes

I advise you to look at semantic-ui because it flollows the principle of least surprise, has a very low learning curve, and takes care of many of the often-encountered things in a web application, without soiling the main CSS namespace.

I’ve used tachyons once and quite liked it.

Also, writing “pure” (without a framework) CSS with tools like postcss, rucksack, and lost grid is not as bad as it used to be.

3 Likes

+1 for http://bourbon.io. There is a free course that looks very interesting: https://thoughtbot.com/upcase/bourbon-smash

1 Like

I’d say go with Bootstrap. It’s been around a long time and it’s very widely used. Which means you can find a lot of help for what you’re going to do. As you said you’re not quite up to date with the front end skills, I’d definitely recommend the stable and most used framework. Don’t fall in the trap of choosing the latest and greatest because you’ll likely find yourself on your own when it comes to figuring out solutions to your particular problem. Also, as I think you know, the css framework has nothing to do with the backend i.e. Phoenix. So don’t expect this community to be your go to source for help with your css problems. To sum up, I think Bootstrap 4 will be perfectly fine.
Good luck!

1 Like

We use http://milligram.io/. A very minimalistic css framework.

2 Likes

Bulma , use a flexbox polyfill if you need to support older browsers.
Kube and blaze is also worth loooking into.

1 Like

I wonder how many repliers in this thread recommend one CSS framework over all others, without ever having tried any of the others.

1 Like

Good question.

That’s one of the difficulties with any technical work these days - everything moves fast, people have power to create/improve tooling, and projects get bigger and bigger (and thus take longer and require more people with specialization).

One result is that few people can be deeply knowledgeable about many things. But that’s ok, because honestly there are often many effective paths to a desired outcome.

I highly appreciate the responses here. Bootstrap or Foundation are obvious choices. Hand-crafting is an option (and what we all used to do if we’ve done it 10 years ago). And there are many options in between.

That said, I went from ActiveServerPages to JavaServerPages to Rails and now to Phoenix. Likewise, I see front-end options improving. And I figure that anyone who jumped on the Elixir train has the kind of thinking (and dissatisfaction with anything less than perfect :wink: ) that probably makes them a good resource for recommendations about many things!

And thanks to everyone for the replies. I’m looking at some of them now.

4 Likes

I really like Milligram which was mentioned before, and both Bootstrap and Foundation are nice if you need a lot of prebuilt components. If you plan to use React or Vue, I’d either stick with something minimal like Milligram or use a css library specific to you front-end framework of choice.

However, I would strongly caution against using Bourbon. The folks at thoughtbot are great, but bourbon is super crufty and I personally think the grid system is bad. I’ve never use it without having problems restyling buttons, and in general it looks dated. They’ve been working 5.0 for about forever, but I haven’t seen a demo.

2 Likes

I would reccomend materializecss been really happy with it.

1 Like

I ended up altering the Surface CSS to flesh it out, so now I have a very thin Material style css that does an amazing amount all without a drop of javascript yet still has the material animations, features, tabs, etc… etc… I’ve been looking for one like it for a long time but never found one (almost all are amazingly javascript heavy) so I just made my own was all. ^.^

For note, I don’t understand the “plays well with Phoenix” part of the question. CSS is front-end, Phoenix is server, they are in entirely different domains and you could use any css thing with phoenix at all…

Maybe @michael_teter mean brunch when he talk Phoenix.

Have u seen tachyons? planning to use it on my next project.

1 Like

By “plays well”, I mean a number of things (which are important to a beginner). But to put it in simple terms, it would be nice if I could just drop a few files into the right places in an existing Phoenix project dir structure and then start referencing CSS classes in my templates.

Because I’m new to Phoenix and Elixir, if I try to mesh another complex system (a css framework) with my project, and there’s a problem, I don’t necessarily know where to start to solve that problem.

This will improve with experience of course, but in the beginning it’s a real drag to spend extra time reading Github comments related to why MaterialCSS isn’t correctly including picker.js (after two years of being a problem), for example… and how to fix that.

Merging frameworks can be hard, especially the bigger and more rigid they are. Phoenix framework has priority, so my CSS framework needs to be easy to integrate and still provide the basics - responsiveness, grids/tiles/column, etc.

I’ll probably end up looking at all the frameworks suggested here (and I appreciate all the suggestions). Unfortunately, I’ll do that not because I’m curious what each one does, but rather because I’ll run into some stumbling block with many of them that I judge will cost me more time than I can afford trying to fix (hack/bend).

1 Like

I recently looked through the options I could find for a simple, lightweight framework. I’ve used Foundation in the past. My preference is now for something that doesn’t use any pre-processors with the exception of PostCSS as that’s what I’m aiming to use. The one I ended up picking out to try on the next suitable project is http://turretcss.com/.

Its CSS-only element styles are pretty nice. Based on your description of the requirements I reckon it might be worth considering. It doesn’t supply a grid, however, which I like as layout can be very unique and I often don’t like the methods frontend frameworks use. I lean towards Flexbox where possible at the moment, and will be trying out CSS Grid soon for a project in which browser support allows.

Getting back to Turret, you can comment out any modules that you don’t need, avoiding unnecessary CSS. Here’s how styles, such as colour, are overridden.

I’m also relatively new to Elixir and Phoenix and I haven’t yet implemented frontend styles, so I may give doing so with Turret a go soon.

1 Like

Continuing a little bit on this thread. I am looking for a CSS framework with higher abstraction. It seems like most of the ones suggested basically makes you write code you shouldn’t have to.

For example, instead of a simple:

<form class="horizontal">
...
<label for="name">Name</label>
<input id="name" type="text" placeholder="Name">
...
</form>

I am forced into writing:

<form class="form">
...
<div class="field is-horizontal">
  <div class="field-label">
     <label class="label">Name</label>
  </div>
  <div class="field-body">
     <div class="field">
        <div class="control">
           <input class="input" type="text" placeholder="First Name">
        </div>
      </div>
    </div>
 </div>
...
</form>

or similar junk. There is just too much code there which doesn’t add anything of value to the code. Maintaining this is a nightmare.

bootstrap, foundation and bulma and others all seems to be layed out like this so I take it it must be best practice for something. However this feels like writing java or other language with heap of boilerplate which obfuscates the business logic.

I am looking for something where I can just apply a few classes on a top level container to control the behaviour of the child elements. Or am I just wrong here and this is a necessity in today’s world?

3 Likes

Check out Spectre CSS

This is used in Noa OAuth2 Playground

If you can drop IE11 support, you can quite easily write layouts yourself using CSS Grid layout. It allows you to drop most wrappers resulting in cleaner HTML.

The forms on my site now look something like this:

<form ...>
  <label>Username</label>
  <input type="text" ...>

  <label>Password</label>
  <div class="input">
    <input type="password" ...>
    <p>If you have forgotten your password, ...</p>
  </div>

  <p class="description">Some text blah blah blah.</p>

  <div class="submit">
    <button type="submit">Submit</button>
  </div>
</form>

I have set it to align the form linearly (top to bottom) on small screens and horizontally (labels on left, inputs on right) on bigger screens. The p.description will span the whole width of the form from left to right. As you can see there are only wrappers for when you have something under the input field that needs to be aligned to the right and for the submit button as there might be multiple buttons. There’s some manual work involved but I didn’t find it too intensive.

Here’s my SCSS to do that, it could be cleaned up a bit though: https://github.com/code-stats/code-stats/blob/grid-refactor/web/static/frontend/css/forms.scss#L22-L68

@media #{$sm} is just generating a media query for the small screen breakpoint so the code there is active on screens bigger than the sm breakpoint.

Here’s a couple of screenshots to top it off (it’s not that nice since I’m not a UI designer, but you get the idea!):

I know this is not for everyone and CSS frameworks do a lot of other stuff than forms and layouting too. But I find the biggest thing for me has always been the layouting, which I can now do easily with CSS Grid. It feels like a breath of fresh air after years of Bootstrap and wrappers upon wrappers.

3 Likes