What everyone using now that this is dead?

[forcergists]

What everyone using now that this is dead?

[ghost]

Salsa http://tsi.github.io/Salsa/

[Jogai]

See here: #86
Although I cant find one as simple as this one, or that explains it so simple.

[oliverbenns]

This is looking pretty neat: https://github.com/mojotech/jeet

[ionas]

@oliverbenns not really, too many non-semantic div soup and tons of classes everywhere.

IMHO there IS but then only is ONE VERY GOOD reason to move away from Bootstrap/Foundation: It is basically tables in disguise and pollute and slow everything down. Else why not stay with works and is well supported if you don't gain any real benefit from it.

[TheYves]

I use Bootstrap now. I think it's more flexible than semantic.gs and it's semantic aswell if you use it with LESS instead of the compiled CSS file.

[htstudios]

So gow does your markup look like?

[htstudios]

I could be convinced to use BS easily if there was no mess of divs and BS classes in the markup...

[scottstanfield]

I'm going to spend a few hours now to research all this. If I find anything interesting, will report back.

[ghost]

I moved on from Salsa to Jeet and am now looking extensively at https://github.com/ezekg/flint

[scottstanfield]

Thanks @dropseed. I'm adding that to my list to review. Like many here, we were probably attracted to this project for two reasons:

1. A Grid system that doesn't pollute the HTML. It hides the decisions in CSS, which is where I believe they belong. And by Grid with a capital G, I mean the classic, typographical style system advocated by Josef Müller-Brockmann and Jan Tschichold last century. See http://www.thegridsystem.org/.
2. LESS or Stylus syntax. For the crowd that just doesn't like Sass (myself included), these alternate languages are preferred. I'm a little concerned about Stylus since it's progenitor TJ Hollowaychuk has moved on to the Go language, it looks like Panya is continuing the core development. https://github.com/Panya

I've collected the alternative links mentioned in this issue and others. So far I have:

http://tsi.github.io/Salsa/
https://github.com/mojotech/jeet
http://www.profoundgrid.com/
http://laughingwithu.github.io/flawless-semantics-grid/
https://github.com/artofrawr/profoundgrid/
http://framelessgrid.com/
https://github.com/ezekg/flint

Checking them out shortly. We should really have this as part of HTML and CSS.

[ionas]

Hello,

there are multiple reasons for me:

1. I want /just/ a GRID. I am fine with a frontend framework offering component build-up but I just don't want to eat the whole package. Neither in terms of dependencies nor in terms of size, requests and speed. I'd like to have like zero components pre-selected and then add them on a requirement basis if the framework has multiple features.
2. I want a GRID that is fully semantic. For instance this little demo I made up from the basis of semantic.gs works only with 2 Divs and zero css classes (and zero relevant DOM IDs): http://ht-studios.de/devedge/semantic.gs/examples/responsive/responsive_new.html
   The reasons for a fully semantic grid are a.) SEO and b.) maintainability and c.) speed/size
3. It should be based around LESS because a.) there is LESS.js and b.) there are ton's of options for SASS like http://demo.titon.io/ - foundation etc. LESS.js enables rapid local development of screen-designs without a LESS pre-processor or a GIT workflow (and asset compile on development box). This helps non-technical designer peeps.
4. It must be mobile first - the demo I put up there at point 2. is.

I am considering bootstrap and makeRow() makeColumn() etc. next. There are three issues on my side with bootstrap though:

• Lazy screen designers who simply re-use components despite stuff being front end. If there is simply no bootstrap, this is no option. With bootstrap they will still supply html div-soup on a as-usual basis.
• After applying default twitter bootstrap, for frontend design you will still want to re-write some of the component's looks - I am not sure that bootstrap is the best basis for this.
• I am not sure how well I can separate bootstrap's components to only include for instance its grid layout (and maybe some little thing here and there)

[ionas]

Hello again,

http://tsi.github.io/Salsa/ actually looks very good, despite its SASS dependency
If I can find some time I will redo the starting page demo instead of with div e1 etc with semantic tags to see if it requires a lot of wrappers for rows or not by just utilizing the CSS generated.

I ll take a look at what you found thank you @scottstanfield

