FONT END DEVELOPMENT AND DRUPAL GULP, SASS, SUSY, AND MAPPY BREAKPOINTS

TODAY

What we will discuss today…• Sass• Susy• Mappy Breakpoints

• Gulp• Browser Sync• Lets do it

INTRODUCTION

Benjamin MerkleyDeveloper

OPIN Software

WHAT IS SASS

Sass stands for Syntactically Awesome Style Sheets

• Has the ability for you to add extensions

• “CSS on steroids”

• Variables

• Nesting

• Partials

• @extend

• Markup like this

SASS -NESTING

• Turns into even easier markup like this 

SASS - NESTING

• Sass gives us the ability to break up files into partials

• Use this to your advantage

• Stay organized

• No more mile long “style.css”

SASS - PARTIALS

• Allows you to re-use little pieces of code

• Change it once and let it effect your whole site

SASS - EXTENDS

• Sass allows me to keep organized

• More functionality than normal CSS

• All sorts of Sass extensions to extend functionality

• When compiled turns into CSS

SO WHY SASS?

• Susy is a grid system

• Used on thousands of sites

SUSY

• No more math

• Simple columns system

 

SUSY

• Susy is a simple to learn and easy to write

• Tools like Bootstrap uses a class name system requiring you to change and manipulate markup

• Susy allows you to use the classes already available to you (we all know Drupal gave you enough classes)

WHY CHOOSE SUSY?

• Sass extension

• No more annoying @media

• Or figuring out what device works with what

• Sizes defined by you

MAPPY BREAKPOINTS

• Here we are nesting our media query inside elements

• So each element has all of its style in one area

MAPPY BREAKPOINTS

• Mappy breakpoints allows you to use simple logic

• Makes implementing responsive functionality easier

WHY USE MAPPY-BP?

MAIN COMPONENTS

Our main components are

• package.json

• Gulp.js

• Sass folder

• Node_modules

• As easy as an @import

• then you can start using them

HOW DOES THIS ALL CONNECT?

• Gulp is a task / build runner.

• Runs functions, making development easier

• Easy to configure and write functions

WHAT IS GULP?

• Compiles our scss files

• Extensive modules to use and add to your project

THAT’S COOL BUT WHY

• No more refreshing browsers

• Multiple browsers

• Multiple devices

• Acting as one

• Saves so much time

WHY BROWSER SYNC

• Once this is set up its been done once

• Can be reused across all projects

• Gives you a great starting point for all projects

• Saves more and more time, each time you use it

• Easy to configure add functionality, nothing is set in stone

SO WHY ALL THIS?

LETS GET YOU SET UP.

IT WILL BE FUN, TRUST ME

NODE.JS

• JSON stands for JavaScript Object Notation.

• Simply easy to write

• Installs the dependencies we need

• Dependencies can be found on npmjs.com

• Npmjs hosts over 250,000 different modules

PACKAGE.JSON

RUN GULP

$ NPM INSTALL

THIS WILL INSTALL ALL OF OUR NODE PACKAGES

INSTALL GULP

$ NPM INSTALL -–GLOBAL GULP-CLI

DRUPAL

WHY IS MY SITE BROKEN?

find ./node_modules -name "*.info" -type f|xargs rm -f

• This is where we call our dependencies as well as run our functions

GULP.JS

RUN GULP

$ GULP

THIS WILL RUN OUR GULP.JS FILE AND FUNCTIONS IN IT

DRUPAL

LINK_CSS

MODULE ON DRUPAL.ORG

DRUPAL

ALL THE PIECES YOU SHOULD NEED

HAPPY STYLING

• Sass, “CSS on steroids”

• Susy “CSS grid system”

• Mappy breakpoints “nesting media queries”

• Breakpoints “easier breakpoints”

• Gulp “task runner / sass compiler”

• Broswer sync “no one likes refreshing”

RECAP

• Monthly Meetup• First Wednesday of every month• From 6pm to 8pm• New and exciting topics• Expert speakers and presenters from the

community• Meet new people passionate about Drupal• Get support from the local community• FREE pop, beer & pizza

DRUPALYOW

OPIN Software is the company behind The Open Mic Podcast, which is released bi-weekly and discusses anything & everything Drupal!

We will be hosting a live podcast today at 4pm, in the business track room, and welcome everyone to attend and contribute by discussing what you learned today and what you are hoping for from the community in the future.

To listen to The Open Mic Podcast, please visit:

http://theopenmic.libsyn.com/

THE OPEN MIC PODCAST

OPIN Software is offering free Drupal 8 training sessions to the attendees of DrupalCamp Ottawa. Sessions will include:

• Drupal 8 Fundamentals• Drupal 8 Module Development• Drupal 8 Theming

If you are interested, please visit the OPIN booth upstairs.

FREE DRUPAL 8 TRAINING

THANK YOU!

QUESTIONS?

SPECIAL THANKS TO MY MENTOR ADRIAN RYLSKI & OPIN