search

thoughtbot / neat

A fluid and flexible grid Sass framework
https://neat.bourbon.io/
MIT License
4.42k stars 429 forks source link

[Announcement] An Update on Neat v2.0 #485

Closed whmii closed 7 years ago

whmii commented 8 years ago

We’re working hard on the next major version of Neat (v2.0) and we’d like to update you with our goals and progress. You can also follow along on with the neat-v2.0 branch.

Neat v2.0 will feature a different system then that of Neat v1.X. Here are a few of the major differences:

Neat 2.0 uses the css calc() property as its core. For those interested you can check out calc()'s can-I-use page. The basic principal is that you use calc() to determine exactly how wide a grid object should be, and then use this calculation to predict and accommodate for the object’s gutter and the gutter of its siblings. The idea that instead of a column using its margin-right to push the next column away, these columns use margin-right to push themselves away from the row or their preceding children.

This functionality has a number of benefits over the original percentage based system:

Along with that, we are porting our documentation over to SassDoc, so that it’s more comprehensive, consistent and easier to contribute to. As of writing, the updated documentation site is not live but will be launched with the beta soon, and a link will be posted to this thread. We’re also writing more comprehensive feature tests for Neat, so that we can make sure the code is always stable and behaving as intended.

We hope everyone is as excited for the future of Neat as we are! 🎉

– The Neat Team

whmii commented 8 years ago

I have put together a list of core features that we are waiting for before an alpha is released. As soon as these have been completed, we will cut an alpha release. It is worth noting that this alpha may go through breaking changes before the full release.

Alpha Release

There are a few features that we would like to include but are explicitly not going to be part of the initial launch. I wanted to go ahead and make mention of them now.

mpavel commented 8 years ago

Will Neat v2.0 support mobile first?

I've just started using it because I'm looking for a small library that just handles grids and I love the way Bourbon, Neat, and the rest can be added to a project to just resolve certain (independent) things.

However, when using Neat (v1.7) I've found it weird not to be able to do mobile first because of how @include media($mobile|$tablet|$desktop) works. Obviously there are ways around it, but I still think default styles should work for mobile, and then breakpoints set for larger screens to customise grid would be great.

mpavel commented 8 years ago

Saying this however, I'm thinking it would be very difficult to avoid overwriting SCSS rules with mobile first approach. Especially because the grid setup can be different for each breakpoint (we can have 4 columns, or 9, or 12 in the new-breakpoint() mixin).

At the moment I'm using 3 breakpoints like this:

$mobile-breakpoint: 530px;
$tablet-breakpoint: 900px;
$desktop-breakpoint: 1024px;
$mobile: new-breakpoint(max-width $mobile-breakpoint 4);
$tablet: new-breakpoint(min-width $mobile-breakpoint + 1 max-width $desktop-breakpoint 12);
$desktop: new-breakpoint(min-width $desktop-breakpoint+1 12);

And in my styles, I do my "structural" (grid) setup like this:

    @include media($mobile) {
      @include span-columns(4); // 4 of 4
      margin-top: $space/2;
    }
    @include media($tablet) {
      @include span-columns(6); // 6 of 12, or it can be 4 of 8 or whatever we define in the $tablet breakpoint
      margin-top: $space/2;
    }
    @include media($desktop) {
      @include span-columns(6); // 6 of 12
    }

As you can see above though, the margin-top declaration is used in both $mobile and $desktop. But even with "true" mobile first, we would declare margin-top initially, then have to reset it for $desktop so pretty much the same thing in the end.

whmii commented 8 years ago

@mpavel 🤔 Mobile first is the primary use case for Neat 2.0. Check out https://github.com/thoughtbot/neat.bourbon.io/blob/master/source/assets/stylesheets/patterns/_column.scss which has an example of what this would look like in practice. You can also find the associated grid variables at https://github.com/thoughtbot/neat.bourbon.io/blob/master/source/assets/stylesheets/library/_variables.scss#L36

Hopefully this helps!

nickngqs commented 8 years ago

Just curious, is it safe to assume since Neat 2.0 is still in alpha stage, it isn't really safe for production work? Would really love to use Neat on my new project :)

whmii commented 8 years ago

@nickngqs yes, we are pretty close but I wouldn't recommend it quite yet, unless you are willing to accommodate changes that may break in the future. However, once we get:

  1. Decisions around https://github.com/thoughtbot/neat/pull/492 finalized
  2. Test coverage for the media() mixin

…we'll likely release the beta. If you know you have a little lead time and you're going to be working on this new project for a while, it may be worth trying it out. Only if you are feeling particularly brave though.

whmii commented 8 years ago

Neat 2.0.0 Beta has now been released https://github.com/thoughtbot/neat/releases/tag/v2.0.0.beta.1

nickngqs commented 8 years ago

NICE! Is there any documentation on how using Neat 2.0?

whmii commented 8 years ago

