Smarter Grids with Sass and Susy...and Wordpress!

Jul 1, 20156 likes3,114 views

In this talk I’ll look at how using Susy, a Sass grid framework, can make creating responsive grids for the web easier and speed up your design workflow. I’ll cover getting started with Sass and Susy in your Wordpress project, the advantages of using Susy, and some useful mixins and functions to help you create awesome grids.

SMARTER GRIDS WITH
SASS AND SUSY
…AND WORDPRESS!

http://susy.oddbird.net

http://sass-lang.com

Lighten or darken a colour:
http://jackiebalzer.com/color

http://jackiebalzer.com/color

Find the complementary colour:
http://jackiebalzer.com/color

“I LIKE THE IDEA OF GRIDS ON
DEMAND, RATHER THAN A
STRICT FRAMEWORK.”
Chris Coyier

2
No need to add multiple classes to your HTML.

“SUSY SOUNDS LIKE THE
BEST THING EVER! HOW
DO I GET STARTED?”

http://compass-style.org
$ gem install compass

3
Create a new compass project.
$ compass create new-susy-project

4
Watch your project for changes.
$ compass watch

5
Add Susy!
$ gem install susyTerminal
require 'susy'config.rb
@import "susy";screen.scss

7
Create index.php (and any additional files).

http://codepen.io/michellebarker/pen/eNNVLO

http://codepen.io/michellebarker/pen/eNNVLO
<header>
<article> <aside>
<footer>

http://codepen.io/michellebarker/pen/rVVJQa

http://codepen.io/michellebarker/pen/aOOqPN

THANK YOU
Susy website http://susy.oddbird.net
Zell Liew http://www.zell-weekeat.com
SitePoint http://www.sitepoint.com/sass-grids-neat-susy
Codepen http://codepen.io/collection/DExeJL/
@mbarker_84

Session slides from Future Insights Live, Vegas 2015: https://futureinsightslive.com/las-vegas-2015/ Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.

The Coding Designer's Survival Kit - Capital Campcanarymason

This document outlines the tools included in The Coding Designer's Survival Kit, which provides designers with markup, CSS, and JavaScript tools for designing websites in the browser. The kit includes HTML5 Boilerplate, elements and pages to design for, Modernizr and Selectivizr, JavaScript tools like Lettering.js, and Sass/Compass mixins. Using these tools allows designers to play with CSS, work parts of designs out in Photoshop while speaking CSS natively, and ask questions that Photoshop alone does not. Resources like Hardboiled Web Design, CSS3 for Web Designers, and Responsive Web Design are also recommended.

Designing in the Browser - Mason Wendell, Drupaldelphiacanarymason

The document discusses the benefits of designing websites directly in HTML and CSS in the browser rather than first designing in Photoshop. It notes that designing in the browser means the designer is working in the actual medium, everything they design can be built because they are building it, and the client sees the real design from the start. Some tips provided include using frameworks for layouts, starting with content, embracing progressive enhancement, and using advanced CSS techniques while allowing for older browsers.

Themer's roundtablecanarymason

Mobile and Responsive Design with Sassnyccamp

Is your site ready for the mobile web? Are you sure? Go ahead, check it on your phone, and your kid's phone, and a tablet, and some Android dealies, and a Bleakberry. And a TV or two. I'll wait. That was an eye-opener, right? Web design and front end development has never been more complex than it is now, and it's likely to get worse before it gets better. Should you design your site "Mobile First"? How about "Adaptive" or "Responsive"? What's the difference between those again? I want to talk about why you might want to choose these approaches to your project. CSS is also not really up to the task of managing all this complexity. Sure, it *can* do it, but pure CSS strains almost to the breaking point under the pressure. So let's welcome Sass to the party. Sass is a CSS preprocessor that gives CSS authors the tools we've been aching for in creating and managing large and complex CSS projects. We'll cover a few of the Sass basics, but the real value here is in the more sophisticated tools that let you manage all the moving parts necessary in creating all this new-fangled wizardry. We'll cover: - Mobile First - Adaptive Design - Responsive Design - Stand-alone mobile options - Sass - Mobile-focused tools - Compass - Survival Kit - Susy

Designing in the Browser - Design for Drupal, Boston 2010canarymason

