Dynamically Sassy

Video thumbnail (Frame 0) Video thumbnail (Frame 1391) Video thumbnail (Frame 2377) Video thumbnail (Frame 2994) Video thumbnail (Frame 4211) Video thumbnail (Frame 5682) Video thumbnail (Frame 7480) Video thumbnail (Frame 8229) Video thumbnail (Frame 10083) Video thumbnail (Frame 11796) Video thumbnail (Frame 12732) Video thumbnail (Frame 14935) Video thumbnail (Frame 18215) Video thumbnail (Frame 18672) Video thumbnail (Frame 19607) Video thumbnail (Frame 19970) Video thumbnail (Frame 24275) Video thumbnail (Frame 24730) Video thumbnail (Frame 25528)
Video in TIB AV-Portal: Dynamically Sassy

Formal Metadata

Dynamically Sassy
Title of Series
Part Number
Number of Parts
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
When we want to offer customizability to the users of our applications, things can get tricky. How do we allow users to customize the look of the user interface while reusing the static CSS we’ve already designed? There is a way, but it is fraught with many dangers. Learn about the power of dynamically generating CSS from Sass files. Tackle the foes of dynamic content injection, rendering, caching, and background processing. In the end, we will look triumphantly at our ability to reuse our application styles to create customizable interfaces for our end users.
Suite (music) Computer animation Multiplication sign ACID output
Cache (computing) Word Context awareness Functional (mathematics) Process (computing) Identifiability Computer animation Content (media) output Cloud computing
Computer animation Web-Designer Remote procedure call
Block (periodic table) State of matter Multiplication sign Content (media) Drop (liquid) Graph coloring Product (business) Different (Kate Ryan album) Website Video game Text editor User interface Task (computing)
Default (computer science) Complex (psychology) Fluid statics Implementation Context awareness Process (computing) Computer animation Code Graph coloring Rule of inference Product (business)
Module (mathematics) Web page Functional (mathematics) GUI widget Computer file Mapping Cloud computing Computer font Variable (mathematics) Graph coloring Rule of inference Formal language Medical imaging Mathematics Programmschleife Loop (music) Computer animation Personal digital assistant Different (Kate Ryan album) Modul <Datentyp> Software testing Data structure Position operator Social class
Group action Context awareness Computer animation Computer file Personal digital assistant Cellular automaton Variable (mathematics) Graph coloring Metropolitan area network Computer architecture
Context awareness Functional (mathematics) Computer file Multiplication sign Electronic mailing list Set (mathematics) Cloud computing Variable (mathematics) Graph coloring Number Element (mathematics) Subject indexing Fluid statics Computer animation Data structure Spacetime
Dynamical system Functional (mathematics) Multiplication sign Set (mathematics) Parameter (computer programming) Graph coloring Number Formal language String (computer science) Compiler Endliche Modelltheorie Extension (kinesiology) Social class Scripting language Module (mathematics) Mapping Electronic mailing list Content (media) Maxima and minima Cloud computing Limit (category theory) Symbol table Type theory Pointer (computer programming) Computer animation Spacetime
Fluid statics Dynamical system Context awareness Computer animation Quicksort Template (C++)
Computer animation Cloud computing Product (business)
Dynamical system Context awareness Functional (mathematics) Greatest element Game controller Computer file Divisor Multiplication sign Execution unit Graph coloring Template (C++) Number Mathematics Computer configuration File system Social class Scripting language Key (cryptography) Content (media) Electronic mailing list Cloud computing Instance (computer science) Variable (mathematics) Linear multistep method Symbol table Type theory Message passing Computer animation Hash function Artistic rendering Quicksort
Computer animation Computer file Artistic rendering Cloud computing Error message Formal language
Fluid statics Computer animation Computer file Demo (music) Computer configuration Personal digital assistant Structural load Set (mathematics) Energy level Directory service
Computer animation Artistic rendering Graph coloring
the at the time and the end of right an afternoon everyone review and after lunch Suite of thank you for coming out of this town but only see a lot of talks on the status of some hope you'll find this 1 interesting because we're look at make it a little more dynamic I'm and to give you kind preview so really what we're 1 accomplish is take a assess style sheets in in a dynamic way taken user input from the client and be able to render out dynamic CSS so it's not so static but the sell sheet we might use the acid pipeline so what we're going
to talk about obviously word I Generate
dynamic CSS it's the topic for today and I can mention this is gonna be based on user input so we're gonna learn about writing sass functions in Ruby actually because we're going to have to figure out some way to get some dynamic content into a style sheet context and along the way will find that this may not be the most performant arousal then identify performance issues and think of ways that we can resolve and fix that so that means we probability caching and even maybe some background processing before we get
too far and URI I live in Tennessee in a very small town on or L probably on Twitter on
I work for a company called push agency we are a completely distributed teams on a remote web developer I do a lot of rails in JavaScript on the so back and Dyffryn die full-stack everyone column of so we don't quite work we
have this product called simply built it simply build is a website builder editor and you can have many websites as you want and you can edit your sites directly looking at them so we have a dragon drop interface for different blocks of content and can rearrange those blocks and edit them directly by the content editable at be that's available in HTML 5 so why am I bringing of simply built they were here about sass my picture product to you well maybe I think it's pretty awesome but this is related to the topic so earlier this year I was working on a task for simply build a new feature so at the
time simply built for your website you can select from a few things and then within each state you can select your color palette and that would determine what navigation color using what background colors we news text color etc. The we wanted offer that in a custom manner tour user wouldn't be stopped it just whatever pallets we have a naked customize and we wanted the user experience to be pretty nice so we don't wanna just have a color will and you select all your swatches and more than likely you're gonna get frustrated it's not gonna look at in your life so we thought let's let's let them pick a color from seed color and they will generate pallets based on some different color harmonies and that way we can let them customizable still generates something that's gonna look good for the website the so this is the problem that I was tasked with solving and so there were some
implementation issues that I had start to consider the 1st thing we already have the style sheets and reusing in in a static context so we have all these complex rules incest that determine what background color is used for which palette text color etc. what doesn't make sense to reimplement all this in duplicate code just for a dynamic context so we want to be put this in a manner where I can reuse the style sheet and both are static default context and in the of color context and that means were prominent the asset pipeline especially not production so we're gonna have to somehow get this to work from a controller and render out that way but will find that sense is a very quick it rendering especially when you get some pretty complex style sheets so we'll look at caching CSS and it maybe even rendering the worker and so these were the so the research I did in looking into to get this to work a simple bill and some implementation issues that I added up facing so
just as a quick introduction and I'm sure most of you or use assassin rails but just to let you get a feel for it if you've never seen before new assassin rails it syntactically Austin style sheets and sets the CSS preprocessed so it offers you some different syntax that looks like CSS but ideally is gonna make your job easier to write your CSS a more manageable maintainable way and here is just a a basic
overview Watson sass looks like so we have variables the nice thing about variables is if you have a certain font size text color you like using your style sheets instead of constantly duplicating over and over and send it to a variable and then we can use our variable throughout our styles and phonemic change all to do is change the value of variable we also have nested roles so with nested it allows you to avoid the whole the sender selectors the Senate selectors that can be super long and this way you can kind namespace your test roles but we can include other says stylesheets by the import keyword and that allows us to make our files more modular we can develop this style sheet over here to some widget this went to this web page so makes sense the kind like modules in Ruby I can create some rules that I know I will want to use in more than 1 class a selector and I can just include them and that helps avoid that sometimes you want to extract out some common class and you get add more classes to your mark to this so she can avoid that so
so what and I know this debate sometimes whether ceases preprocessing needed or not I really like it obviously gives you modularity I can separated out different widgets of pages and I can import them as needed and it helps me keep my style sheet more maintainable and obviously with makes sense the variables that helped enforce the DRY principle we also actually have data structures and scripting incest so it's a language and you can capitalize then use loops and what not to also help reduce repetitiveness in your CSS like a great example the background sprite image and you wanna set where the positioning is you can create a map which has a class 1 use for position actual background-position and loop over that generate new rules that way there's also color functions which is really helpful especially in this case with custom colors were I can take a color light darkened and then use that modified color in some way the and that sense alright so
let's get on to what we're really gonna talk about today so 1st thing is we wanna reuse the style sheets and we'll find out it's in the variables so we want to architecture follows in a way that we have some global variable that has In this case will see our palette of colors and it will import another followed his actions cells Ravenna reuse and so that imported file is going to depend on some global variable that needs to exist and is going to be able to use that man in generating the styles so
let's look at the static context worse so I have
3 sets policy at the top 1 that's going to be our simplified UI satisfy so we have this who selected with a background in the color notice recalling is it function so sass has lists I mentioned have data structures this power variables going to be a list so like you might guess by calling in on a list and has a number I'm going to grab that it element from the list you also notice it starts at 1 I'm so sass Lister's index starting at 1 so 0 so we go down to the next you files we have a power 1 C is a C assessment USC assess and you'll notice I'm sending a list there the first one the palate and I just use space delimiter cup of rapid parenthesis to make it more explicit what I'm doing you can use commas to 4 lists is gonna be consisting of red and green and I'm my UI file low that I have 2nd palette in setting again a palace but this time it's blue yellow and I'm importing the y so basically what that's gonna do I've set this global scope palate is defined by port this powers see that variable is gonna use that so already you can see how we can reuse the style sheets and static context
but we wanna start looking and dynamic context and this is horrible against ASR functions so here we have another so style
sheet this time upsetting palate equal to return type of this get dynamic power function and again I'm importing YUI so where is the dynamic power come from so sense of those models are script functions and any method you add to that module will make that method available as a function in your set style sheets and if you've ever programmed in a host language where you're defining some function for the target language you know you have to work in types that are the available in the host language so if you've written a c extension for Ruby before you know your C function it's it's not gonna return integers I can return a character pointer is gonna return a Ruby value type so the same idea applies here with Ruby incest the so walking through this function here were going to create a palette again I'm going to times maps as can be 2 colors and is generating 2 random hexadecimal strings and then I'm calling this uh function on this very long modules are spread value colors so underneath sass grip value exist all these types ancestors colors numbers lists etc. so color has this can be a class method called from max and obviously like you might guess it'll take a hexadecimal string and return this color value type so i'm gonna basically created array of 2 colors sass colors and they're at the bottom I'm going to pass it on to assess value list so it expects when I instantiated expects an array of sass value types and then the other parameter there which is the space symbol is basically stay this of the limiter I wanna use of my list OK so that's pretty cool we can get some type of dynamic content from Ruby and assess but what about
injecting data from a user because we want this to work somehow in the rails ecosystem where the climates request and we get back some dynamic CSS to them so I'm basically saying I
want get dynamic power from user somehow magically and how that work the and we
use the asset pipeline Moon not
exactly so we have sort of a quote unquote static context in the till template for sex rails so success
rails said so a jam that normally have bundled with here real that that gets sass running in the asset pipeline and it defines the still template which is responsible for rendering up assess and the were on a locked in whatever it's doing there we'd have to do some hackery to get it to work in a dynamic way like we'd like so that's not work 0 and
assets you their pre for production so the asset pipelines not work here the so we need
some sort of render class for dynamic content that we're going to have to write the
so this is worse ass anginal come to the rescue so assassin engine is
the actual injury you render out your CSS based on nest CSS assess assess template the so we'll have this ass custom palette class will define and the 1st thing we're going to define this template strain Hamilton acquisition it's not gonna change were really don't want throw another file on file system to read and just to reuse this in a dynamic context will just at this template concept and you'll notice there it's going to you calling get custom palettes function incest so we're taken a color or set as an instance variable Weber render method which is basically gonna delegate to assess injured passing the template the pass in some sass cut custom options we so there at the bottom what's up with these fast custom options so the 1st couple options pretty straightforward syntax of using more popular syntax people like and style expanded best just for pretty bring your CSS and then the last option notice it's called custom if you look assesses documentation they mention this is specifically what we need in this context if you want jackson for a custom the data here says style sheets and you pass it in there so I passing the hash is gonna basically have whatever our custom seed color it's so we need to define that get custom palettes a function remember we need Adam method to sass script functions so it's all pretty similar to what we did in the last example this time go notice that we're going to call this options method era pass in the custom key and the color piece of options available to you inside these fast methods fast methods some based on you know whatever data you injected so again we'll wrap that in the color they were going to create this factor variables so basically what I wanna do is add a great 20 per cent so I pass on to the number type 28 and then the % symbol which is for like here's my unit for this number and then I'm going to generate a palette where I'm gonna lighten the color by 20 % and then the other cultural darkened by 20 per cent and the light in that darkened functions those are built-in Cecil that's how they're available there as well and finally passed again into a list in return it so finally what we need to do is we gotta get this rendering from the controller so we instantiate a new class as soon prams custom color no we runner-up CSS we tried
out making HTTP requests at 0 sass syntax error file to import not founder unreadable so what happens only when you're work in a language you have to compile a render what you normally there is always a lot
and we forgot that so let's go back and
modify this because we need this load path because it needs to think in some sense it's just like a static style sheet in the asset pipeline so we're going to add in a new option to assess of some options Cologne paths and if you look at the method for were basically just in this case passing an array containing 1 directory which is ap assets style sheets include some that's rumble storm IUI file
so was try that out actually have a demo just can highlight this set of low level so what I have here
is pretty simple ever put together it's got the hello world text and I'm gonna pass in color and then it's going render that light and color as the background for Hello world and it'll make the text color world that darker