- What's your level of CSS experience
- Do you know any programming languages?
- What's the most complex thing you've done with SASS
- Each Meetup will be targeted to a specific skill level (Basic/Advanced) ideally with some hands-on time in sassmeister
- The meetup will start with a mini-demo of something at the opposite skill level of main content
- Then we jump into sassmeister.com and do some hands on
- After the meetup we'll grab a pint nearby
- Breakpoint Intro - http://sassmeister.com/gist/73a53395a4df14a38aab
- no-query support by class - http://sassmeister.com/gist/7b8dded03df82d92970c
- No query support by File - http://sassmeister.com/gist/df87e8fe8e5ba8985201
- Singularity - Setup Mobile First http://sassmeister.com/gist/47e5f7a46938110fca6f
- Singularity - 960gs http://sassmeister.com/gist/c0f9776f4a0e3fcc9fc8
- Singularity - Non symmetric Grid - http://sassmeister.com/gist/861018f358c9c61ea8d1
$breakpoint-no-query-fallbacks
%demo--base {
background-color: rgba(255,100,100, 0.5);
border: 2px dashed grey;
text-align: center;
padding-top: 5em;
padding-bottom: 5em;
margin-bottom: 1em;
}
header {
@extend %demo--base;
}
// Let's make a mixin to help style our demo blocks
@mixin demo($padding: 5em, $background-color:red ){
padding-top: $padding;
padding-bottom: $padding;
background-color: rgba($background-color, 0.5);
border: 2px dashed $background-color;
}
$background-color:red => :red is the default value, in case you aren't supplied a background-color.
@include demo() => uses padding 5em, background-color red
@include demo(10em, white) => uses padding 10em, background-color white
https://github.com/gerhardberger/eqjs
Eq.js is a JavaScript module, that let you do simple, deep and custom equalisations.
will need to use clear: left/right/both; otherwise your grids will push against each other.
https://github.com/Team-Sass/Singularity/wiki/Installation#singularity-demos
- isolation approach
- asymetric grid
flexbox => css3/4
There is susy but it doesn't support asymetric grids,
@include layout(3){
@include demo(4em, blue);
&:nth-child(3n+1) {
@include grid-span(1,1);
clear: both;
}
&:nth-child(3n+2) {
@include grid-span(1,2);
clear: both;
}
&:nth-child(3n+3) {
@include grid-span(1,3);
clear: both;
}
}
...aka newspaper columns
@include layout(5) {
.. five column layout
}
what is box-sizing?
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
and how singularity fixes it:
https://github.com/Team-Sass/Singularity/wiki/Output-Options#box-sizing-border-box
* {
@include box-sizing('border-box');
}