Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Sassy with WordPress 4.7 and Jetpack

Job
March 04, 2017

Getting Sassy with WordPress 4.7 and Jetpack

WordPress builders often will use a free or premium WordPress theme to make their website. With adding a bit of CSS, you can easily tweak the design a little bit.

With the release of WordPress 4.7, the customizer now includes support for custom CSS with a direct preview of the custom code. If you install Jetpack to your website, you will not only see a nice looking syntax, you're also able to activate a preprocessor and use Sass (syntactically awesome style sheets) from with the customizer.

In this workshop at CMS Africa 2017, I introduced Sass and together we did some exercises using the Twenty Seventeen theme, the customizer and Jetpack.

Job

March 04, 2017
Tweet

More Decks by Job

Other Decks in Technology

Transcript

  1. Getting Sassy with WordPress 4.7 and Jetpack Job Thomas WooCommerce

    Education Lead @jobtex | job.blog
  2. Languages Which languages are used 
 in WordPress on the

    development side?
  3. Chrome Dev Tools: Inspect • Go to your site •

    right-click > inspect • Look at elements tab
  4. HTML CSS

  5. Syntax: Overview h1 {
 color: blue;
 font-size: 12px;
 } selector

    {
 property: value; = declaration
 property: value; = declaration
 }
  6. Syntax: Selectors <body>
 <h2>Header
 </h2>
 <p class=“first”>Paragraph describing some important

    thing.
 </p>
 <p id=“last”>On a last note.
 </p>
 </body> • element: body, h2, p • class: .first • id: #last
  7. Resources • w3schools.com/css/ • DesktopServer • unsplash.com

  8. Exercise • cms.mystagingwebsite.com • Change the colour of 
 “Home”

    • Change the colour and font size of 
 “Welcome to the …”
  9. None
  10. Problems with CSS • Selectors: - Too specific - Not

    specific enough • Repetitive
  11. Insert: Sass • sass-lang.com • Some advantages: - Variables -

    Nesting - Mixins
  12. Variables h2 {
 color: blue;
 }
 
 .entry-content p {


    color: blue;
 } $main: blue;
 
 h2 {
 color: $main;
 }
 
 .entry-content p {
 color: $main;
 }
  13. Variable: Format $namevariable: value;

  14. Some variable to use • Fonts
 $font-main: ‘Raleway’, sans-serif;
 (of

    course, you first need to @import that font) • Colours
 $grey: #eee; • Sizes
 $wide: 1024px;

  15. Nesting .entry-content {
 background: red;
 }
 
 .entry-content h2 {


    padding: 2em;
 }
 
 .entry-content p {
 color: $main;
 } .entry-content {
 background: red;
 h2 {
 padding: 2em;
 }
 p {
 color: $main;
 }
 }
  16. Nesting: Format selector_level_1 {
 declaration; 
 // only applies to

    L1
 selector_level_2 {
 declaration; 
 // only applies to L2 within L1
 }
 }
  17. Mixins img {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius:

    10px;
 }
 
 .box {
 -webkit-border-radius: 5%;
 -moz-border-radius: 5%;
 -ms-border-radius: 5%;
 border-radius: 5%;
 } @mixin border-radius($radius) {
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 border-radius: $radius;
 }
 
 img {
 @include border-radius(10px);
 }
 
 .box {
 @include border-radius(5%);
 }
  18. Mixins: Format @mixin namefunction($namevariable) {
 // ($namevariable) is optional
 declaration;


    }
 
 .selector {
 @include namefunction(arguments);
 // arguments are “values”
 // for $namevariable “properties”
 }
  19. Some mixins to use Media queries @mixin wide {
 @media

    (min-width: 1024px) {
 @content;
 }
 }
 
 .entry-content {
 p {
 margin-left: 10px;
 @include wide {
 margin-left: 20px;
 }
 }
 } Transitions @mixin transition($args...) {
 -webkit-transition: $args;
 -moz-transition: $args;
 -ms-transition: $args;
 -o-transition: $args;
 transition: $args
 }
 
 .button {
 background: white;
 @include transition(background 1s);
 &:hover {
 background: black;
 }
 }
  20. Some mixins to use Variable clusters @mixin large-text {
 font:

    {
 family: Arial;
 size: 20px;
 weight: bold;
 }
 color: $main;
 }
 
 p {
 @include large-text;
 } But also for: • Box shadows • Content blocks • …
  21. Functions p {
 color: rgba(black, 0.8);
 } $main: black;
 


    p {
 color: lighten($main, 80%);
 }
  22. Sources • developerdrive.com/2014/11/15-essential- sass-mixins/ • engageinteractive.co.uk/blog/top-10-scss- mixins • hackingui.com/front-end/10-best-scss-utilities/

  23. Sass processing: Jetpack • Install and activate Jetpack • Activate

    Custom CSS
 Jetpack > Settings > Appearance > Custom CSS • Open Appearance > Customise > Edit CSS • Under Preprocessor, select Sass (SCSS Syntax)
  24. Exercise • Set colour variables • Set font variables On

    the shop page • Set rounded edges for all product images • Change the font of the product titles • Make the purchase buttons look different • Use transitions on the buttons 
 (e.g. let a:hover colour change take 1 sec)
  25. Inspect the code cms.mystagingwebsite.com/shop

  26. Review • Go over code together • Next exercises: -

    Try another Sass line - Explore Grunt.js or another compiler