bufferapp / css-style-guide

How we CSS at Buffer
6 stars 3 forks source link

Update README with first draft. #4

Closed stphndxn closed 8 years ago

stphndxn commented 8 years ago

Hey @Alex-ray, @djfarrelly, @federicoweber, @ivanaszuber @joelg, @msanroman, @nieldlr, @sunils34, @twanlass & any other ceiling cats! No rush needed on this! Curious to hear any thoughts on this first draft for our CSS style guide! :smile:

nieldlr commented 8 years ago

@stevemdixon this is looking so amazing. What a great start.

It's the first I'm learning about declaration order. I like that a lot! Makes reading CSS quite nice :D

I was wondering, as I'm not 100% sure on this, I tried reading a bit more. Is padding part of the 'positioning' or 'box-model' declarations? If it it's part of the box-model would that perhaps change that CSS section in the Readme? With padding & height being placed together. :) Curious to hear more here.

Thanks for moving ahead here Steve. Excited for this!

stphndxn commented 8 years ago

Hey, @nieldlr! Thanks so much for giving your time to check this one over! :grin: I've always wondered whether padding and margin are part of positioning or box-model, too! I'd be curious to hear any thoughts on that one! :smile:

twanlass commented 8 years ago

@nieldlr @stevemdixon my hunch would be that padding / margin would fit nicely as part of the box-model since they directly affect it's calculations :-)

twanlass commented 8 years ago

@stevemdixon so so sorry if I've missed this in the conversation - what's the thought around capitalizing 'objects'? Is there ever a scenario when we'd not capitalize them?

djfarrelly commented 8 years ago

Looking great @stevemdixon!!! To join in with the order, the box model feels like anything that affects the element's sizing and subelement layout (and it's sub-elements layouts in the case of flexbox props). I don't think we need to be ultra strict (In my personal style, I've always usually joined the "positioning" and "box model" sections as they are closely related. leaving all the other, visual items below!

I'm cool with capital or lower case objects - whatever you guys are feeling :+1: I like the idea that some React modules could use the same Uppercase naming, but that's not a biggie for me :wink: cc @twanlass

stphndxn commented 8 years ago

@twanlass @djfarrelly Love the idea of having them as part of the box model! :smile:

@twanlass My hunch was to perhaps have them mimic the naming conventions we have for React components! I'm certainly happy for either or! :grin: What're your thoughts on capitalized and non-capitalized? :grin:

federicoweber commented 8 years ago

Wow love this @stevemdixon :+1:.

Here are couple of considerations:

stphndxn commented 8 years ago

I totally subscribe to @djfarrelly consideration of not beeing to strict with the declarations order :smile:.

That feels great to me too! :smile:

About capitalized names: at first glance it looked a bit strange to me, I slightly prefer uncapitalized names, but I can work with both.

Either feels great for me, too! Shall we remain with lowercase to perhaps follow general CSS convention? :smile:

on indentation: most of the LESS files right now uses tabs instead of spaces; if that feel good my hunch is that is that sticking with it will ease avoiding mixing soft and hard types :).

Aha! In Atom, when I add two spaces, they seem to change to tabs the size of two spaces! It feels like I may have something up with my Atom settings! :sweat_smile: Super happy to go with what we usually have here!


@djfarrelly, @nieldlr, @twanlass; does it feel great for me to make these changes and push another commit to this PR? :smile:

twanlass commented 8 years ago

@stevemdixon - I think an update to this PR feels great. :-)

federicoweber commented 8 years ago

That will be great @stevemdixon :smile:.

:+1: on lowercase names

stphndxn commented 8 years ago

@djfarrelly, @nieldlr, @twanlass:

If it feels great, I've updated the READM.md! :smile:

djfarrelly commented 8 years ago

Feels good to merge it for me @stevemdixon!

twanlass commented 8 years ago

Looks awesome @stevemdixon :+1: Feels great to merge :-)

stphndxn commented 8 years ago

Woohoo! Merging! :smile: