Posted online version of OOCSS documentation

[Matthew Browne]

Hi all,
As per BBunny's request, I have posted the documentation for the new OOCSS online, which also includes the compiled CSS for the whole framework:

http://mbrowne.github.io/oocss/

The compiled CSS is at:
https://github.com/mbrowne/oocss/blob/gh-pages/css/screen.css
(or just do a view source on the documentation page)

(Note that this build does not include the improvement to the checkbox and radio classes that I recently suggested; see that here.)

The compiled CSS is a single file but even if you don't intend to use SASS it's fairly easy to create your own custom build. First download the official OOCSS repository then edit oocss/src/components/screen.scss to include only the components you want. To compile it without needing to fool with the whole build process in Vagrant, simply install Compass and then run these commands:

cd oocss/tools/config
compass compile

That will output the compiled CSS to oocss/build/css/screen.css.

Or you could of course just copy and paste only what you need from the the screen.css file I uploaded.

I hope this is helpful...it would be nice if at some point there were an official website with this documentation since the build process, while it's not terribly complicated, may still be a bit of an obstacle to people discovering and exploring the framework who aren't sure if they want to commit to it yet.

Matt

[Micky Hulse]

On Thu, May 8, 2014 at 11:17 PM, Matthew Browne <mbro...@gmail.com> wrote:
> As per BBunny's request, I have posted the documentation for the new OOCSS
> online, which also includes the compiled CSS for the whole framework:
> http://mbrowne.github.io/oocss/
> The compiled CSS is at:
> https://github.com/mbrowne/oocss/blob/gh-pages/css/screen.css
> (or just do a view source on the documentation page)

Cool! Thanks Matt.

Just curious, why doesn't the OOCSS repo have a built version of the code?

I've never written anything as cool as OOCSS, but … for my code I
always like to include the generated version so people can skip the
build process and check out the end result directly (not to mention,
not everyone likes or knows how to use Grunt, my build tool of
choice).

When the old OOCSS was around, I'd copy/paste what I needed from bits
and pieces of OOCSS, as pure css chunks.

Looking at it now, honestly, the last thing I'd want to do is fiddle
with vagrant and virtualbox just to see some generated CSS.

OTOH, Matt just provided an alternative (thanks Matt!), but is there a
reason why the official OOCSS repo couldn't host the same thing?

I hate to say it, but ever since the OOCSS repo changed, I've stopped looking.

Anyway, just curious more than anything. :)

[Matthew Browne]

Hi Micky,
I agree that the official repo should include the "build" directory with
the compiled files, especially since there's more than one dependency
(Vagrant and Compass). With an internal team where developers are
building things frequently and are set up to do so, it makes sense to
exclude the build directory from version control, but for an open-source
project like this ideally it would be included. I suspect it was just
excluded because if you include it, you have to be sure to remember to
rebuild it every time you make a new commit, otherwise the build
directory can get out of date. This is an extra step that needs to be
communicated to everyone working on the project and I suspect that the
OOCSS team just wanted to publish the repo quickly and not have to worry
about that maintenance aspect for the time being.

Perhaps we could create a community fork of the repository that's a
little more user-friendly since it seems that the OOCSS team doesn't
have a lot of time for that right now...or at least so I would guess
given that there are pull requests from over a year ago that still
haven't been commented on or incorporated. I don't have time myself to
lead that effort right now but I could probably contribute if someone
else wanted to take the lead.

[Micky Hulse]

Great points Matt!

I totally get the point about folks not having the time. Everything
you said makes sense to me.

I'd like to help out, but I'm not sure where I'd start on something
like the "community fork". It's a good idea though. :)

What do other frameworks do? IIRC, last time I looked at Bootstrap, I
don't think they included the generated output anywhere useful. Hrmmm,
maybe it's best to just let folks go through the build process
themselves? Or, like you said, a community fork.

Is there even a need for this though? Maybe I just need to learn
Vagrant and all my problems will be solved. :D

Thanks again for posting the OOCSS docs!

Have a nice day.

Cheers,
M

> --
> You received this message because you are subscribed to the Google Groups
> "Object Oriented CSS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to object-oriented...@googlegroups.com.
> To post to this group, send email to object-or...@googlegroups.com.
> Visit this group at http://groups.google.com/group/object-oriented-css.
> For more options, visit https://groups.google.com/d/optout.



--
Micky Hulse
Senior Digital Developer/Producer
The Register-Guard
3500 Chad Drive
Eugene, OR 97408
Phone: (541) 338-2621
Fax: (541) 683-7631
Web: <http://registerguard.com>

[Matthew Browne]

Hi Micky,

> What do other frameworks do? IIRC, last time I looked at Bootstrap, I
> don't think they included the generated output anywhere useful. Hrmmm,
> maybe it's best to just let folks go through the build process
> themselves? Or, like you said, a community fork.

Well I was going to suggest that another option Github gives you is to
create a "Releases" tab, which is for downloadable .zip files, and then
I realized the OOCSS repo already has a Releases tab! Silly me for not
noticing it...

https://github.com/stubbornella/oocss/releases

So really the readme should just be updated to link to that URL rather
than making it sound like you have to build it yourself in order to
check it out...and of course having the docs online would help too.

BTW, you don't really need to learn Vagrant in order to use it to build
the project; just follow the instructions (I think I had one small issue
getting it set up on my Mac that I had to Google to solve but other than
that it went smoothly...if you run into an issue just post about it here).

