I have put together a task runner for Genesis Sample 2.6.0 yesterday based on Christoph Herr’s work.
This is for those that develop custom sites using the Genesis framework with Genesis Sample 2.6.0 on their localhost and want to use Sass (style.css split into partial .scss files) with a finer control than what is offered by CodeKit.
The style.css is being complied in the SASS folder. The main style.css is not updating. How do we fix the path so that when we make changes the main style.css is complied.
Hi Sridhar,
It’s been a while, development is going steady and for the last few months been experimenting with different workflows and this one is definitly the one. I’m using your repo for as a kick-off for every new project I have and expanded it with a library of numerous scripts and tweaks so I can get to the design and layout pretty fast easy without having to worry too much about the php. I know my hooks and filters, and most of the knowledge was passed on by you and your blog, greatest Genesis in my opinion! That being said, I’m running into a tiny problem with this tut.
Generating pixel fallbacks for rem units works fine when I don’t load the minified css version, but when I add:
add_filter( ‘stylesheet_uri’, ‘genesis_sample_stylesheet_uri’, 10, 2 );
/**
Loads minified version of style.css.
@param string $stylesheet_uri Original stylesheet URI.
@param string $stylesheet_dir_uri Stylesheet directory.
@return string (Maybe modified) stylesheet URI.
*/
function genesis_sample_stylesheet_uri( $stylesheet_uri, $stylesheet_dir_uri ) {
return trailingslashit( $stylesheet_dir_uri ) . ‘style.min.css’;
}
It does it all but generating pixel fallbacks for rem units, at least. I don’t know if it also merges the media queries or what else. I only kow that when I leave the filter out, it will load the non-minified version and does all the things it says it does in your repo description. What could be going wrong there?
and I have another one:
Is your repo still updated? I noticed that when I install the bunch, I get a few deprecated notices of some node modules. It all works for now, but wouldn’t it be better to update this in your repo? In case everything stops working eventually?
Hoping to hear from you,
Cheers,
Niels
Ah, got it!
By default, when using your gulp.js, this will merge doubles into one. So you’ll loose for example the pixel fallbacks for non-modern browsers.
Logics:
The clean-css command in gulp.js is merging similar rules into one when minified. So, when using the minified css the pxtorem will be lost.
I found out changing the part under // Combine similar (line 119) rules to:
// Combine similar rules.
.pipe(
cleancss({
level: {
1: {
all: false, // set all values to `false`
tidySelectors: true // turns on optimizing selectors
}
}
})
)
This will prevent it from merging, leaving the pxtorem intact amoung other rules. Thus making the minified css somewhat bigger in filesize, but at least leaving the pixel fallbacks for non-modern browsers intact.
If you have any other suggestions, please follow up.
Question 2 remains, will you be updating the git in the future?
Cheers,
Niels
Better yet, this works while maintaining px fallback:
Turn it into this from line 119 in gulp.js:
// Combine similar rules..pipe(
cleancss({
level: {
2: {
mergeAdjacentRules: true, // controls adjacent rules merging; defaults to true
mergeIntoShorthands: true, // controls merging properties into shorthands; defaults to true
mergeMedia: true, // controls
@mediamerging; defaults to truemergeNonAdjacentRules: true, // controls non-adjacent rule merging; defaults to true
mergeSemantically: false, // controls semantic merging; defaults to false
overrideProperties: true, // controls property overriding based on understandability; defaults to true
removeEmpty: true, // controls removing empty rules and nested blocks; defaults to
truereduceNonAdjacentRules: true, // controls non-adjacent rule reducing; defaults to true
removeDuplicateFontRules: true, // controls duplicate
@font-faceremoving; defaults to trueremoveDuplicateMediaBlocks: true, // controls duplicate
@mediaremoving; defaults to trueremoveDuplicateRules: true, // controls duplicate rules removing; defaults to true
removeUnusedAtRules: false, // controls unused at rule removing; defaults to false (available since 4.1.0)
restructureRules: false, // controls rule restructuring; defaults to false
skipProperties: [‘font-size’] // controls which properties won’t be optimized, defaults to
[]which means all will be optimized (since 4.1.0)}
Sridhar? Is this post still relevant?
Hope to hear from you.
Kind regards,
Niels
Hey Niels.
This workflow is an overkill and not relevant for the kind of work that I do most of the time – modifying existing sites and themes vs developing full sites from scratch.
Therefore, I did not revisit it for improvements since the time I published this article. You may want to get in touch with Christoph Herr in Genesis Slack to see if has any suggestions or further ideas.