When you consider how flexible our layouts need to be to adapt to all the devices that use the web, it’s safe to say Responsive Design has become somewhat of a form of animation programming in its’ own unique right. Srcry (pronounced sorcery) is embracing this reality by introducing a means of behavioral scaling that allows developers to achieve more adaptable designs where it normally requires several media queries to come anywhere close to the same flexibility.
Srcry differs from other frameworks by focusing on scaling and functionality rather than UI libraries and grid systems. In total there’s 3 size libraries which are called box size, text size and line size as well as 2 configuaration classes called srcryBox and srcryTxt which make complex scaling extremely simple. This is all done with pure CSS using custom variables and can be easily integrated into your existing code.
What makes srcry the ultimate tool to add to your project is all the sizes are calculated based on the user’s screen and the golden ratio. This makes your designs balanced and aesthetic right out of the box minimizing the need to tweak at settings to make things look and feel right.
The golden ratio is present everywhere in nature and is what people instinctively judge by when deciding if a piece of artwork “looks good” or not. If the portions of the artwork are consistent with the portions they commonly see used in the natural world, the creator of that artwork is deemed a “good artist” because they created something in the same fashion as if nature had done it itself which we intuitively know is a high level of mastery. Another benefit this provides is even in the event of a layout breaking on some device, it will do so in a way that’s proportionate with the golden ratio which will still look and feel right to the user while still being functional and accessible rather than wonky and distorted.
Until this project becomes widely used enough to make available through a CDN you can just download the file and include it in your project then import it into your main CSS file as shown below.
@import url(path_to_folder/srcry.css);The box size library consists of 9 sizes which are micro, xTiny, tiny, xSmall, small, loMed, hiMed, large and jumbo. Each size has a scale and speed setting to make them adaptable and relative to the screen which gives you a fine tuned yet flexible means of defining your elements. It's best to regard a particular size as a range of multiple sizes rather than a static pixel size because what we consider large or small can vary from one device to another. To keep things simple, there’s a syntax for using these box sizes which goes as follows.
var(--[size]-[scale]-[speed])There are 2 scales and 11 speeds with 11 being the fastest so there’s not much to remember in order to use them. So for example you could define the size of an element as shown below.
.myClass{
width: var(--hiMed-2-7);
height: var(--small-1-4);
}This may be all you need for your element to scale and behave the way you wish but this becomes more powerful when used with the srcryBox class which we’ll cover later on in this document. There's a total of 198 scaling options and even though these sizes are adaptable they do have a set pixel size at their core which is shown in the table below.
| srcryBox size | core pixel size |
|---|---|
| micro-1-1 | 4px |
| micro-2-1 | 11px |
| xTiny-1-1 | 18px |
| xTiny-2-1 | 29px |
| tiny-1-1 | 47px |
| tiny-2-1 | 76px |
| xSmall-1-1 | 97px |
| xSmall-2-1 | 123px |
| small-1-1 | 157px |
| small-2-1 | 199px |
| loMed-1-1 | 256px |
| loMed-2-1 | 322px |
| hiMed-1-1 | 521px |
| hiMed-2-1 | 842px |
| large-1-1 | 1077px |
| large-2-1 | 1364px |
| jumbo-1-1 | 1744px |
| jumbo-2-1 | 2206px |
The text size library consists of 7 sizes that each have 5 speeds giving you a total of 35 scaling options to apply to your text. The 7 sizes are caption, widget, article, subtitle, title, headline and jumbotron. The syntax for using the text size library goes as follows.
var(--text-[size]-[speed])So if you wanted to use the article text on your element with a speed of 3 it would look like this.
.myClass{
font-size: var(--text-article-3);
}The line size library consists of 11 sizes which are fine, light, narrow, semiBold, bold, semiThick, thick, semiWide, wide, ultraWide and jumbo. There’s no scale or speed setting to these which makes them even simpler to use and the syntax goes as follows.
var(--line-[size])So if you want to add a narrow border to your element you would simply do the following.
.myClass{
border: var(--line-narrow) solid black;
}They even work well with defining box shadows which might look something like this.
.myClass{
border: var(--line-narrow) solid black;
box-shadow: 0 var(--line-semiBold) var(--line-thick) rgba(0, 0, 0, .65);
}The size libraries, though extremely useful on their own, are taken to the next level when used with the configuration classes. The configuration classes consist of custom properties that tie into a series of algorithms that do all the tedious calculating required for scaling your elements. As mentioned there’s only two which are called srcryBox and srcryTxt and all you have to do is add them to the class attribute of your HTML elements and define the custom properties in your own classes.
The srcryBox class provides a family of custom properties for defining the scaling behavior of your elements. These properties are called crushGap, baseSize, edgeChase, chaseStop, squishGrowth and stretchShrink. Each property is available for both the width and height which can be specified simply by adding w or h at the end of the property. When learning about the box size library you probably thought to yourself “what if I want the size of my element to be a size that’s somewhere in between two sizes?”. Srcry resolves this by providing each property with two additional nudging properties called nudge-slice and nudge-chunk which are optional. The nudge-slice is a very tiny portion that changes based on the size of the screen and a nudge-chunk is equivalent to 8 nudge slices. In order to understand this further we need to cover the purpose of each property and how they’re to be used.
The baseSize is the core size you want your element to be on the primary device you’re building your app or website to be used on. This can vary from project to project so you need to judge for yourself what would be best to use. If all else fails “mobile first” is a good rule of thumb to keep in mind.
The crushGap property applies to the size of the gap between the edges of your element and the edge of the screen rather than the size of your element. This property kicks in when the screen is too small for the baseSize to fit to prevent breaking the layout.
The edgeChase property is similar to crushGap except in regards to the amount of space there can be between the edge of the screen and the edges of the element before the element starts expanding to keep up with the screen. So in other words, the element starts ignoring the baseSize setting to chase the edges of the screen.
The chaseStop property defines the size your element can expand to before it stops chasing the edge of the screen. You can look at this property like a second baseSize.
The squishGrowth property makes your HTML element expand as the screen size gets smaller rather than shrinking. When applying it to the width the element will get wider as the height of the screen shrinks and when applied to the height the element will get taller as the width of the screen shrinks. Due to the way this property works you need to define a start, speed and max property for it to come together. The start property should be defined as a pixel size indicating the point at which the growth should begin as the screen gets smaller, so keep in mind that when a screen is smaller than this defined size this property will be active. The max property is the maximum size the element should expand to so it doesn’t continue to grow out of hand. The speed property defines how quickly the element should reach the maximum size defined.
The stretchShrink property is the opposite of squishGrowth. As the screen gets larger the element shrinks. If applied to the width the height of the element will get shorter as the width of the screen gets larger. If applied to the height the width of your element will shrink as the screen gets taller. Instead of having a max property the stretchShink uses a min property to prevent the element from shrinking out of view. The start property is the point at which the shrinking should begin to occur as the screen becomes larger. The speed setting works the same so there’s no need to reiterate.
Each of these properties are categorized as one of three behavior types which goes as follows.
The baseSize and chaseStop properties are considered stationary because the element stays at the defined size only adapting according to the speed setting of the size used.
The crushGap and edgeChase properties are considered reactive because the element breaks out of a stationary state to adjust with the size of the screen.
The squishGrowth and stretchShrink properties are considered counter reactive because they react against the scaling of the screen by either expanding as the screen shrinks or shrinking as the screen expands.
Now that you understand the purpose of each property lets look at some examples of how to use them in your code. First add the srcryBox class to your HTML element along with your own class name as follows
<div class="srcryBox myClass">
...
</div>If you want your element to have a base width of hiMed-1-6 and a base height of xTiny-2-3 you would do the following.
.myClass{
--baseSize-w : var(--hiMed-1-6);
--baseSize-h : var(--xTiny-2-3);
}Now lets say you want the height of your element just a little bit taller but hiMed-1-1 is bigger than you want and xTiny-2-4 scales up faster than you prefer. This is where the nudge property can be useful so you may want to do something like below.
.myClass{
--baseSize-w : var(--hiMed-1-6);
--baseSize-h : var(--xTiny-2-3);
--baseSize-h-nudge-slice : 5;
}If you look back at the table in the boxSize section you'll see the core pixel size of hiMed-1-1 is 521px. Most mobile screens are smaller than that in portrait view which means it will be too wide, this is where the crushGap property can be used. Lets say you only want a margin of roughly 10px on each side of your element assuming its' centered on the page. xTiny-1-1 has a core size of 18px which would leave you with a 9px margin on each side of your element. You would define it as demonstrated below.
.myClass{
--crushGap-w : var(--xTiny-1-1);
--baseSize-w : var(--hiMed-1-6);
--baseSize-h : var(--xTiny-2-3);
--baseSize-h-nudge-slice : 5;
}Now lets say when looking at your layout on a screen 800px wide and above your element starts to look a little smaller in proportion than you prefer. Lets say you don’t want any more than a 100px margin on each side of your element on each side. Looking at the chart we can see that small-2-1 has a core pixel value of 199px so we could use that size for the edgeChase to maintain that amount of space. Lets also say you don’t want your element to grow any larger than roughly 1300px, large-2-1 has a core size of 1364px so you could use that for the chaseStop property. Because we want our sizes to be flexible and stay in portion with the screen we can use a higher speed setting than 1 so lets go with 6.
.myClass{
--crushGap-w : var(--xTiny-1-1);
--baseSize-w : var(--hiMed-1-6);
--baseSize-h : var(--xTiny-2-3);
--baseSize-h-nudge-slice : 5;
--edgeChase-w : var(--small-2-6);
--chaseStop-w : var(--large-2-6);
}Now let's say if the screen size is smaller than 500px you want the element to get a little taller so the user can interact with it better using their fingers. Let’s also say you don’t want it to get any bigger than roughly 80px which is in range of tiny-2-1 and you want it to reach the maximum height fairly fast. This is where we can make use of the squishGrowth property.
.myClass{
--crushGap-w : var(--xTiny-1-1);
--baseSize-w : var(--hiMed-1-6);
--baseSize-h : var(--xTiny-2-3);
--baseSize-h-nudge-slice : 5;
--edgeChase-w : var(--small-2-6);
--chaseStop-w : var(--large-2-6);
--squishGrowth-h-start : 500px;
--squishGrowth-h-max : var(--tiny-2-1);
--squishGrowth-h-speed : 16;
}Let’s say once the screen reaches 1100px you want the height of it to get shorter as it will most likely be on a computer where the user is interacting through a mouse rather than a finger tip and around 20px or so is ideal. This is where we can make use of the stretchShrink property.
.myClass{
--crushGap-w : var(--xTiny-1-1);
--baseSize-w : var(--hiMed-1-6);
--baseSize-h : var(--xTiny-2-3);
--baseSize-h-nudge-slice : 5;
--edgeChase-w : var(--small-2-6);
--chaseStop-w : var(--large-2-6);
--squishGrowth-h-start : 500px;
--squishGrowth-h-max : var(--tiny-2-1);
--squishGrowth-h-speed : 16;
--stretchShrink-h-start : 1100px;
--stretchShrink-h-min : var(--xTiny-1-3);
--stretchShrink-h-speed : 1;
}The srcryBox class has one more property called bleed which is borrowed from the printing industry. The bleed on a printed document is pretty much a margin around the entire document where all the printable content should be contained. So if you have an element nested inside of an element that you want to have a consistent margin you could do the following.
.parentElement{
display : grid;
place-items : center;
width : 600px;
height : 600px;
}
.childElement{
display : block;
--baseSize-w : 100%;
--baseSize-h : 100%;
--bleed-scale : var(--micro-2-5);
}Below is a list of all available properties in the srcryBox class.
--crushGap-w
--crushGap-w-nudge-slice
--crushGap-w-nudge-chunk
--crushGap-h
--crushGap-h-nudge-slice
--crushGap-h-nudge-chunk
--baseSize-w
--baseSize-w-nudge-slice
--baseSize-w-nudge-chunk
--baseSize-h
--baseSize-h-nudge-slice
--baseSize-h-nudge-chunk
--edgeChase-w
--edgeChase-w-nudge-slice
--edgeChase-w-nudge-chunk
--edgeChase-h
--edgeChase-h-nudge-slice
--edgeChase-h-nudge-chunk
--chaseStop-w
--chaseStop-w-nudge-slice
--chaseStop-w-nudge-chunk
--chaseStop-h
--chaseStop-h-nudge-slice
--chaseStop-h-nudge-chunk
--squishGrowth-w-start
--squishGrowth-w-speed
--squishGrowth-w-max
--squishGrowth-w-max-nudge-slice
--squishGrowth-w-max-nudge-chunk
--squishGrowth-h-start
--squishGrowth-h-speed
--squishGrowth-h-max
--squishGrowth-h-max-nudge-slice
--squishGrowth-h-max-nudge-chunk
--stretchShrink-w-start
--stretchShrink-w-speed
--stretchShrink-w-min
--stretchShrink-w-min-nudge-slice
--stretchShrink-w-min-nudge-chunk
--stretchShrink-h-start
--stretchShrink-h-speed
--stretchShrink-h-min
--stretchShrink-h-min-nudge-slice
--stretchShrink-h-min-nudge-chunk
--bleed-scale
The srcryTxt class helps you easily format your paragraph text using a few custom properties. These properties are text-size, text-nudge-amt, kerning-nudge-amt and leading-nudge-amt. The purpose these properties serve goes as follows.
For setting the size of your text
For adjusting the size of your text in tiny increments to fine tune the perfect size.
For adjusting the spacing between the letters in your text.
For adjusting the line height of your text.
Even without setting the kerning or leading the srcryTxt class has default settings that do this automatically simply by applying the class to your paragraph elements. The way you go about using them goes as follows.
<p class="srcryTxt myClass">
...
</p>.myClass{
--text-size : var(--text-article-4);
--text-nudge-amt : 3;
--kerning-nudge-amt : 6;
--leading-nudge-amt : 11;
}Using srcry in your projects will give you finer control over your elements and how they scale. This allows you to save your media queries exclusively for drastic layout changes rather than taming your text and elements every few pixels. If you would like to become a contributor to this project feel free to join and share your code snippets to help other developers achieve awesome designs using this tool.