cssrecipes

[RickCogley]

Hi @jaydenseric, I wanted to test incorporating cssrecipes from https://github.com/cssrecipes, since they are by the same author of postcss-cssnext.

I used npm install to install the tooltip one, and then added its css to the gulpfile.js like in this gist:

https://gist.github.com/RickCogley/b53ec3d723cbbb10814d

Could you say what's best practice for adding this kind of component? After I edited the gulpfile.js to add the cssrecipe's index.css to the list, gulp does put the styles into the output file bundle.css.

Am I taking the right approach?

By the way, this tooltip works in Chrome, but not Safari. Both latest on Mac OS X El Capitan.

[jaydenseric]

Sorry for the late reply Rick. I have not used this before, but taking a look I can't see clearly how they recommend integrating it. I think they intend you to just copy-paste in the styles.

It's pretty clever what you came up with, loading it in as a dependency and adding it to the CSS globs in the Gulp file. The benefits being its Git ignored, and you can update it easily. Would it be a devDependacy or a dependancy? It's pretty unconventional for this sort of project setup and likely one-off as most CSS snippets are not available on NPN.

If you work on large projects and you prefer working with a proper package manager you might be better off dropping Barebones and Gulp for a Webpack setup with CSS loaders, etc. This is the future, but it has a high barrier to entry and can be overkill for simple bread and butter work. I do campaign sites for Mazda with full blown hash-routing, HTML5 video, waypoints, 360 rotators, etc. that add up to ~50kb JS total minified, ~13kb gzipped. If I were to refactor the exact same experiences to using module loaders via Babel, etc. it might add almost that again.

I would just take the bits you need from that tooltip code and create a component. Otherwise, if you only use one of the many potential tooltip variations users download all the styles for no reason. The standard way to add a new component in Barebones is to create a folder for it in the /components folder containing its assets: /components/tooltip/tooltip.css. Gulp will automatically include it in the bundle.

If it were not a component, for example something really general like jQuery or normalize.css, it would go in /library.

Personally I never drop in 3rd party CSS and occasionally use 3rd party JS. All my stuff is simple components using semantic class names. Semantic being ".intro" over ".column-1" for example. Libraries like Bootstrap (and cssrecipes?) have lots of presentational class names.

[RickCogley]

@jaydenseric thanks for the considered answer, once again :-). If you scroll down to the bottom of that gist, you'll see I took a bit of a different approach, after posting this. Your initial gulpfile.js does not "inline" css modules, and in this sort of case where you want to use a 3rd party css module, you can install installing postcss-import then declare atImport = require('postcss-import'),, and call atImport() to handle that. postcss-import goes and fetches any css modules that are being referenced by @import, which would be the case for a lot of these libraries. (the commented out mqpacker combines redundant media queries; I hadn't tried it yet)

That said, I agree. I like semantic names better. I am trying to break up my personal site into UI components like you mentioned. I'm green with css, but learning, and am sort of feverishly experimenting with a bunch of stuff. I tried the postcss "lost" grid, which avoids putting much in the way of various cluttery classes in your tags, rather using some pretty fancy css to fashion the grid. I'm also trying "basscss", which is a bunch of css defaults. It's good for a learner like me, but not too huge that you cannot slog through it. It also has good basic guidelines to follow (as does SUIT css), which at least are something to start with.

By the way I tried the alternative to gulp, of simply using npm scripts to do these things. It's possible, but, the "pipelining" that gulp makes easy is suddenly challenging, needing < and > and | galore. Unless you're a jedi-level bash scripter, it's a pain.

I also heard about webpack, but yeah, after poking at it a little, that struck me as something for gigantic projects, with the time and budget to figure the sucker out. It's probably possible to do a lot of interesting stuff with it, such as focusing css and javascript to a certain page type.

The approach that barebones seems to take is one of a fairly smallish site with maybe one page type. With small sites, and especially building them with static site generators like Hugo or Jekyll, you can make numbers of templates, and specify css/js conditionally. I need to learn more gulp so I can figure out how to get it to output multiple bundle.css files for each page type. Not sure if that effort if worth it, for a small site.

[jaydenseric]

Even for a pretty large site a single bundle is the best approach. Before WOFF2 was viable Barebones was base64 embedding all the fonts into the CSS file to reduce requests. HTTP/2 will eventually reverse the desire to cut down on requests.

If everything is styled in a component fashion it's pretty tricky to work out what is used on what page. Check out this really good article.

Good you tried replacing gulp with npm scripts, if you ever succeed with any of the Barebones Gulp tasks let me know :grinning:

BTW I have made some pretty important updates today, might want to look at the last few commits. Until I can work out how to get source mapping to work with PostCSS error traces in the CSS task, post CSS runs on each file separately and the results get concatenated into bundle.css after. This has implications with plugins such as the media query condensor you were talking about as they won't be working on all the CSS at once. It also means CSS variables are only scoped to each file, which has pros and cons.

It might be a while before I get the chance to built another production Barebones site with the new setup to iron out any kinks. Up to my eyeballs learning webpack and universal JS on my first React build :persevere:

[RickCogley]

Thanks. Nice commit; gives me a lot to try out.

I'll have a read of that, and I appreciate your feedback. It's really helpful. I'll just try to name the styles to match the templates I have, like blog-top-page or blog-archive-page and so on. It will make maintenance a little easier.

Good luck on the deep dive into webpack and react.