The document discusses the benefits of designing websites directly in the browser using HTML and CSS rather than designing first in Photoshop. It argues that designing in the browser results in more accurate and web-native designs that are buildable because the design is being built as it is designed. It provides tips for getting started with designing in the browser such as using frameworks for layouts, embracing progressive enhancement, and anticipating how the design will be implemented with content management systems like Drupal.

Drupaldelphia Shortcuts Cheats And Cheap Stuntscanarymason

This document discusses shortcuts and techniques for overcoming challenges in Drupal theming and design workflows. It recommends starting with a stripped-down Zen starter theme, using CSS frameworks like Blueprint for layout, and leveraging browser debugging tools and Drupal modules like Devel and Admin for theme development. The document also briefly mentions using Sass/Compass for CSS preprocessing.

SC5 Style Guide GeneratorVarya Stepanova

This document introduces the SC5 Styleguide, a tool for living styleguides that represents UI components with the exact same styles used in a project. It advocates an approach called Styleguide Driven Development where the styleguide is the focal point for front-end development. Key features include supporting CSS/SCSS/LESS, related variables, live editing, Angular directives, and easy integration. The styleguide allows for quick testing, building out new pages, and easier collaboration between designers and developers.

What is Object Oriented CSS?Nicole Sullivan

This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.

Web101-introSamantha Lin

[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...kubw3rt34

This 704-page book teaches readers how to use HTML, CSS, and JavaScript together to design, create, and maintain world-class websites. Using a step-by-step approach, each lesson builds on the previous ones to teach the essential skills needed to use HTML for website structure, CSS for layout and design, and JavaScript for interactivity. The book includes step-by-step instructions, practical hands-on examples, and quizzes to help readers apply what they learn.

Roll Your Own CSS FrameworkMike Aparicio

This document discusses rolling your own CSS framework by starting from scratch rather than using an existing framework. It recommends using CSS preprocessors like SASS or LESS to write CSS code. It also provides many links to additional CSS resources on topics like responsive design, grids, typography, and existing frameworks. The document is presented by Mike Aparicio and encourages the reader to contact him with any other questions.

How to develop a CSS FrameworkOlivier Besson

The document discusses steps for developing a CSS framework, including defining layout rules, framework files, resets, grids and units, forms, tables, and generic classes. The framework is designed to be easily reusable, have a short source code, increase productivity, and decrease bugs. Key steps involve defining the layout, grids and units, resets, typography, forms and tables, and generic classes through separate CSS files.

CSS Custom Properties (aka CSS Variable)Geoffrey Croftє

CSS custom properties, also known as CSS variables, allow authors to store reusable values that can be used throughout a document. Custom properties are defined with a double hyphen prefix like --main-color and accessed with the var() function like color: var(--main-color). They can be used to create reusable themes, dynamic UIs that respond to user input, and more accessible interfaces. CSS variables provide inheritance, fallbacks, and other advantages over preprocessors. They are supported in all modern browsers but polyfills exist for older environments.

Basic web Deveopmentsatyaranjanswain7

This document provides an overview of how to build a website, including key components like domain name, web hosting, design tools, and basic technologies. It recommends: 1) Getting a domain name and web hosting to house your site before beginning, as hosting is required and the only cost. 2) Using WordPress as a popular online system that allows easy website creation without technical skills. 3) Explains HTML for creating web pages, CSS for controlling layout and style, and JavaScript for dynamic functionality. 4) Outlines a basic model and structure for a website with home, main, and sub sections.

WordCamp Kent 2019 - WP 101: Custom Post Type & Custom FieldsJoe Querin

This document discusses custom fields and custom post types in WordPress. It provides an example scenario where a food blogger creates a recipes custom post type to display recipes. However, when switching themes later, the recipes disappear since the new theme does not support that custom post type. The document also discusses how to create custom fields to add additional metadata like start/end dates. It covers using plugins like Custom Post Types UI and custom fields plugins to facilitate creating custom content in WordPress.

Creating Living Style Guides to Improve PerformanceNicole Sullivan

Responsive Web Design tehnike u WordPress-uIgor Benić

Front-end Tools: Sifting Through the MadnessFITC

