View
213
Download
4
Category
Preview:
Citation preview
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
• 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 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?
• Gulp is a task / build runner.
• Runs functions, making development easier
• Easy to configure and write functions
WHAT IS GULP?
• 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?
• 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
• 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
Recommended