bonelessframework / boneless Goto Github PK

Its having issues with the spaces/tabs and a few other things, will work on cleaning it up over the week, to get it passing

I personally wouldn't mind seeing the build system change from grunt to gulp, I find it much more intuitive and streamlined, and also a bit quicker depending on the project.

Been thinking about, making this as modular as possible, through the use of %placeholders and @mixins, for example creating a button mixin, that through the arguments you can customise the button to be what ever you want. Which means that we can setup a basic button styling for the compiled css and for those who just want to use it as it, or you can use the mixin and define your own button stylings fairly easily. What are other people thoughts on this?

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

after some thought about this project, and realising the whole thing isn't going to be Sass mixins, functions, placeholders etc. Think it might be better to be using KSS or something like it, for our documentation generation, they provide better/support in general for plain old css things, as well as Sass specific things like mixins

Move to em based system, based on some sort of typographic scale

As the sole maintainer of this, and cause I am not putting as much time into this as I would like to, I have been thinking about creating a Boneless org to help in the maintainence and development of boneless.

Are there people who would be interested in helping me maintain and develop boneless?? If so I'll create an org and get a few people on the core team, can also add you to a slack team that me and @WhatsNewSaes had when we started this

It would be cool to have a theme sass file, that you can change a few variables that will be throughout all the other sass files for quick theming.

Be nice to have a custom SassDoc template for this project, make the docs look like they are actually a part of it rather than coming from somewhere else

Doesn't exist yet: https://www.npmjs.com/package/Boneless

Might I suggest adding this project to npm?

Should we implement a doc gen tool like SassDoc so that we can just the documentation generated from the Sass we write, rather than having to rewrite it all????

Need to update the README.md to include information about adding and creating documenation

I was thinking about the grid, and whether we should upgrade the grid to be a bit more robust and have bootstrap/foundation style grid with classes for the different ones like sm-4 for 4 columns in small grid etc.

What are peoples opinions on the use of grid classes like skeletons one column, container, row classes compared defining their grid semantically within their css, leaving their html as clean as possible, like profound grid is doing?

@benhinchley I know you're currently working on a pretty fantastic mixin for these.

I would just say that we should include the following selectors
button, input[type="submit", input[type="reset"], input[type="button"]

In reference to this issue #18.

I think we should defiantly get rid of the 62.5% trick and move to em/rem based type system

Can we fix this, so that it throws an error and then goes back to watching after we fix the error?

So as brought up by @diagramatics PR #34 , there is currently already a package register on bower under the name boneless, rish/boneless, and it appears as though the owner is just name-squatting.