with Louis Lazaris Presented at FITC Toronto 2015 More info at http://www.fitc.ca/toronto The front-end tools landscape is growing at an exponential pace. Every week there are new plugins, new coding methodologies, new native apps, new JavaScript utilities, new jQuery plugins, new build tools, Grunt plugins, JavaScript libraries and so on. Many help us to solve problems and be more productive. This talk will give you a quick overview of the kinds of things that get released every week, showing the variety of what’s available. But we shouldn’t be discouraged or overwhelmed by the amount we need to keep up with.Louis will cover some suggestions for dealing with the madness, and how developers today can benefit greatly from this influx of new stuff, even if they can’t keep up with it all. OBJECTIVE Demonstrate how to keep up with at least some of the pace, while benefiting from stuff we might not even use. TARGET AUDIENCE Front-end developers. ASSUMED AUDIENCE KNOWLEDGE Decent understanding of HTML, CSS, and JavaScript. FIVE THINGS AUDIENCE MEMBERS WILL LEARN The wide variety of JavaScript-based utilities available today. The kinds of CSS and Sass tools that are at our disposal. How to keep up with the influx of tools. How to keep from being overwhelmed. The possibilities to learn from tools that we don’t even use.

Front-end Tools: Sifting Through the MadnessFITC

Front-end Tools: Sifting Through the Madness with Louis Lazaris Presented at FOVERVIEW The front-end tools landscape is growing at an exponential pace. Every week there are new plugins, new coding methodologies, new native apps, new JavaScript utilities, new jQuery plugins, new build tools, Grunt plugins, JavaScript libraries and so on. Many help us to solve problems and be more productive. This talk will give you a quick overview of the kinds of things that get released every week, showing the variety of what’s available. But we shouldn’t be discouraged or overwhelmed by the amount we need to keep up with.Louis will cover some suggestions for dealing with the madness, and how developers today can benefit greatly from this influx of new stuff, even if they can’t keep up with it all. OBJECTIVE Demonstrate how to keep up with at least some of the pace, while benefiting from stuff we might not even use. TARGET AUDIENCE Front-end developers. ASSUMED AUDIENCE KNOWLEDGE Decent understanding of HTML, CSS, and JavaScript. FIVE THINGS AUDIENCE MEMBERS WILL LEARN The wide variety of JavaScript-based utilities available today. The kinds of CSS and Sass tools that are at our disposal. How to keep up with the influx of tools. How to keep from being overwhelmed. The possibilities to learn from tools that we don’t even use.

Dreamweaver and Meelectricgeisha

The document provides instructions for setting up a website using Dreamweaver CS4. It recommends beginning by organizing files in a "My web site" folder on the Statler server and creating image and template folders. Users are then instructed to create their first web page within a 15 minute time limit. Finally, it includes a reading list of books, journals, and websites for learning more about web design.

Wordcamp2012deckmel_haas

This document provides tips and tools for using developer tools like Chrome Developer Tools and Firefox with Firebug to reverse engineer WordPress. It recommends Free Ruler, DigitalColor Meter, Espresso, and Sublime Text as useful Mac development tools, and resources for learning responsive web design, CSS, JavaScript, and more through websites like O'Reilly, W3Schools, and Codecademy. The document ends by sharing a link to CSS3 pattern examples and details on following the author on Twitter.

Intro to Sass for WordPress DevelopersSuzette Franck

If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.

Power point tour shape editingOsama Adel

How to use CSS3 in WordPress - SacramentoSuzette Franck

The document provides an overview of how to use CSS3 in WordPress. It begins with introductions and then covers CSS/CSS3 basics, terminology, syntax, properties, comments, specificity, and inspecting CSS. It discusses using CSS in WordPress by adding it via themes, plugins, or inline styles. Finally, it highlights new CSS3 modules like colors, gradients, border radius, shadows, and transformations, and provides CSS resources.

Using scss-at-noisestreetWei Pin Teo

SCSS is a file extension and syntax for CSS that adds powerful features like nesting, variables, mixins and more. SCSS files are compiled into regular CSS files. Using SCSS allows for better organization of CSS through modularity and variables, which cuts down development time. It also automatically concatenates and minifies CSS. To use SCSS, install the sass gem and save CSS files with a .scss extension. Then use the sass watch command to automatically compile SCSS files into CSS.

DrupalSouth 2014: Managing Complex Projects with Design ComponentsJohn Albin Wilkins

Getting Sassy with CSSJulie Cameron

