Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.
Code examples at: https://github.com/founddrama/vt-code-camp
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.
Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.
Code examples at: https://github.com/founddrama/vt-code-camp
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.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
Presentation for Webuquerque's November 2, 2011 event.
Practical examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones) including: image-free gradients and text shadows, attribute selectors, transitions and transforms, and media queries
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.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
Presentation for Webuquerque's November 2, 2011 event.
Practical examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones) including: image-free gradients and text shadows, attribute selectors, transitions and transforms, and media queries
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.
SCSS is a an extension of CSS that adds power and elegance to the basic language.
It helps keep large stylesheets well organized and get small stylesheets up and running quickly.
This recipe provides a structured approach for using SCSS Pre-processor for your web applications.
Features covered :
• Pre-processing
• Variables
• Nesting
• Partials
• Imports
• Mixins
• Inheritance
• Operators
This discussion will focus primarily on the two most popular CSS pre-processors, LESS and SASS. I will take some time to compare the two, by highlighting both their similarities and differences. Though these two “languages” share similar features, the compiler interprets them differently. Furthermore, certain functions and features are easier to execute in one language than the other. The goal of these comparison is to give the audience a feel for the syntax and to demonstrate how some of the features can be used in a practical way.
Moreover, further into the presentation we will take a deeper dive into the advance features of LESS and SASS. In this sections we will explore the latest features of both pre-processors and see how they work with popular 3rd party vendors and libraries. The audience will have a chance to learn about the frameworks and what makes these platforms so special!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way…
SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more.
Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint.
Key Takeaways :
- I will explain what SASS is and where you would use it.
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple Rich Text Editor Styles using mixins and includes.
- How to apply a Grid layout and make it Responsive.
- How to structure your branding correctly to make it more maintainable.
- How CSS 4 fits into the picture and does it make SASS obsolete?
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
This presentation is a hands-on workshop exploring a medley of client-side web technologies. Flexbox is a CSS layout model that may simplify what usually are very complex layouts. SASS is a CSS wrapper extension / preprocessor allowing CSS to me more maintainable and approachable. Mustache.js is an logicless HTML tool using JavaScript.
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer
CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way…
SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more.
Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint.
Key Takeaways :
- I will explain what SASS is and where you would use it.
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple Rich Text Editor Styles using mixins and includes.
- How to apply a Grid layout and make it Responsive.
- How to structure your branding correctly to make it more maintainable.
- How CSS 4 fits into the picture and does it make SASS obsolete?
With the advent of CSS-in-JS, the cascade is less and less relevant to developers, but there's a lot that stylesheets have to offer. In this presentation, Chris Eppstein discusses the new Stylesheet framework and optimizer that LinkedIn is building.
Is CSS a simple technology for non programmers? It certainly seems simple at first. Let's explore the boundaries of CSS and cover the ways in which those boundaries are changing and what that means for how we think about ourselves as CSS authors.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
2. You’re there for them. We’re here for you.
CHRIS EPPSTEIN FOLLOW ME ON TWITTER:
SOFTWARE ARCHITECT FOR CARING.COM @CHRISEPPSTEIN
3. HOLD ON TO YOUR HAT
WE’VE GOT A LOT TO LEARN. CSS HAS GROWN UP.
4. Today
Learn the Sass Syntax and features
Learn your way around a compass project
Overview of Compass Libraries
Style a webpage in minutes
Discover a new way of thinking about design
19. Sass: Numeric Units
Handles any unit (even EXAMPLES
those not yet defined in
CSS)
allows complex units in
intermediate forms
Understands
compatible units
44. Asset Helpers
stylesheet-url - url to assets stored in the
CSS directory
font-url - url to assets in the font directory
image-url - url to assets in the images directory
inline-image - embed an image
inline-font-files - embed a font file
http://compass-style.org/docs/reference/compass/helpers/urls/
45. CSS3
You’re going to hear a lot about CSS3 today.
It’s pretty cool.
But: It’s a #$%^@ mess.
Vendor prefix hell
Incompatible syntaxes
Graceful degradation / progressive enhancement
considerations
Buggy implementations
46. Prefix Hell
SIMPLE.
LIKE IT WILL BE.
ONLY NOW.
REALLY?
WHO DOES THIS?
WHAT A PAIN.
51. Browser Support
All Modern Browsers
Firefox 2
IE6 & 7
Exceptions are noted in the docs.
Compass ♥’s progressive enhancement
52. The Zen of Sass
‣ Beautiful Markup
‣ Stylesheets that you can
visualize
‣ Keep presentation in your
stylesheets.
‣ Find your own code style
‣ Build your own framework
‣ Don’t use what you don’t
like
53. Susy
Created by an Eric Meyer for Compass
Uses Natalie Down’s CSS Systems approach to
grids.
Can be elastic, fixed, or fluid.
Vertical Rhythm
Utilities
http://susy.oddbird.net/
54. Some Great Extensions
Lemonade - Sprite Generator
960.gs - The 960 grid system ported to Sass
Lightboxes - Pure CSS lightboxes
Slideshows - Pure CSS slideshows
Fancy Buttons - Pure CSS Button
Generator
BUILDING AN EXTENSION IS EASY!
57. Compass is Charityware
If you use Compass & Sass and they make your
life better, please help make someone else’s life
better by making a tax-deductible donation to the
United Mitochondrial Disease Foundation.
http://umdf.org/compass
59. Similar Projects
Less (Ruby, Javascript)
CSScaffold (PHP)
Turbine (PHP)
xCSS (PHP)
CleverCSS (Python)
Mechanical CSS (PHP)
HSS (Neko)
Editor's Notes
* graduated from Caltech in 2000
* 4 startups, F2E, UI Lead, UI Architect, etc
* First Employee of Caring.com in 5/2007
* Discovered Sass about 2 years ago when it was already 2 years old, created sass port of blueprint css framework, created compass, joined the Sass core team, Recently joined the blueprint core team (again)
CSS is a major front for the Browser War v2.0
Casualty of War: Front-End Developers
What do all of these new features have in common? They’re all about the browser -- None of them address how we author stylesheets.
CSS is a major front for the Browser War v2.0
Casualty of War: Front-End Developers
What do all of these new features have in common? They’re all about the browser -- None of them address how we author stylesheets.
* Sass is a stylesheet language - Built on the same primitives as CSS but with more expressiveness.
* Compass is a framework that uses sass to help you author your stylesheets by providing shared tools, libraries, and standards that help users share stylesheets with each other.
* Sass and Compass have Co-evolved over the past two years. Sass has existed for about 3.5 years.
Example of Sass in action.
“I thought Sass was supposed to make my stylesheets smaller?”
Sass excels at making implicit relationships explicit -- smaller is not the goal: easier to maintain is the goal. Often this results in a smaller file.
* Later today, you’ll hear from Nicole Sullivan, creator of OOCSS.
* The idea of class inheritance came from her.
* Nathan and I generalized it to selector inheritance and created the first complete implementation.
* I think that Sass is a great compliment to the OOCSS framework.
* Write colors how you think of them
* operate on colors in the hsl domain
* build themes from just a few base colors
* keep color relationships explicit
* Create mathematical expressions to simplify change.
There are other control flow directives like @for, @while but these have only marginal usefulness.
partials start with an underscore but the imports do not require the underscore. this facilitates converting to a partial.
partials do not generate css files
imports place the contents of the imported file at the point of import. imports make the mixins and global variables of the imports file available.
Use .sass instead of .scss
Completely interoperable
less noise: curly braces => indentation, ; => newline
@include => +, @mixin => =
* resets
* grids
* typography
Best practices and patterns that are proven to work across a range of browsers.
None of these are frameworks. They are libraries.
But it’s easier to make a new term than convince everyone to start calling them “css libraries”.
So Compass is a “Stylesheet Authoring Framework”
Or for the geeks: A Meta Framework (A framework for css frameworks -- we’ll get to this later)
You might want to drag this to your dock
Someday there will be a GUI. But until then, this really isn’t very hard to do.
* By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to.
* At any time, you can set “relative_assets = true” and you’ll be able to serve images off the local filesystem irrespective of your other settings.
timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
* By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to.
* At any time, you can set “relative_assets = true” and you’ll be able to serve images off the local filesystem irrespective of your other settings.
timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
This is the default, assets will be served root relative, via a web-server without specifying a host.
Sometimes you find out your app will be hosted in a folder.
a host may be specified by asset type.
You can specify the asset host for each asset.
Data urls let us embed assets directly in our stylesheets.
Good for small images like icons where HTTP overhead is large compared to file size.
Incurs encoding bloat: 33% uncompressed, 2-3% when gzipped,
Doesn’t work in IE6 & IE7
This is how the sausage is made. It’s not pretty but the finished product tastes pretty good. Compass is your CSS sausage factory.
But here’s the thing...
Ok, most of what’s in compass is pretty straightforward. You could have written it yourself if you wanted. But not this. This was hard to do. There are dozens of man hours in this bit.
Best practices, Battle tested, Updated regularly to reflect browser advancements. Your code remains the same.
Share libraries -- not just snippets on a blog post.