[scottstanfield]

Thanks for all your notes. Glad to hear I'm not the only one still interested in this. I'll put Salsa back to the top of my list, but I'll have to learn SASS first! Thanks @ionas

[ghost]

This should probably be mentioned too - https://github.com/RadLikeWhoa/SSGS

So freaking simple. If that's what you want.

[ionas]

It has to have nested grids and be easy to use in a semantic way, at least for me.

[kimslawson]

@scottstanfield et al., any updates or synthesis of earlier comments? I came here from the Responsable framework as it offered both a horizontal grid (based on semantic.gs) and furthermore provides a vertical baseline grid (also very nice to have). I'd like a LESS/SCSS-agnostic tool (I'm leaning toward SCSS myself but I don't think it should be a deal-breaker either way). Has anyone got the One True Grid (for 2015 ;-) combined with a baseline grid that they like as well?

[scottstanfield]

I started a list to look into, but it quickly gets overwhelming.

I made some progress with http://jeet.gs but I'm not so sure it's the right way to go.

http://roots.cx/
http://tsi.github.io/Salsa/
https://github.com/mojotech/jeet
http://www.profoundgrid.com/
http://laughingwithu.github.io/flawless-semantics-grid/
https://github.com/artofrawr/profoundgrid/
http://framelessgrid.com/
https://github.com/ezekg/flint
https://github.com/RadLikeWhoa/SSGS
http://xycss.com/features/vertical-grid/
http://thesquaregrid.com/#
https://github.com/philipwalton/solved-by-flexbox
jeet.gs
http://www.fluiditycss.com/
https://github.com/aekaplan/grid

I feel like Best kit should have:

• vertical typographic rhythm
• debugging tools
• rem based
• min-width media queries with 3-4 breakpoints
• respects good measure length

Too many choices.

[scottstanfield]

One True Grid would be a good name for the 2015 winner.

[htstudios]

A quick search did not find me One True Grid. Care to link it?

Could you elaborate what you mean by '
respects good measure length'

[Jogai]

Here is a nice one: http://webdesign.tutsplus.com/tutorials/a-simple-mixin-alternative-to-standard-css-grids--webdesign-16958

I think it meets the wishes of @scottstanfield & @ionas

To cherry pick their points:

• A Grid system that doesn't pollute the HTML. It hides the decisions in CSS, which is where I believe they belong.
• Less syntax
• /just/ a GRID
• GRID that is fully semantic.
• based around LESS

[ionas]

We are now using Bootstrap with .make-%%-column(%); and .make-row();.
We are extracting just the parts of bootstrap required for my use case. E.g.
We don't use anything else from bootstrap as of now.

• Drawback: Almost no documentation on this. It is more or less read the source and try to understand etc.
• Benefit: Fully tested bootstrap 3 grid behavior e.g. tested across multiple platforms in terms of compatibility
• Benefit: RAD via LESS.js
• Benefit: Nested grids work as well (as they do with semantic.gs)
  Basically what misses is only a good documentation and you'd basically have your semantic less based "grid only fork" of bootstrap.

Some hints / directions:

• http://getbootstrap.com/css/#example-usage
• https://www.ostraining.com/blog/coding/bootstrap-right-way/
• http://stackoverflow.com/questions/18854927/using-mixins-in-bootstrap-3-to-avoid-unsemantic-markup-for-layout-structure
• https://themeavenue.net/making-bootstrap-3-semantic/
• http://stackoverflow.com/questions/17307137/twitters-bootstrap-3-x-semantic-mobile-grid
• http://stackoverflow.com/questions/18854927/using-mixins-in-bootstrap-3-to-avoid-unsemantic-markup-for-layout-structure

[ionas]

@Jogai http://webdesign.tutsplus.com/tutorials/a-simple-mixin-alternative-to-standard-css-grids--webdesign-16958 also looks quite promising as well!

[kimslawson]

Gridle — https://github.com/olivierbossel/gridle — looks promising and is semantic when using mixins.

[Jogai]

https://github.com/weepower/wee uses mixins a lot, see their grids:
https://www.weepower.com/style/mixins#grid

Another one: https://github.com/flexiblegs/flexiblegs-scss-plus