I don't know about you, but vanilla CSS always leaves me wanting more. It's a fairly simple language, can do some pretty powerful things, but after a while.. well, it can become rather tedious to work with. Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the prettification of your website a breeze by adding invaluable features of more traditional programming languages. In this session, we'll jump right in to the Sass workflow and cover all the key game changers - nesting, variables, mixins, inheritance, and directives. We'll also cover some of the gotchyas, tools and extensions, and tips for organization and coding standards. Prepared for self.conference at COBO Hall in Detroit, Michigan on May 30, 2014. Updated for CodeMash January 2015. Updated for Detroit Craftsman Guild March 2016.

Turbo theming: Introduction to Sass & CompassAlmog Baku

This document provides an introduction to Sass and Compass, beginning with an explanation of why traditional CSS has limitations. It then discusses the benefits of Sass such as variables, nesting, mixins and more. Compass is introduced as a framework that builds on Sass and provides additional functionality like sprites and mixins. The document also briefly covers using Sass with Drupal and production workflows.

More Related Content

What's hot (20)

SC5 Style Guide GeneratorVarya Stepanova

What is Object Oriented CSS?Nicole Sullivan

Web101-introSamantha Lin

[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...kubw3rt34

Roll Your Own CSS FrameworkMike Aparicio

How to develop a CSS FrameworkOlivier Besson

CSS Custom Properties (aka CSS Variable)Geoffrey Croftє

Basic web Deveopmentsatyaranjanswain7

WordCamp Kent 2019 - WP 101: Custom Post Type & Custom FieldsJoe Querin

Creating Living Style Guides to Improve PerformanceNicole Sullivan

Responsive Web Design tehnike u WordPress-uIgor Benić

Front-end Tools: Sifting Through the MadnessFITC

Dreamweaver and Meelectricgeisha

Wordcamp2012deckmel_haas

Intro to Sass for WordPress DevelopersSuzette Franck

Power point tour shape editingOsama Adel

How to use CSS3 in WordPress - SacramentoSuzette Franck

Using scss-at-noisestreetWei Pin Teo

DrupalSouth 2014: Managing Complex Projects with Design ComponentsJohn Albin Wilkins

SC5 Style Guide GeneratorVarya Stepanova

What is Object Oriented CSS?Nicole Sullivan

Web101-introSamantha Lin

[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...kubw3rt34

Roll Your Own CSS FrameworkMike Aparicio

How to develop a CSS FrameworkOlivier Besson

CSS Custom Properties (aka CSS Variable)Geoffrey Croftє

Basic web Deveopmentsatyaranjanswain7

WordCamp Kent 2019 - WP 101: Custom Post Type & Custom FieldsJoe Querin

Creating Living Style Guides to Improve PerformanceNicole Sullivan

Responsive Web Design tehnike u WordPress-uIgor Benić

Front-end Tools: Sifting Through the MadnessFITC

Dreamweaver and Meelectricgeisha

Wordcamp2012deckmel_haas

Intro to Sass for WordPress DevelopersSuzette Franck

Power point tour shape editingOsama Adel

How to use CSS3 in WordPress - SacramentoSuzette Franck

Using scss-at-noisestreetWei Pin Teo

DrupalSouth 2014: Managing Complex Projects with Design ComponentsJohn Albin Wilkins

Similar to Smarter Grids with Sass and Susy...and Wordpress! (16)

Getting Sassy with CSSJulie Cameron

Turbo theming: Introduction to Sass & CompassAlmog Baku

Css border examples💾 Radek Fabisiak

The World of Stylesheet LanguagesAndrea Tino

SASS is a CSS preprocessor that provides a more structured language for stylesheet development. It features include variables, nested rules, mixins, and functions that allow developers to write cleaner CSS code. SASS files can be compiled into normal CSS files. Using SASS improves code quality by reducing repetition and making stylesheets easier to maintain as projects increase in complexity. SASS also encourages separating CSS into multiple files based on components, media queries, or other logical structures to better organize the code.

DrupalCamp Chattanooga - September 2014 - Sass 101Eric Sembrat

This document introduces Sass, a preprocessor for CSS that allows for variables, nesting, mixins and more to make CSS more powerful, modular, and maintainable. It discusses how CSS has grown complex without features like variables, discusses the "Don't Repeat Yourself" principle in programming, and then outlines several key features of Sass like variables, nesting, mixins and plugins that help address these issues and clean up CSS. The document provides examples of how these Sass features work and concludes with information on getting started with Sass.

ADUG - May 2014 - Theming in Drupal using SassEric Sembrat

960 grid psdRaju Nag

The document discusses Nathan Smith's presentation on the 960 Grid System. Some key points: - Nathan Smith is the principal UI architect at projekt202 and advocates for understanding frameworks as tools rather than "black boxes". - The 960 Grid System provides commonly used dimensions based on a 960 pixel width with 12 or 16 column variants that can be used separately or together. - Code examples show how the grid system divides pages into columns and allows for nested grids and column rearranging with CSS classes.

Front End Badassery with Sassjessabean

This document introduces Sass as a solution for the pain points of CSS like lack of variables, nesting, and repetition. It highlights Sass' features like variables, nesting, mixins, extends, and color/math functions that make front-end development easier. The document provides tips for using Sass such as limiting nesting to 2 levels, using imports to avoid extra HTTP requests, separating mixins into a library, and thinking in modules to build a Sass partial library. It recommends learning more about Sass through documentation and other resources and introduces related preprocessing tools like LESS and Stylus.

Introduction to XMLUI and Mirage Theming for DSpace 3Bram Luyten

ELAG 2013 Workshop on customizing the DSpace XMLUI Mirage interface. The workshop first explores what can be changed in CSS, exploring the different functions of the style.css, base.css and reset.css files. It then highlights where all of these files can be found and where you need to deploy your own customizations. Digging down an additional layer, it is explained how XSL can be modified to remove or change entire blocks of functionality on a page. The key learning here is that you can alter the representation of whatever comes in through the DSpace DRI using XSL. However, if you need to include additional data or other DSpace info, you have to make sure that it appears in the DRI first, before you can start transforming it with XSL.

Refresh OKCNathan Smith

This document discusses the 960 Grid System, a CSS framework that utilizes a 12-column grid layout with widths of 60px each and gutters of 20px. It can be used for rapid prototyping and integrated into production environments. The document provides code examples of typical grid layouts and nested grids. It also discusses related topics like fixed-width grids, grid generators, and myths around CSS best practices.

Pre-processing for Fronteers by Viking Kristof HoubenMobile Vikings

On 22/6/2012 Viking Kristof Houben gave a presentation at 'Fronteers' about 'Pre-processing'. The organization 'Fronteers' wants to professionalize the job of front-end web development. It strives for the recognition and support of Dutch speaking front-end web developers. 'Fronteers' unites about 450 front-end web developers in Belgium and The Netherlands. Enjoy! 22/6/2012 Fronteers by Kristof Houben

Css PreprocessorsEd Moore

CSS preprocessors allow users to write CSS more efficiently using features like variables, nesting, mixins and functions. They compile down to valid CSS that can be used across all browsers. Preprocessors like Sass, LESS and Stylus add helpful abstractions to make CSS more modular, reusable and maintainable. Tools are available to compile preprocessors from the command line or with apps to integrate preprocessing into workflow. Future standards may incorporate useful features from preprocessors directly into CSS.

Advanced sass/compassNick Cooley

JugglingRoss Lawley

This document discusses various aspects of interface design including color, typography, iconography, microformats, and flexibility. It provides tips on choosing color palettes, using typography effectively, designing icons and favicons, implementing microformats, and making interfaces adaptable. Examples of microformats like hCard and hCalendar are shown to demonstrate how they can work together to provide structured data on the web. The document emphasizes starting simply, reusing elements, and testing designs for robustness by turning off images and CSS.

BILL Hour: Try something new! (like Sass or Compass)Reusser Design, LLC

How to get a serious front end designer jobKarlis Upitis

Getting Sassy with CSSJulie Cameron

Turbo theming: Introduction to Sass & CompassAlmog Baku

Css border examples💾 Radek Fabisiak

The World of Stylesheet LanguagesAndrea Tino

DrupalCamp Chattanooga - September 2014 - Sass 101Eric Sembrat

ADUG - May 2014 - Theming in Drupal using SassEric Sembrat

960 grid psdRaju Nag

Front End Badassery with Sassjessabean

Introduction to XMLUI and Mirage Theming for DSpace 3Bram Luyten

Refresh OKCNathan Smith

Pre-processing for Fronteers by Viking Kristof HoubenMobile Vikings

Css PreprocessorsEd Moore

Advanced sass/compassNick Cooley

JugglingRoss Lawley

BILL Hour: Try something new! (like Sass or Compass)Reusser Design, LLC

How to get a serious front end designer jobKarlis Upitis

Recently uploaded (20)

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfasfianoor1

10.1155-2024-1048933Figurefig0008.pptx.pptsuchandasaha7

Take this ppt refference and give content on mahindra commitment to sustainab...kochars428

An updated content measurement model - Elle Geraghty Content Strategy.pdfElle Geraghty

Hi! I'm Lori Vanzant. Please take a lookvanzan01

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

Lori Vanzant's portfolio. Please take a look!vanzan01

Designing Interactive and Engaging Museum ExhibitsPeach Prime Consultancy

Museums today are moving away from just showing objects to creating fun, hands-on experiences where visitors can touch, play, and learn. They design exhibits based on who will visit, use stories to make people feel connected, and add technology like virtual reality to make things even more exciting. Museums also make sure everyone, including people with disabilities, can enjoy the exhibits. They use games, teamwork, and regular feedback to keep improving, so visiting a museum becomes a fun and memorable adventure for everyone. Visit our website for more info.:https://www.peachprime.in/services/museum-exhibit-design/

Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...SlidesBrain

Modern Gradient Startup Pitch Deck – PowerPoint Presentation and Google Slides Themes Are you ready to take your startup idea to the next level? 🚀 Whether you're preparing for an investor meeting, a product launch, or simply want to create an unforgettable first impression, our Modern Gradient Startup Pitch Deck is designed just for you. At SlidesBrain, we believe that your presentation is more than just slides – it's your story, your brand, and your future. This Startup Pitch Deck features clean, bold, and modern gradient designs that instantly capture attention. It’s fully editable and compatible with PowerPoint and Google Slides, giving you the flexibility to customize it to your needs. With the perfect blend of professional structure and creative design, this deck is ideal for startups across industries — tech, wellness, e-commerce, SaaS, and more. From problem statements to solutions, team slides to financial projections, every layout you need is covered. 🎨 What You’ll Get: Stunning gradient backgrounds for a modern and sleek look Investor-focused layouts to pitch your idea effectively 100% editable elements — fonts, colors, icons, and images Compatible with both PowerPoint and Google Slides Fully customizable according to your brand identity ✨ Whether you are preparing for a seed funding round, Series A, or even just showcasing your concept, this pitch deck template helps you tell your story in a way that’s visually compelling and professionally impressive. More About SlidesBrain: At SlidesBrain, we provide high-quality, beautifully crafted Free PowerPoint Templates for professionals, startups, entrepreneurs, and creators who want to stand out. Need something even more unique? Our Custom Design Services are available to help you build tailor-made presentations that perfectly reflect your brand's essence. 📩 Want to impress your audience? Let's work together! Contact us for custom solutions or download free templates at [email protected]. #StartupPitchDeck #ModernPresentation #SlidesBrain #GradientDesign #PitchDeckDesign #PowerPointTemplates #GoogleSlidesThemes #StartupPresentation #InvestorPitch #BusinessPresentation #CustomPresentationDesign #TechStartup #StartupSuccess #Entrepreneurship #FreePowerPointTemplates #PresentationInspiration #SlidesDesign #InvestorDeck #CustomSlides #DeckDesign #SaaSStartup #StartupBranding #SeedFundingPitch #BusinessGrowth #SlidesBrainServices #PresentationTemplates

Presentation for Schoool Management Systemkolay922013

interpolacrcrdcrdrcrdctctfct frfctfction.pptpawan070201

19 Best B,u,y Verified Cash App Accountshttps://sellsusa.com/product/buy-verified-cash-app-accounts/

Design of a Low-Power VLSI Router for Network-on-Chip.pptxBapujiBanothu

Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleLikazelika

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

Download Chimera Tool Setup V42.47.0924 [Latest Version]Designer

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

Emirates Agriculture Prensentation Badges GOLD.pdfasfianoor1

Doodle Table of Contents Infographics by Slidesgo.pptxbinhyennghlu

EEE178-PPT-Theme iasodhajsdkjashdlaskdjbaksdkashdlkasdlkja;dj;kdada.pptx.pdfCastroAngeloReoD

MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfasfianoor1

10.1155-2024-1048933Figurefig0008.pptx.pptsuchandasaha7

Take this ppt refference and give content on mahindra commitment to sustainab...kochars428

An updated content measurement model - Elle Geraghty Content Strategy.pdfElle Geraghty

Hi! I'm Lori Vanzant. Please take a lookvanzan01

2nd taxonomy, nomen microorganisms-.pptxayeleasefa2

Lori Vanzant's portfolio. Please take a look!vanzan01

Designing Interactive and Engaging Museum ExhibitsPeach Prime Consultancy

Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...SlidesBrain

Presentation for Schoool Management Systemkolay922013

interpolacrcrdcrdrcrdctctfct frfctfction.pptpawan070201

19 Best B,u,y Verified Cash App Accountshttps://sellsusa.com/product/buy-verified-cash-app-accounts/

Design of a Low-Power VLSI Router for Network-on-Chip.pptxBapujiBanothu

Flowers Coloring Pages Activity Worksheet in Black and White Illustrative StyleLikazelika

Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner

Download Chimera Tool Setup V42.47.0924 [Latest Version]Designer

STOCK ANALYSYS.pptx manajemen keuangan skfdpontianak2012

Emirates Agriculture Prensentation Badges GOLD.pdfasfianoor1

Smarter Grids with Sass and Susy...and Wordpress!

1. SMARTER GRIDS WITH SASS AND SUSY …AND WORDPRESS!

2. http://susy.oddbird.net

3. http://sass-lang.com

4. WHAT IS SASS?

5. VARIABLES

8. MIXINS

11. PARTIALS

12. e.g. _header.scss

14. COLOUR FUNCTIONS

15. Lighten or darken a colour: http://jackiebalzer.com/color

16. http://jackiebalzer.com/color

17. http://jackiebalzer.com/color

18. Find the complementary colour: http://jackiebalzer.com/color

19. http://jackiebalzer.com/color

20. http://susy.oddbird.net

21. SUSY IS A FRAMEWORK

22. not SUSY IS A FRAMEWORK

23. “I LIKE THE IDEA OF GRIDS ON DEMAND, RATHER THAN A STRICT FRAMEWORK.” Chris Coyier

24. SUSY IS A FRAMEWORK not

25. SUSY IS A FRAMEWORK not an opinionated

26. ADVANTAGES

27. 1 (Relatively) easy to learn.

28. 2 No need to add multiple classes to your HTML.

29. 2 No need to add multiple classes to your HTML.

30. 3 Not an opinionated framework.

31. 4 Use as much or as little as you like.

32. “SUSY SOUNDS LIKE THE BEST THING EVER! HOW DO I GET STARTED?”

33. SUSY & WORDPRESS

34. 1 Download and install Wordpress.

35. http://compass-style.org $ gem install compass

36. 2 Navigate to your Themes directory.

37. 3 Create a new compass project. $ compass create new-susy-project

38. 4 Watch your project for changes. $ compass watch

39. 5 Add Susy! $ gem install susyTerminal require 'susy'config.rb @import "susy";screen.scss

41. 6 Rename and reorganise.

45. 7 Create index.php (and any additional files).

46. STARTER THEMES

47. BUILDING A SIMPLE LAYOUT WITH SUSY

48. http://codepen.io/michellebarker/pen/eNNVLO

49. http://codepen.io/michellebarker/pen/eNNVLO <header> <article> <aside> <footer>

50. HTML

51. SCSS

52. http://codepen.io/michellebarker/pen/eNNVLO

53. SCSS

54. http://codepen.io/michellebarker/pen/eNNVLO

55. http://codepen.io/michellebarker/pen/eNNVLO

56. SCSS

57. http://codepen.io/michellebarker/pen/eNNVLO

58. http://codepen.io/michellebarker/pen/eNNVLO

59. SCSS

60. http://codepen.io/michellebarker/pen/eNNVLO

61. MIXIN VS FUNCTION

62. SCSS

63. http://codepen.io/michellebarker/pen/rVVJQa

64. THE GALLERY MIXIN

65. SCSS

66. SCSS

67. SCSS

68. SCSS

69. SCSS

70. http://codepen.io/michellebarker/pen/aOOqPN

71. THANK YOU Susy website http://susy.oddbird.net Zell Liew http://www.zell-weekeat.com SitePoint http://www.sitepoint.com/sass-grids-neat-susy Codepen http://codepen.io/collection/DExeJL/ @mbarker_84

Smarter Grids with Sass and Susy...and Wordpress!

Recommended

More Related Content

What's hot (20)

Similar to Smarter Grids with Sass and Susy...and Wordpress! (16)

Recently uploaded (20)

Smarter Grids with Sass and Susy...and Wordpress!