Smarter Grids with Sass and Susy
1 like1,516 views
In this talk I 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 cover the advantages of using Susy, how to get started and some of Susy’s mixins and functions, with visual demonstrations.
1 of 39
Downloaded 19 times
Ad
Recommended
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!Michelle Barker 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.
Front End Development - Beyond Javascript (Robin Cannon)
Front End Development - Beyond Javascript (Robin Cannon)Future Insights 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 Camp
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, Drupaldelphia
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 roundtable
Themer's roundtablecanarymason The document discusses themes in Drupal, including what a theme is, the roles of different types of themers, and the typical components and files that make up a Drupal theme. It provides recommendations for software and modules that are useful for theming, and resources for themers to reference when working on themes. The document is intended as an introduction and overview of theming for Drupal.
Mobile and Responsive Design with Sass
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 2010
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 Stunts
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 Generator
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?
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.
[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...![[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...](https://cdn.slidesharecdn.com/ss_thumbnails/pdfhtmlcssandjavascriptallinonesamsteachyourselfcoveringhtml5css3andjquery2n-190318072347-thumbnail.jpg?width=560&fit=bounds)
[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.
Web101-intro
Web101-introSamantha Lin This document outlines goals for learning web design including using tools like HTML, CSS, and learning the structure and workflow of creating websites. The goals are to learn HTML and CSS to make your own website, learn the structure of websites including elements like headers, footers, and divs, and learn responsive web design and version control tools like Git and GitHub Pages.
Roll Your Own CSS Framework
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 Framework
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.
Basic web Deveopment
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.
Front-end Tools: Sifting Through the Madness
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.
Front-end Tools: Sifting Through the Madness
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.
CSS Custom Properties (aka CSS Variable)
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.
Dreamweaver and Me
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.
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
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.
Responsive Web Design tehnike u WordPress-u
Responsive Web Design tehnike u WordPress-uIgor Benić Responsive Web Design tehnike koje se mogu primijeniti i na WordPress te kako poboljšati sam responsive dio Vaše web stranice putem WordPress-a!
Predavanje sa WordPress Meetup-a.
Wordcamp2012deck
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.
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsJohn Albin Wilkins This document discusses managing complex projects with design components. It introduces John Albin Wilkins as a senior front-end developer and provides some free resources he has created. It then discusses topics like web components, CSS specificity wars, goals of design components, file organization, deconstructing design components into parts and variants, and using semantic class names.
Power point tour shape editing
Power point tour shape editingOsama Adel This document provides a tour of editing shapes in PowerPoint, including shape fill, outline, and effects as well as text fill, outline, and boxes. It notes that this was only a quick overview and future tutorials on each topic will be published on the blog at threebloggers.wordpress.com. The document was written by Osama Adel.
Intro to Sass for WordPress Developers
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.
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014James Bonham My slides from a talk about building custom themes for WordPress, and how themes fit into the WordPress universe in relation to plugins. I also mentioned the drawbacks of bloated sites with big feature-rich themes and plugins that take on the role of themes in relation to theming.
Using scss-at-noisestreet
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.
Post css - Getting start with PostCSS
Post css - Getting start with PostCSSNeha Sharma PostCSS is a tool for transforming CSS with JavaScript plugins. It allows developers to write CSS in a more modular fashion and use future CSS syntax today. PostCSS parses CSS into an abstract syntax tree, passes it through plugins for processing, and outputs new CSS. Popular PostCSS plugins include Autoprefixer for adding vendor prefixes, CSSNano for optimization, and CSSNext for future CSS syntax. PostCSS can be used with build tools like Grunt and Gulp and has a large ecosystem of over 200 plugins.
Treeshaking your CSS
Treeshaking your CSSJames Stone Tree shaking is a technique to remove unused code from bundles to reduce file size. It analyzes import and export statements to determine unused code, which can then be excluded from the bundle. CSS frameworks like Bootstrap often include unused code by default that tree shaking tools can remove to minimize file size. Tools like UnCSS analyze CSS usage on a page to remove unused styles, but have limitations and an easier alternative is to only import needed components from frameworks during the build process.
Ad
More Related Content
What's hot (20)
SC5 Style Guide Generator
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?
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.
[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...
[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.
Web101-intro
Web101-introSamantha Lin This document outlines goals for learning web design including using tools like HTML, CSS, and learning the structure and workflow of creating websites. The goals are to learn HTML and CSS to make your own website, learn the structure of websites including elements like headers, footers, and divs, and learn responsive web design and version control tools like Git and GitHub Pages.
Roll Your Own CSS Framework
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 Framework
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.
Basic web Deveopment
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.
Front-end Tools: Sifting Through the Madness
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.
Front-end Tools: Sifting Through the Madness
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.
CSS Custom Properties (aka CSS Variable)
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.
Dreamweaver and Me
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.
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
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.
Responsive Web Design tehnike u WordPress-u
Responsive Web Design tehnike u WordPress-uIgor Benić Responsive Web Design tehnike koje se mogu primijeniti i na WordPress te kako poboljšati sam responsive dio Vaše web stranice putem WordPress-a!
Predavanje sa WordPress Meetup-a.
Wordcamp2012deck
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.
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsJohn Albin Wilkins This document discusses managing complex projects with design components. It introduces John Albin Wilkins as a senior front-end developer and provides some free resources he has created. It then discusses topics like web components, CSS specificity wars, goals of design components, file organization, deconstructing design components into parts and variants, and using semantic class names.
Power point tour shape editing
Power point tour shape editingOsama Adel This document provides a tour of editing shapes in PowerPoint, including shape fill, outline, and effects as well as text fill, outline, and boxes. It notes that this was only a quick overview and future tutorials on each topic will be published on the blog at threebloggers.wordpress.com. The document was written by Osama Adel.
Intro to Sass for WordPress Developers
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.
To build a WordPress Theme: Wordcamp Denmark 2014
To build a WordPress Theme: Wordcamp Denmark 2014James Bonham My slides from a talk about building custom themes for WordPress, and how themes fit into the WordPress universe in relation to plugins. I also mentioned the drawbacks of bloated sites with big feature-rich themes and plugins that take on the role of themes in relation to theming.
Using scss-at-noisestreet
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.
Similar to Smarter Grids with Sass and Susy (20)
Post css - Getting start with PostCSS
Post css - Getting start with PostCSSNeha Sharma PostCSS is a tool for transforming CSS with JavaScript plugins. It allows developers to write CSS in a more modular fashion and use future CSS syntax today. PostCSS parses CSS into an abstract syntax tree, passes it through plugins for processing, and outputs new CSS. Popular PostCSS plugins include Autoprefixer for adding vendor prefixes, CSSNano for optimization, and CSSNext for future CSS syntax. PostCSS can be used with build tools like Grunt and Gulp and has a large ecosystem of over 200 plugins.
Treeshaking your CSS
Treeshaking your CSSJames Stone Tree shaking is a technique to remove unused code from bundles to reduce file size. It analyzes import and export statements to determine unused code, which can then be excluded from the bundle. CSS frameworks like Bootstrap often include unused code by default that tree shaking tools can remove to minimize file size. Tools like UnCSS analyze CSS usage on a page to remove unused styles, but have limitations and an easier alternative is to only import needed components from frameworks during the build process.
Css background image
Css background image💾 Radek Fabisiak There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.
That’s the reason I decided to create this article to show you what magic can be done using such a simple CSS property. I gathered seven tips and tricks I believe will be the most useful and create some code examples where you can check what’s going on there for you.
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka A presentation from J and Beyond 2018 in Cologne, Germany. In this session, Crystal of Lucid Fox will walk you through the steps she took to build Akeeba FEF, a CSS framework that Akeeba now uses to ensure their extensions are consistent with their brand across Joomla, WordPress, and standalone PHP software. You’ll learn about creating a design system, writing CSS in a way that’s easily maintained and upgraded, and tips on implementing this system across multiple platforms.
CSS framework By Palash
CSS framework By PalashPalashBajpai All about CSS and its framework. This covered the most important CSS frameworks with their sample code and working.
Css masterclass book
Css masterclass bookPhoenix This document provides an introduction to the CSS Masterclass course by Arkmont.com. It discusses what CSS is and how it is used to style web pages. It also covers different ways to add CSS to a page, including external, internal, and inline styles. Additionally, it explains CSS selectors like tags, classes, and IDs which are used to target specific HTML elements for styling. The document provides examples of CSS properties and values that are used to define styles.
SASS is more than LESS
SASS is more than LESSItai Koren The document discusses CSS pre-processing with SASS and LESS. It begins with an introduction and disclosure by the author. The agenda then covers what CSS preprocessors are, why they are used, possible issues, how they work with basic examples, a comparison of SASS and LESS, and whether preprocessors should be tried. SASS is argued to be more robust with features like conditional statements, loop statements, and the Compass toolkit, making it a better choice than LESS overall.
Create SASSY Web Parts - SPSMilan 
Create SASSY Web Parts - SPSMilan Stefan Bauer This document provides an overview of using SASS in SharePoint Framework (SPFx) web parts. It discusses compiling SASS to CSS, autoprefixing CSS, and TypeScript class compilation. SASS allows for variables, nesting, mixins and other features that make CSS more modular and reusable. In SPFx, SASS files are compiled to CSS and TypeScript, with class names postfixed to avoid conflicts. Global selectors can avoid class name renaming. Theming is supported through Office UI Fabric color variables.
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable developmentGraeme Blackwood Most frontend developers have already heard of Object Oriented CSS, yet it is still sorely under-practiced.
Do your CSS files have overrides and !importants scattered through them? Do they often come in at 3000 lines+ for a regular site?
Tied with good semantic HTML, the Object Oriented CSS approach really is the answer to rapid, lightweight, scalable and easy to maintain frontend code. OOCSS will speed up any front end build, but really comes into its own on bigger sites.
I will talk through my approach to frontend builds and show how OOCSS makes the process so much easier.
I'll also talk a bit about CSS compilers and how it is important to have a good understanding of OOCSS methods before jumping into SASS or LESS. Poor CSS practice isn't going to be rescued by a compiler; in fact it can even compound problems by bringing in another layer to debug.
I hope to instill a real understanding of what OOCSS means, why it REALLY matters, and how it's going to make you a better front end developer!
@graemeblackwood
http://www.deeson-online.co.uk/graeme-blackwood
Presented at Frontend United – http://frontendunited.org
Drupal Camp Manila 2014 - Theming with Zen
Drupal Camp Manila 2014 - Theming with ZenJapo Domingo Theming with Zen. My Presentation fro Drupal Camp Manila. 2014
Summary:
Why Theme?
Why Zen?
How to Zen?
It also goes through the installation process and touches a bit on scss capabilities.
[WEB UI BASIC] CSS_1![[WEB UI BASIC] CSS_1](https://cdn.slidesharecdn.com/ss_thumbnails/webuibasicweek2css-150419055801-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
[WEB UI BASIC] CSS_1Jae Woo Woo This document discusses the basics of CSS3 and HTML. It covers setting the character encoding to UTF-8, creating unordered lists with <ul> tags, the order of opening and closing tags, using comments with <!-- -->, and applying CSS styles either inline with the style attribute or with an external CSS file. The goal is to beautify HTML pages with CSS.
HTML / CSS / JS Web basics
HTML / CSS / JS Web basicsbtopro We'll get our feet wet with HTML and CSS and JS. Where these things came from, play with some things on codepen and learn about topics that surround the technologies prior to digging in.
Tooling per il tema in Drupal 8
Tooling per il tema in Drupal 8Wellnet srl Come approcciare il layer di theming in Drupal 8 (e non solo) utilizzando strumenti grazie ai quali possiamo otterrete tempi di sviluppo più breve, maggiore manutenibilità,scalabilità e controllo. verranno presi in esame preprocessori CSS (SASS) e tool di building basati su NPM (GULP e relativi task, BOWER, con menzione a YEOMAN e drupal console), la loro interazione con l'architettura file di un tema e l'utilizzo di naming convenction per css in Drupal 8 (BEM, SMACSS)
Tooling per il tema in Drupal 8
Tooling per il tema in Drupal 8DrupalDay Come approcciare il layer di theming in Drupal 8 (e non solo) utilizzando strumenti grazie ai quali possiamo ottenere tempi di sviluppo più breve.
Relatore: Evan Butera
EdTechJoker Spring 2020 - Lecture 4 - HTML
EdTechJoker Spring 2020 - Lecture 4 - HTMLBryan Ollendyke This document provides an overview of HTML, CSS, JavaScript and related topics. It discusses the basics of each including what they are used for and key definitions. It mentions how these technologies are used on nearly every webpage and describes differences between browsers. The document discusses CSS frameworks like Bootstrap and tools for working with CSS like Sass. It also discusses using JavaScript and mentions jQuery as a popular library. The document promotes learning HTML and CSS before using libraries or frameworks. It discusses security implications of JavaScript and content delivery networks. Throughout it provides useful learning resources and links for further exploring these web technologies.
Css Preprocessors
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.
LESS is More
LESS is MoreNathan Lawrence A brief tutorial on some of the basic advantages LESS and other CSS preprocessors have over pure CSS.
Sass is dead
Sass is deadEli McMakin Sass is being replaced by PostCSS which is being adopted by projects like Bootstrap and Foundation. PostCSS allows for features not possible in Sass through plugins, is modular for faster development, and is significantly faster than other preprocessors. Examples show how custom syntax can be transpiled to CSS using PostCSS plugins and how its modular plugins encourage experimentation and development of new CSS features.
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSNiamh Foley The document provides instructions for creating a Christmas tree using HTML, CSS, and JavaScript. It discusses using HTML and CSS to build the basic tree structure and appearance. It then explains how to add JavaScript functionality to draw the tree on a canvas element, including drawing the triangle base and adding circular decorations. Steps are provided for setting up the file directories and boilerplate code needed to build the tree with each technology.
Introduction to XMLUI and Mirage Theming for DSpace 3
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.
Ad
Recently uploaded (20)
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
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
Download Chimera Tool Setup V42.47.0924 [Latest Version]![Download Chimera Tool Setup V42.47.0924 [Latest Version]](https://cdn.slidesharecdn.com/ss_thumbnails/artificialintelligence4-250505221011-8e660a4e-thumbnail.jpg?width=560&fit=bounds)
Download Chimera Tool Setup V42.47.0924 [Latest Version]Designer Download Link Below 👇
https://techblogs.cc/dl/
ChimeraTool is a powerful and professional mobile repairing tool for Windows. If you are already involved in mobile repair, then there is no need for you to be told “what ChimeraTool is” and “how it works?”
Internet Download Manager Crack Patch Latest IDM Free Download
Internet Download Manager Crack Patch Latest IDM Free DownloadDesigner Download Link Below 👇
https://techblogs.cc/dl/
A premium Windows tool that maximizes download speeds and manages downloads efficiently. Internet Download Manager (IDM) is a tool to increase download speeds by up to 10 times, resume or schedule downloads and download streaming videos.
4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key FreeDesigner Download Link Below 👇
https://techblogs.cc/dl/
4k Video Downloader is a software that lets you download videos, playlists, channels, and subtitles from YouTube, Facebook, Vimeo, TikTok, and other video ...
19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accountshttps://sellsusa.com/product/buy-verified-cash-app-accounts/ https://sellsusa.com/product/buy-verified-cash-app-accounts/
Telegram:- @sellsusa
WhatsApp:- +1 (606) 264–0854
Email: [email protected])
𝗗𝗲𝘀𝗶𝗴𝗻𝗶𝗻𝗴 𝗳𝗼𝗿 𝗮𝗹𝗹: 𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 𝗳𝗼𝗿 𝗕𝗲𝘁𝘁𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲𝘀
𝗗𝗲𝘀𝗶𝗴𝗻𝗶𝗻𝗴 𝗳𝗼𝗿 𝗮𝗹𝗹: 𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 𝗳𝗼𝗿 𝗕𝗲𝘁𝘁𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲𝘀Friends of Figm a, Sydney 𝗗𝗲𝘀𝗶𝗴𝗻𝗶𝗻𝗴 𝗳𝗼𝗿 𝗮𝗹𝗹: 𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗲 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 𝗳𝗼𝗿 𝗕𝗲𝘁𝘁𝗲𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲𝘀 @ The University of Sydney - 1st March 2025
Are you Transitioning or Refining Now..?
Are you Transitioning or Refining Now..?Gregory Vigneaux If the question is, "How will society survive wildfires moving forward?" wildfire-adapted communities are a promising answer. According to the Fire Adapted Communities Learning Network, "A fire-adapted community is a community that understands its risk and takes action before, during, and after the fire in order for their community to be more resilient to wildfire." If fire-adapted communities have the potential to be effective, how are they brought into being? The prior introduces the very question this theoretical discussion-based lecture seeks to explore on April 30th at 10 a.m. - 11:30:00 p.m. MDT.
Former Hotshot and winner of the National Park Service's Fuels and Ecology Award for Promoting Fire-Adapted Human Communities, Gregory Vigneaux draws on years of research to examine two modes of wildfire-adapted community change: transitions and refining the present. Attendees will be introduced to the unique pathways, dynamics, and concepts that shape each mode. The talk begins by discussing place before discussing how place is dwelled in and what that means for change.
Through theoretical exploration, participants will be introduced to language and insights for a better understanding of the changes they hope to effect and explore whether a different approach might be more effective. This discussion does not address physical fire adaptation, such as creating defensible space and home hardening, but instead examines processes of change.
This event is tailored for anyone interested in creating wildfire-adapted communities. For example, fire-adapted practitioners and stakeholders, community groups, fire mitigation experts, insurers, emergency managers, government fire officials, nonprofits, private organizations, and others. The talk provides valuable insights into community change processes around wildfire risk.
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...Venngage AI Infographic Generator Venngage’s AI Infographic Generator helps you bring clarity to your content by turning plain text into visually compelling infographics—automatically. Designed with marketers and communicators in mind, it’s built to simplify complex messaging and speed up your workflow.
With just a short prompt, the AI understands your intent and creates a structured infographic that fits your content type—whether you’re outlining a process, comparing features, or mapping out a timeline. The tool selects fonts, icons, layouts, and visual hierarchy for you, taking care of the heavy lifting in seconds.
Once generated, you can fully customize the design to align with your brand—tweak colors, edit text, replace visuals, and adjust layout elements using a simple drag-and-drop editor. The tool supports different infographic styles, making it ideal for internal reports, client presentations, blog content, and social media graphics.
What makes it valuable for marketers?
- Eliminate bottlenecks in the content creation process
- Get campaign visuals and data summaries out faster
- Repackage written content into visuals that perform better on social and email
- Communicate insights clearly with clients and internal teams
Whether you're on a tight deadline or just want to simplify your storytelling, Venngage’s AI helps you create high-impact visuals without relying on a designer or starting from scratch.
Generate AI Infographics here: https://venngage.com/ai-tools/infographic-generator
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdf
AR.AKSHAYA PAMBALATH-PORTFOLIOFINAL_.pdfakshayap23 This portfolio showcases a curated selection of academic, professional, and conceptual architectural projects, highlighting a comprehensive design approach that merges aesthetics, functionality, and contextual sensitivity. Each project demonstrates proficiency in design development, technical detailing, and presentation, along with strong command over industry-standard software tools.From large-scale urban planning proposals to intimate interior spaces, the portfolio reflects a commitment to sustainability, innovation, and user-centered design. The work embodies a balance between conceptual clarity and technical precision, aiming to address real-world challenges through thoughtful architectural solutions.Included are detailed drawings, 3D visualizations, physical models, and process sketches that collectively represent a holistic design process.Throughout the portfolio, you'll find,Conceptual Development: Idea generation, site studies, and early-stage diagrams that lay the foundation for each project.
Architectural Drawings: Detailed plans, sections, elevations, and construction details showcasing clarity and precision.
3D Visualizations and Renderings: Realistic and conceptual renderings that communicate spatial atmosphere and design intent.
Physical Models and Process Work: Documentation of physical prototypes and iterative design processes that illustrate hands-on exploration.
Technical and Software Proficiency: Demonstration of skills in software such as AutoCAD, Rhino, Revit, SketchUp, Adobe Creative Suite, Lumion, and others.
The Irrational City | Unseen Forces of Placemaking
The Irrational City | Unseen Forces of PlacemakingLeanne Munyori What if cities weren’t built for how people live—but for how planners think they should?
We explored Nairobi’s evolving urban form through the lens of behavioral economics and environmental psychology. The Irrational City challenges conventional planning paradigms by revealing how emotion, perception, and cognitive bias shape how we experience and respond to the built environment.
Drawing from principles of irrational decision-making, place attachment, and choice architecture, this talk questions:
– Why do some places feel safe, others alienating?
– How does infrastructure influence behavior, intentionally or not?
– Can we design cities not just for function, but for feeling?
From expressways to the feauture park, Nairobi offers a live case study in how unconscious design decisions affect well-being, identity, and belonging. This presentation is for architects, planners, designers, and anyone curious about cities as emotional ecosystems—not just physical ones.
An updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdfElle Geraghty To figure out if a content person is a junior, mid or senior, I always look at their ability to effectively measure their content work. Making content is one thing, but making content that performs is something else entirely.
19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accountshttps://sellsusa.com/product/buy-verified-cash-app-accounts/
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...
Venngage AI Infographic Generator- AI-powered visuals that turn your ideas in...Venngage AI Infographic Generator
Ad
Smarter Grids with Sass and Susy
- 1. SMARTER GRIDS WITH SASS AND SUSY
- 5. “I LIKE THE IDEA OF GRIDS ON DEMAND, RATHER THAN A STRICT FRAMEWORK.” Chris Coyier
- 7. SUSY IS A FRAMEWORK not an opinionated
- 8. ADVANTAGES
- 9. 1 (Relatively) easy to learn.
- 10. 2 No need to add multiple classes to your HTML.
- 11. 2 No need to add multiple classes to your HTML.
- 12. 3 Not an opinionated framework.
- 13. 4 Use as much or as little as you like.
- 14. “SUSY SOUNDS LIKE THE BEST THING EVER! HOW DO I GET STARTED?”
- 15. http://compass-style.org $ gem install susyTerminal require 'susy'config.rb @import "susy";screen.scss
- 18. HTML
- 19. SCSS
- 21. SCSS
- 24. SCSS
- 27. SCSS
- 30. SCSS
- 33. SCSS
- 34. SCSS
- 35. SCSS
- 36. SCSS
- 37. SCSS
- 39. 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