Tag: sass

Sage Installation – Update for version 9

TheSmithy

  • Update: 4-12-2018

For older versions of Sage see this post

https://github.com/roots/sage

https://roots.io/sage/docs

Changes in Sage 9

  • Laravel’s Blade as a templating engine.
    Learn about Blade. Check out the templates directory.

    You can opt-out of Blade templates by replacing them with regular PHP ones (you could copy over the templates from Sage 8 if you really wanted to).

  • Replaced gulp and Bower with Webpack and npm.
    Bower is dead and all packages should be available on npm.

    Webpack is responsible for:

    • Compiling assets
      • Sass to css with ccsnano
      • ES6 to JavaScript that can be run in today’s browsers with buble
    • Optimizing images with optipng, gifsicle, pngquant, and svgo
  • ES6 for Javascript
    Great resource for learning about ES6: Wes Bos’ ES6 for Everyone
    Convert existing JS to ES6 with Lebab
  • Bootstrap 4
    It’s still in alpha, but there’s so many improvements over Bootstrap 3.
  • PSR-2 coding standards.
    Roots projects switched to PSR-2 last year. Previously we had used a modified PSR-2 ruleset, but we stopped caring about 2-spaces in our PHP files and fully adopted PSR-2.
  • Restructured theme files.
    All theme templates are finally out of the theme root! Our implementation is a little hacky because a 7 year old WordPress Trac ticket still hasn’t landed, but we believe our implementation is the best we can do at this time.
  • Introduced Yarn.
    Yarn is a drop in npm client replacement. With Yarn, the installation of Node dependencies is quicker & the node_modules directory is smaller.

Theme Installation

  1. Make sure all dependencies have been installed before moving on:
    PHP >= 5.6.4 7.1.3 (with php-mbstring enabled)
    – Add the wamp php (at least 7.1.3) to Windows PATH (and no other php in the path).
    – make sure extension=php_mbstring.dll is enabled in the php.ini of the php version you are using (default= enabled)
    Composer (Dependency manager)
    Node.js >= 6.9.x
    – If necessary install Node (with npm). I used the Windows installer here (x64 version)
    Yarn
  2. From your WordPress themes directory, run the following composer command: 
    composer create-project roots/sage your-theme-name dev-master

    During theme installation you will have the options to:

    – Update theme headers (theme name, description, author, etc.)
    – Select a CSS framework (Bootstrap, Foundation, none)
    – Add Font Awesome

    Update: Newest version of Sage9 (9.0.5 at the time of writing) gives the following error: 

    TTY mode is not supported on Windows platform

    Solution: run this from the theme directory

    ./vendor/bin/sage meta        # or edit style.css directly
./vendor/bin/sage config      # or edit resources/assets/config.json
./vendor/bin/sage preset      # Install css framework
  3. Navigate to the theme directory then run yarn, and yarn build (to refresh files):

    yarn && yarn build

    You now have all the necessary dependencies to run the build process.

    About dependencies:
    If you open package.json you’ll see both devDependencies and dependencies that Sage uses. devDependencies are used by the build process, whereas dependencies are packages that are used in the front-end theme assets.

    dependencies includes the front-end options you selected during install, such as Bootstrap and Font Awesome

    "dependencies": {
      "bootstrap": "^4.0.0-beta",
      "font-awesome": "~4.7",
      "jquery": "1.12.4 - 3",
      "popper.js": "~1.11"
    }

————————–

Install WordPress and activate plugins

Optionally import test data with WP Test. See here

Warning when activating i-themes Security:

When activiating this plugin, it will write to your wp-config.php.
This causes an error with the Bedrock config setup and make you website/admin unaccesible.
Solution:
– activate i-themes
– edit wp-config.php -> remove file permissions added by i-themes (we use config/application.php for that)
– WP admin should be accesible again
– Go to i-themes settings-> WordPress Tweaks -> File Editor -> uncheck the box

Read More

SASS tips and tricks

TheSmithy

watch and build:

sass --watch scss:styles

@if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}


@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

Mixins

Variable Arguments

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}