search

edwardtufte / tufte-css

Style your webpage like Edward Tufte’s handouts.
https://edwardtufte.github.io/tufte-css/
MIT License
5.99k stars 459 forks source link

Add build to project #122

Closed Saturate closed 5 years ago

Saturate commented 7 years ago

A added build could create a minified version off the CSS, called tufle.min.css, it could also auto-add all the vendor prefixes needed via Autoprefixer/PostCSS.

To make all this work, we could do it two ways:

  1. Create a master branch, that builds to the gh-pages branch, ideally with Travis, so that it happens each time the master is updated.

  2. Create a src folder that holds the source, and a output folder called dest that holds the build artifacts. Then just point to the dest version in the HTML. You could have to install npm, and commit the build files youself.

I would recommend version 1, and I would be able to set most of it up with a PR. But we would need a contributor/owner to configure the branches. But this would in my mind be the best solution. Let me know what you'd prefer.

The issue in #119 would benefit greatly from this. And people looking to use this library could also use the optimized version.

Saturate commented 7 years ago

This would also add the possibility, to use a processor like LESS or SCSS, however this might be overkill, seeing the size of this project is pretty small. So I would not really recommend this.

daveliepmann commented 7 years ago

Minification would only affect tufte.css, not the font files, correct?

My tests show this saving ~4kb.

Saturate commented 7 years ago

That sounds about right, in my test we went from 12172 bytes bytes to 7839 bytes. This might not sound like a lot, but it all counts. I guess the autoprefixer-part would also help minimizing it and help maintaining it.

Right now you define a lot of unused vendor prefixes, these are only used by very old versions of Google and Firefox, seeing as these are updated them self, almost no body are using the old versions. This is just bloating the CSS file, and the CSS is very important for the rendering of the page.

The font's are not affected, woff2 is already compressed. But if they existed on Google Font or another service, you could gain a bit by caching them. This would also make it easier for other people to gain access to the font, right now they need to download it - but the font might not be available on a CDN (Content Delivery Network).

The maybe biggest benefit would be to inline the Critical CSS for the website into the html - this could be done with the build step as well, but would not help other people that are using the styles.

tacomanator commented 7 years ago

Many web projects now use npm as a package manager. It would be great if you include a package.json file with a build step and publish the package to the npm registry. This would allow easy install, import, and upgrades.

daveliepmann commented 5 years ago

@Saturate I just fully noticed this part of your comment:

Right now you define a lot of unused vendor prefixes, these are only used by very old versions of Google and Firefox, seeing as these are updated them self, almost no body are using the old versions. This is just bloating the CSS file

I don't see where Tufte CSS does this. Running it through the auto-prefixer only deletes some background-size. Do you see more potential deleted code here?