Wifi: TBD
Pass: TBD
Sass is a language construct to create CSS
It makes writing awesome CSS easier
Sass has TWO syntaxes:
.sass
and .scss
.sass
- whitespace sensitive
// .sass
.my-selector
font-size: 2em
background: #333
font-family: $monospace
// .scss
.my-selector {
font-size: 2em;
background: #333;
font-family: $monospace;
}
.scss
- superset of CSSWe'll be covering Sass basics using SassMeister.com
$blue: #00ff00;
$monospace: "Source Code Pro", "Courier New", monospace;
$default-fontsize: 1em;
$default-padding: 2 * $default-fontsize;
Sass lets you use variables to store values.
@function pixel-to-em($pixel, $font-size: 16px) {
@return $pixel / $font-size * 1em;
}
Functions return a single value, just like PHP or JS
// Define
@mixin button-make($color: #66B360) {
background-color: $color;
border: 2px solid lighten($color, 20%);
}
// Call
.button-one {
@include button-make;
}
// Call with arguments
.button-two {
@include button-make($color-facebook);
}
Mixins are similar to functions, except they return blocks of CSS.
// Sass
.message {
margin: 1em;
padding: 1em;
font-size: 1.2em;
}
.error {
@extend .message;
color: #060;
}
/* CSS */
.message, .error {
margin: 1em;
padding: 1em;
font-size: 1.2em;
}
.error {
color: #060;
}
Extendables allow you to build upon a common style.
style.scss
_variables.scss
// style.css
@import 'partials/variables';
/*
* This is a standard, multi-line comment
* that will appear in your final .css file
*
* Use multi-line comments to mark major headings or partials
*/
// Single-line comments will NOT appear in your final .css file
// Use single-line comments for developer notes
Generally, we leave a standard, multi-line comment on the top of each partial. This will help with debugging because we will always know what partial we are looking at.
Compass is a meta-framework for Sass
Provides useful mixins and functions
Includes plugin framework to allow
for community written extensions
HTML | CSS |
PHP | Sass |
Drupal | Compass |
Modules | Extensions |
ul {
@include pretty-bullets('bullet.png');
}
ul {
margin-left: 0;
}
ul li {
padding-left: 14px;
background: url('../img/bullet.png') no-repeat -12px -12px;
list-style-type: none;
}
In this case, the mixin allows the use of a "pretty" image for your bullets.
These are Ruby gems, just like Sass and Compass.
Toolkit bundles lots of this stuff together.
When working on different computers, developers, or even projects, there will always be an issue with ruby gems changing between different versions.
We want to make sure that we know which versions of each gem we are using to prevent compiling differences and errors. Bundler allows us to do just that. But first, we need to make sure we have Bundler installed:
gem install bundler
The Gemfile
that comes with the project will tell Bundler exactly what versions of what gems to use. Use the following command to create a Gemfile.lock
file within your theme to install gem dependencies you may not already have and to lock each gem version.
bundle install
From now on, instead of running "compass watch" or "compass compile", you can use:
bundle exec compass watch
And bundler will only use the gem versions selected within the .lock file
// If the window is at least 500px wide...
@media (min-width: 500px) { ... }
// If the window is less than 785px wide...
@media (max-width: 785px) { ... }
// If the user is printing the page...
@media print { ... }
// If the window is in between 520px and 699px...
@media all and (min-width: 520px) and (max-width: 699px) { ... }
Breakpoint is a Compass extension. It makes
media queries much easier to maintain.
$nav-lg: 680px;
.main-nav {
width: 100%;
@include breakpoint($nav-lg) {
width: 60%;
margin: 0 auto;
}
}
.main-nav {
width: 100%;
}
@media (min-width: 680px) {
.main-nav {
width: 60%;
margin: 0 auto;
}
}
Boil down most media queries to one simple value.
Assign that value a meaningful name.
You keep all the styles for a component in one place
Manage media queries by purpose and context.
Pass Breakpoint just a number and you get a min-width query.
// THIS IS OUR FIRST BREAKPOINT VARIABLE
$basic: 500px; // <-- YUP, THIS ONE
#main-nav {
width: 100%
@include breakpoint($basic) {
width: 75%;
}
}
#main-nav {
width: 100%
}
@media (min-width: 500px) {
#main-nav {
width: 75%;
}
}
Two values creates a min-width / max-width query.
$big-header: 330px 750px;
#header {
font-size: 2em;
@include breakpoint($big-header) {
font-size: 2.5em;
}
}
#header {
font-size: 2em;
}
@media (min-width: 330px) and (max-width: 750px) {
#header {
font-size: 2.5em;
}
}
If one value is a string, assume a feature/value pair
$too-damn-wide: max-width 1000px;
#hero-image {
max-width: 100%;
margin: 2em 0;
@include breakpoint($too-damn-wide) {
margin: 0.5em 0;
}
}
#hero-image {
max-width: 100%;
margin: 2em 0;
}
@media (max-width: 1000px) {
#fifty-seven-chevy {
margin: 0.5em 0;
}
}
String them together to create more complex queries
$tighten-text: (max-width 1000px) (orientation portrait);
#main-article {
font-size: 1em;
line-height: 1.375;
@include breakpoint($tighten-text) {
line-height: 1.25;
}
}
#main-article {
font-size: 1em;
line-height: 1.375;
}
@media (max-width: 1000px) and (orientation: portrait) {
#pappas {
line-height: 1.25;
}
}
Breakpoint can also output fallbacks for when no media queries are present, such as in IE<9
$breakpoint-no-query-fallbacks: true;
$nav-lg: 500px, 'no-query' '.lte-ie9';
nav {
@include breakpoint($nav-lg) {
width: 60%;
margin-right: 4%;
}
}
@media (min-width: 500px) {
nav {
width: 60%;
margin-right: 4%;
}
}
.lte-ie9 nav {
width: 60%;
margin-right: 4%;
}
Just add a conditional class to your <html>
element
Create a media query that will increase the body's font size when:
min-width
Create a media query that will change the color scheme when:
Output media queries in em
units.
Create a media query that will change to a third color scheme when:
max-height
in portrait*, *:before, *:after { @include box-sizing('border-box'); }
12 column grid
Each column is 60px wide
Each gutter is 20px wide
10px side gutter
960px Centered Container
$grids: 12; // Number of Columns
$gutters: 1/3; // Gutter to Column ratio, 20px/60px = 1/3
Out of the box, Singularity offers two output styles, float and isolation. The default output style is isolation, but we're going to change it float for now as it will be more familiar to begin with.
$output: 'float';
Align to columns using Grid Span:
@include grid-span($span, $position);
$span
is the number of columns to span
$position
is what column to start from
#container {
max-width: 960px; // Outer Container
padding: 0 10px; // Side Gutter
margin: 0 auto; // Center Container
@include clearfix; // Have container clear floats properly
}
.left {
@include grid-span(6,1);
}
.right {
@include grid-span(6,7);
}
Create a Basic Symmetric Grid
<article>
Attach Items to the Grid
Change Visual Order Without Changing Source Order
Grids should work with the content itself, not impose a class structure. We should not limit ourselves to a 12 column layout with four breakpoints.
Instead, let's design our sites around the content, creating awesome mobile-first layouts.
In short: We deserve better.
We are going to build and style
our grid based upon the content.
start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT! @stephenhay #bdconf
— Brad Frost (@brad_frost) April 16, 2012
This is the opposite of using a framework like
Twitter Bootstrap, where the grid is pre-defined.
Grids provide order to your design
and structure to your information.
The ideal grid is specific to your content and
your design, since it is an extension of both.
Within singularity you can create completely different grids for different breakpoints.
You can also customize each section of the site completely, creating sub-structure within a block of content.
Grids where the columns are not the same size
Custom grids for each design allow for more unique designs to better highlight your content
Singularity Extras is very useful when working with asymmetric grids
Custom - Any asymmetric grid created to suit your needs
Compound - Created by combining symmetric grids
Ratio - Each column is derived from the previous according to a ratio
Ratio Spiral - Columns are generated based on an overlaid spiral
Snap - Asymmetric grid that takes into account an overlaid symmetric grid's gutters
// List of column width in relation to each other
$grids: 5 2 3 3 7 9;
// List of symmetric grids to compound together
$grids: compound(3, 4);
// Ratio and number of columns
$grids: ratio(golden(), 4);
// Number of columns and ratio
$grids: ratio-spiral(5, golden());
// Asymmetric grid and the gutter width of the grid to snap to.
$grids: snap(2 4 4 2, 1/3);
Settings $grids and $gutters set a global context for them, making them available to use without redeclaring them each time they're needed.
You can set different global contexts to use at different min-width breakpoints
$grids: 12;
$grids: add-grid(2 8 2 at 500px);
$gutters: 1/3;
$gutters: add-gutter(1/4 at 532px);
When using the breakpoint mixin, Singularity is able to determine which global context you'd like and subsequently use the correct one when you use the grid-span mixin
$grids: 2;
$grids: add-grid(4 at 475px);
$gutters: 1/6;
#nav {
width: 100%;
@include breakpoint(500px) {
@include grid-span(3, 2);
}
}
If you need to override the global contexts, for instance if you need to nest a grid and therefore change the grid you're using, use the layout mixin
$grids: 12;
$gutters: 1/3;
#main {
@include grid-span(8, 1);
@include layout(8) {
.left {
@include grid-span(4, 1);
}
.right {
@include grid-span(4, 5);
}
}
}
Create a Ratio Based Grid
singularity-extras
to your Gemfile and install through Bundler. The version should be <1.0.0
.singularity-extras
in your config.rb
file and import singularity-extras
generators into your stylesheetsgrid-span
calls, they're going to break while we drastically change our gridsCreate a Medium Layout
min-width
to switch from one column to multiple columnsCreate a Large Layout
min-width
to switch from two columns to three columnsToolkit has been providing for us our box model fix and our fluid images, but it can do so much more
Designed not as a CSS Framework, but rather a set of tools to build your own, Toolkit makes doing things the right way the easy way
Provided by Toolkit by default, the basic way to get images to squish and maintain their dimensions is fairly easy CSS
img, video {
max-width: 100%;
height: auto;
}
But Embedded Content Isn't So Easy
Intrinsic Ratios are a CSS technique that allow you to constrain child elements to a ratio and percentage of its parent
// Intrinsic Ratio mixin comes from [Toolkit](https://github.com/team-sass/toolkit)
.ratio-16-9 {
@include intrinsic-ratio;
}
.ratio-4-3 {
@include intrinsic-ratio(4/3);
}
Create an Intrinsic Ratio for the Video
display: none
.Create a CSS Carousel
start
animationInline Media
min-width
and the point you go from one column to two columns, create a fenced query for inline mediaWe'd really appreciate your thoughts about today
so we can continue improving this course.