@nickngqs I have updated the documentation for Neat to 1.8.0. I also added the beta docs at [http://thoughtbot.github.io/neat-docs/2-0-0-beta-1]. We'll do some fancy re~designy stuff for the full release/when Bourbon 5 comes out but until then at least there's somewhere online you can see them.

Just be sure if you have any issues to create a new issue and not post to this one. We are looking to get as much feedback on the beta as possible so thank you for everyone who's willing to give it a shot. I give you internet points 😄.

cjaoude commented 7 years ago

2.0 feature request...

Allows someone the ability to import a Bootstrap site without breaking the grid (maybe also forms). Then they can convert off it much more easily.

kgcreative commented 7 years ago

@cjaoude Oh god no. One of the things I love about neat is killing the over-reliance on presentational markup.

If I never have to write:

<div class="container-wrapper">
  <div class="container">
    <div class="row">
       <div class="col-xs-12">
         <p>Just to emit a damn paragraph
         ...
      ...
  ...
...

I will be a happy man.

With that said, here you go: https://gist.github.com/johnkoht/6405117

mpavel commented 7 years ago

@kgcreative I think what @cjaoude means is: if we can map NEAT functionality for Bootstrap markup, it means we can replace the bootstrap library with neat. This shouldn't be so hard actually and I guess can be done manually pretty easily anyway ...

I also dislike that kind of markup and you can actually use Bootstrap without!

cjaoude commented 7 years ago

Yes. By having a drop in replacement for the Bootstrap grid classes, it means the developer can ditch the Bootstrap files from the project without wrecking the site. Then he can take the time to replace it while using Neat for everything new.

As long as the developer has the Bootstrap files in the project, bad habits will prevail.

kgcreative commented 7 years ago

@mpavel, @cjaoude -- While I don't disagree with that assessment, I don't think that's something that belongs as an official neat feature. It wouldn't be hard to write a set of mixins to do that for you. I've done it.

mpavel commented 7 years ago

@cjaoude This is going completely off topic (in regards to the NEAT announcement), but ... I don't understand why you're saying "As long as the developer has the Bootstrap files in the project, bad habits will prevail."

From the moment you include the file you mentioned (mapping bootstrap classes to NEAT), developers using an IDE will see CSS class suggestions such as ".col-xs-6" and are free to use them in HTML markup (especially if you keep the old markup and the developer wants to maintain the "code style" that's used in the project).

I think a lot of people use those bootstrap classes directly in the markup because they don't use a CSS preprocessor such as LESS, and the framework gets bad mouthed for no good reason. Take a look at the following: https://www.ostraining.com/blog/coding/bootstrap-right-way/ - it shows a short example on how to use semantic markup with Bootstrap.

In any case, looking forward to NEAT v2! (But wanted to share some of my experience with using Bootstrap since I'm anyway involved in the topic 😄 )

cjaoude commented 7 years ago

It was just a suggestion. ;)

kristianserrano commented 7 years ago

My opinion is that this suggestion goes against the mission and values of Neat. As stated on neat.bourbon.io [emphasis mine]:

Why another grid framework?

Because we are not happy with other frameworks. We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div's.

It also aims to stay as lightweight as possible; just enough to handle the most common grid uses in modern Web design.

As soon as Neat starts dumping in predefined classes, it's bloated the size of the CSS and destroyed what makes it so valuable.

That said, it wouldn't be hard for anyone to fork the repo and write their own classes to match Bootstrap.

Also, nowhere in this discussion did anyone mention which version of Bootstrap, which creates a whole lot more complexity and bloat.

MikeHarrison commented 7 years ago

Really looking forward to Neat 2.0 - Neat and Bourbon are core parts of my workflow, excited to see some of the improvements

whmii commented 7 years ago

A brief update!

Hi there 👋 . Neat 2.0 is (for all intents and purposes) ready to go. We have released v2.0.0.beta.2 which is likely to be the final pre-release before the full release of Neat 2.0. We are going to be refining the documentation so please post any issues you encounter including docs and the Readme. I also posted a thread on my work for the documentation so comments/changes specific to that can be posted at https://github.com/thoughtbot/neat/issues/488

Upon the full release of v2.0.0, the current site at neat.bourbon.io will be replaced with the updated site that you can preview at neat.netlify.com, the code for which is located here. The current site and corresponding gh-pages branch will then be deprecated.

Beta 2 has added:

Although the release is basically ready to go, as of writing it is December 20th and the holidays are fast approaching. We have decided to wait and push the final update until after the beginning of January. This way we can avoid ruining anyone's day because they forgot to specify a gem version and then have to spend time away from their loved ones because a auto-deploy broke. 😄

It has been a lot of fun putting this all together and we are excited to see it out in the wild. Thank you all for your comments and feedback. We hope ya'll have a great end of the year and see you on the other side! 🎆 🎉

ianhobbs commented 7 years ago

sounds great ... looking forward to working with Neat 2.0

MikeHarrison commented 7 years ago

Been working on 2.0 on my latest build and it's great - fantastic work! Looking forward to seeing the final release, though it seems pretty well cooked already 🍰

whmii commented 7 years ago

hey… pssst… guess what…

https://github.com/thoughtbot/neat/releases/tag/v2.0.0

whmii commented 7 years ago

@cjaoude I created an extension that will allow you to generate grid classes 🎉.

Check it out at https://github.com/whmii/neat-class-generator

shennan commented 7 years ago

Are there any guides as to how to move smoothly from Neat 1.X to 2.X? I've attempted to migrate a site (swapping out the mixin names and arguments) which has left some visual errors. Just wondering if there is a good blog post on some of the common pitfalls of migrating?

buck3000 commented 7 years ago

+1 @shennan - I'm going to embarking on this journey soon with one of my projects and would be happy to document it as I go, but I'd also like to see someone else with a similar exp. Huge fan of Neat.