Boneless v2 - Ideas and Thoughts

[benhinchley]

So as v1 of Boneless was more or less a 'just ship it' kinda release, I have put together my thoughts for v2 (which really should probably be v1 but meh) I would love some feedback on it as well as any other thoughts you guys might have.

---

Version two of Boneless is a complete rewrite of the entire framework/toolkit (idk what to call it) and is focusing on flexibility and sanity.

Features

My current thoughts feature wise for v2 are as follows:

• Mobile first
  • While I don't 100% believe in the mobile first design methodology and personally believe that the way we design websites and web products should ultimately come down to the content and the product itself.
  • Mobile first is generally a good starting place for websites these days, so with that in mind v2 shall be completely mobile first orientated
• Sane defaults and resetting
  • Minimize multiple element stylings i.e. resetting something to one value and then changing that value when actually styling the element
  • HTML is technically responsive by default and we break that through styling, so I plan on trying to keep as much as that default behaviour as possible
• Responsive Tables as default
  • Idk how many times I have copied and pasted the responsive table css from the Living social blog and I wish this behaviour was browser default
• CUSTOMISE EVERYTHING!!!!!!!!!!!!
  • I want to make it stupidly easy to customise the look and feel of the website you are creating with Boneless, so I plan on trying to make everything as flexible as possible, but clearly there is a sensible limit to that
• Components
  • I would like to have a series of components that can be included into the build
  • ideas currently for these components are navbars, hero sections, cards (yes those things that material made popular again), and footer & header sections
• Responsive Images
  • Images are a nightmare when it comes to responsive design, and I want to try and make that easier.
  • Most of the time when we are working with responsive images we are not only trying to keep the physical size of the image down, but are also trying to maintain the aspect ratio of the image.
  • I found this cool sass mixin on codepen that does exactly that some more info on how it works can be found here.
• Basic styles
  • As this is takes its core values from dhg's Skeleton I want to keep the styles to a minimum, but enough to be a decent starting place.
  • That sounds like a very convoluted sentence and it kinda is, but basically I am trying to say is that this is going to follow the same paths skeleton is currently following in terms of minimalistic styling.
• CSS3 and Above by default
  • CSS is actually pretty decent these days with a tonne of cool new features making there way into the language, and with browser support increasing for a lot of them, it makes sense to use them.
  • This means there will be a FLEXBOX grid system cause flexbox is awesome
  • there will probably also be another grid system in place so you can chose whether you want to use flexbox or not.

    Ideas

    Themes

There was talk in the past of having a _theme.scss file which we moved away from for good reason (not really necessary in Sass especially with the ability to override !default variables), though I do think it could be neat to have themes of sorts for Boneless, kinda like what is going on over at wrap bootstrap or bootswatch for Bootstrap, though my emphasis would be on free themes rather than paid ones.

CSS/Sass Only

When Seth (@WhatsNewSaes) and I started talking about Boneless, it came up a few times that it might be cool to keep this framework/toolkit still don't know what to call it CSS only, and hence create all of the UI elements solely with CSS and without the aid of Javascript.

This in itself brings with it its own challenges (mainly browser support and also limiting what kinda of components can be created) but I think it also fits in nicely with being a starting place for the stylistic aspect of the website and not a functional one.

I'd be interested to see what others think on this matter.

I'd also like to note that I have semi begun work on this, and will be pushing the v2 dev branch up soonish

[hamaluik]

I largely agree with everything you've written. When I came to Skeleton I was looking for a lightweight library that let me build what I needed, how I needed it (instead of the "Bootstrap way" of figuring out how to make my page fit into their components). I would like to continue this in Boneless. In that vein I really like "component-izing" everything, so users can pick and choose exactly what they need / don't need.

Responsive Images

I like this, and although the mixin you showed was really great, it seems to require knowing exactly the aspect ratio before compile time - which isn't always the case. How do we keep this without inducing all the bloat associated with defining classes for all possible aspect ratios?

Tables

Holy shit, I never knew that was even possible! We should definitely include that.

Typography

I think typography is extremely important. Perhaps look at incorporating typebase.css or at least some of the ideas there?

Themes

There should be the default "theme" which is built in, but it should be very easy to customize by being able to include a singular file which is responsible for overriding everything it needs to. We could then generate many example theme files for people to both use and learn from. Or perhaps it looks like this:

// my-site.scss

// import boneless
@import boneless.scss

// "theme" it here!
h1 { background: red; }
p { font-weight: bold; }

CSS/Sass Only

I think this should definitely stay "css only" (no javascript / libraries required). This lets the library stay as flexible as possible, allowing users to use whatever javascript backend they want (Angular, jQuery, roll-their-own, etc).

[benhinchley]

Yeah I think in terms of the Responsive Images mainly in regards to that mixin, is maybe we just leave this component as a series of mixins/functions that people can use if they want to rather than, creating a bunch of classes for them?

I agree that Typography is extremely important, and will defiantly have a look at typebase.css, currently I have been using http://type-scale.com/ as my starting place.

I'll push my current v2 branch up when I get home, so you can have a look through what I have been working on. It is currently in a massive shambles as I am moving it over to use eyeglass so the build process is kinda a mess. But the rest is fine

[JayWIlsonJr]

I agree with what both of have written. I also think that this should remain 100% css only. I think the responsive table is bad-ass and has changed my world a little :) I love the idea of components and I second the idea of there being a base/default theme that can be easily customized.

I think you are spot on taking a mobile first approach. I think that is the way to go.

[benhinchley]

@FuzzyWuzzie @JayWIlsonJr I have just pushed up my v2.0 branch