And if you're using Compass, the only thing you need to do to use the
framework is copy the folder containing the .scss files to your project
and include the ones you want.

[Micky Hulse]

Hi Matt,

On Fri, May 9, 2014 at 11:58 AM, Matthew Browne <mbro...@gmail.com> wrote:
> Well I was going to suggest that another option Github gives you is to
> create a "Releases" tab, which is for downloadable .zip files, and then I
> realized the OOCSS repo already has a Releases tab! Silly me for not
> noticing it...

Ahh, I just downloaded 2.0.0, and there's the generated CSS! Cool!

So, out of curiosity, did someone have to manually upload the zip?

Thanks for finding that though. Heck, I don't mind download a zip file
to view generated code. That's not so bad.

> So really the readme should just be updated to link to that URL rather than
> making it sound like you have to build it yourself in order to check it
> out...and of course having the docs online would help too.

+1 for sure. :)

> BTW, you don't really need to learn Vagrant in order to use it to build the
> project; just follow the instructions (I think I had one small issue getting
> it set up on my Mac that I had to Google to solve but other than that it
> went smoothly...if you run into an issue just post about it here).

Awesome! I'm up for testing out a new tool. I use grunt for building
things myself, but I've been curious about vagrant and virtualbox ever
since OOCSS started using them. Thanks for tips/advice!

> And if you're using Compass, the only thing you need to do to use the
> framework is copy the folder containing the .scss files to your project and
> include the ones you want.

Beautiful. I'll experiment. Thanks again!!!

Oh, and nice sleuthing too! :)

Cheers,
Micky

[Matthew Browne]

On May 9, 2014 3:21 PM, "Micky Hulse" <rgm...@gmail.com> wrote:
>
> Hi Matt,
>
> On Fri, May 9, 2014 at 11:58 AM, Matthew Browne <mbro...@gmail.com> wrote:
> > Well I was going to suggest that another option Github gives you is to
> > create a "Releases" tab, which is for downloadable .zip files, and then I
> > realized the OOCSS repo already has a Releases tab! Silly me for not
> > noticing it...
>
> Ahh, I just downloaded 2.0.0, and there's the generated CSS! Cool!
>
> So, out of curiosity, did someone have to manually upload the zip?

I believe so, yes. Unless they have a script that uploads to github and then does it automatically, but I'm guessing not.

[Micky Hulse]

On Fri, May 9, 2014 at 12:33 PM, Matthew Browne <mbro...@gmail.com> wrote:
> I believe so, yes. Unless they have a script that uploads to github and then
> does it automatically, but I'm guessing not.

Interesting! Good to know. Thanks again! :)

[Matthew Browne]

P.S. As far as I can tell, Vagrant is only need to build the docs. So if
you're not intending to modify the framework and change the docs, then
you don't need it.

[Micky Hulse]

On Fri, May 9, 2014 at 12:48 PM, Matthew Browne <mbro...@gmail.com> wrote:
> P.S. As far as I can tell, Vagrant is only need to build the docs. So if
> you're not intending to modify the framework and change the docs, then you
> don't need it.

Ahh, interesting. That's good to know! Thanks again for being so
helpful Matt! You rock. :)

[BBunny]

Thank you!!

[BBunny]

Forgive my inexperience, but what is all this stuff in the CSS file? 

@media -sass-debug-info{filename{font-family:file\:\/\/\/www\/htdocs\/oocss\/oocss\/src\/components\/utils\/_clearfix-me\.scss}line{font-family:\0000319}}

On Thursday, May 8, 2014 11:17:35 PM UTC-7, Matthew Browne wrote:

[BBunny]

On Thursday, May 8, 2014 11:17:35 PM UTC-7, Matthew Browne wrote:

(Note that this build does not include the improvement to the checkbox and radio classes that I recently suggested; see that here.)

How would I get a compiled version of this? 

[Matthew Browne]

On 5/10/14 12:00 PM, BBunny wrote:

Forgive my inexperience, but what is all this stuff in the CSS file? 

@media -sass-debug-info{filename{font-family:file\:\/\/\/www\/htdocs\/oocss\/oocss\/src\/components\/utils\/_clearfix-me\.scss}line{font-family:\0000319}}

That's debugging info that was generated by the SASS compiler...it's safe to ignore it, but I was able to generate a version without the debugging info:

https://github.com/mbrowne/oocss/blob/gh-pages/css/screen.css

(FYI, in oocss/tools/config/config.rb, there's a line "sass_options = {:debug_info => true}" - I just commented that out to generate the CSS without the debugging info.)

On Thursday, May 8, 2014 11:17:35 PM UTC-7, Matthew Browne wrote:

(Note that this build does not include the improvement to the checkbox and radio classes that I recently suggested; see that here.)

How would I get a compiled version of this?

The above file also includes my improvements to the checkbox and radio classes.

I also updated the documentation to explain the .hangingIndent class:
http://mbrowne.github.io/oocss/#form

While I was rebuilding the project I was reminded of a flaw in the build instructions in the readme file: it seems that running the start command does not automatically build the project as the instructions suggest. After starting Vagrant, it's necessary to run "make bw" in order to build the files (at least it was for me). I updated the readme file in my fork of the repository to reflect this:
https://github.com/mbrowne/oocss/tree/master/oocss

Enjoy the new OOCSS and let me know what you think of the new classes for forms...overall I think they're great but I have some other thoughts that I'd like to discuss at some point.