How to easy and fast create Drupal themes using on Sass && Susy
We will talk about
- Why I choose custom instead of contrib Drupal theme
- What are SASS, Compass and Susy
- How to install all of that
- Why Sass instead of css
- All about Susy
- How to use it with Drupal 7. Examples
#ledc2015
Why I choose custom instead of contrib Drupal theme.
#ledc2015
Sass (Syntactically Awesome Stylesheets) is a stylesheet language. Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
What are SASS, Compass and Susy.
#ledc2015
apt-get install ruby-full rubygems
gem install sass
gem install compass
gem install susy
sass -v
compass -v
How to install all of that
#ledc2015
- Variables and nesting
Why Sass instead of css
$primary-font-color: #575757;
$secondary-font-color: #000000;
body {
.some-first-class {
color: $primary-font-color;
}
.some-second-class {
color: $secondary-font-color;
}
}
/* line 6, ../sass/style.scss */
body .some-first-class {
color: #575757;
}
/* line 9, ../sass/style.scss */
body .some-second-class {
color: #000000;
}
#ledc2015
- Import
Why Sass instead of css
// _variables.scss
$primary-font-color: #575757;
$secondary-font-color: #000000;
// style.scss
@import 'variables';
body {
.some-first-class {
color: $primary-font-color;
}
.some-second-class {
color: $secondary-font-color;
}
}
/* line 6, ../sass/style.scss */
body .some-first-class {
color: #575757;
}
/* line 9, ../sass/style.scss */
body .some-second-class {
color: #000000;
}
#ledc2015
- Mixins
Why Sass instead of css
// _mixins.scss
@mixin like-a-button() {
padding: 10px 5px;
line-height: 24px;
font-size: 16px;
border: 1px solid #d6d6d6;
background: #ffffff;
color: #000000;
&:hover {
background: pink;
}
}
// style.scss
@import 'variables';
@import 'compass/css3';
@import 'mixins';
body {
.some-first-class {
color: $primary-font-color;
}
.some-second-class {
color: $secondary-font-color;
@include border-radius(10);
}
a.button {
@include like-a-button();
}
}/* line 6, ../sass/style.scss */
body .some-first-class {
color: #575757;
}
/* line 9, ../sass/style.scss */
body .some-second-class {
color: #000000;
-moz-border-radius: 10;
-webkit-border-radius: 10;
border-radius: 10;
}
/* line 13, ../sass/style.scss */
body a.button {
padding: 10px 5px;
line-height: 24px;
font-size: 16px;
border: 1px solid #d6d6d6;
background: #ffffff;
color: #000000;
}
/* line 9, ../sass/_mixins.scss */
body a.button:hover {
background: pink;
}#ledc2015
- Extend and inheritance
Why Sass instead of css
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}#ledc2015
All about Susy
#ledc2015
// _grids.scss
@import "susy";
$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: after,
container: 1260px,
debug: (
image: show,
color: #1095C2,
output: background,
)
);@include container();
@include push();
@include span();
@include gutter();
@include break;
@include gallery();How to use it with Drupal7.Examples
#ledc2015
compass create --using susy
// page.tpl.php
<main>
<?php if ($page['header']): ?>
<header id="header">
<?php print render($page['header']); ?>
</header>
<?php endif; ?>
<div id="content">
<div id="main-content">
<?php print $messages; ?>
<?php if ($title): ?>
<h1 class="title" id="page-title"><?php print $title; ?></h1>
<?php endif; ?>
<?php print render($page['content']); ?>
</div>
</div>
<footer id="footer">
<?php if ($page['footer']): ?>
<div id="footer-region">
<?php print render($page['footer']); ?>
</div>
<?php endif; ?>
</footer>
</main>
How to use it with Drupal7.Examples
#ledc2015
Header
Main content
Footer
How to use it with Drupal7.Examples
#ledc2015
Header
Left sidebar
Main content
Some text 1
Some text 1
Some text 1
Povered by Drupal
How to use it with Drupal7.Examples
#ledc2015
<main>
<header id="header">This is our header</header>
<div id="content">
<div id="main-content">
<div id="left-sidebar">Left sidebar</div>
<div id="content">Main content</div>
</div>
</div>
<footer id="footer">
<div id="footer-region">
<div class="left">Left column</div>
<div class="middle">Middle column</div>
<div class="right">Right column</div>
<div class="bottom">Powered by Drupal</div>
</div>
</footer>
</main>
How to use it with Drupal7.Examples
#ledc2015
How to use it with Drupal7.Examples
#ledc2015
main {
@include container();
header {
background: rgba(#FF7D4F, .7);
@include span(12);
}
#content {
#left-sidebar {
@include span(3 of 12);
background: rgba(#E3C5ED, .8);
}
#main-content {
@include span(9 last);
background: rgba(#A6F58C, .7);
}
}
footer {
.left, .middle, .right {
@include span(4 of 12);
background: rgba(#F5A68C, .7);
}
.right {
@include span(4 of 12 last);
}
.bottom {
@include span(12);
text-align: center;
background: rgba(#E3C5ED, .7);
}
}
}How to use it with Drupal7.Examples
#ledc2015
How to use it with Drupal7.Examples
#ledc2015
@import "compass/typography/vertical_rhythm";
@import "compass/reset";
$base-font-size: 22px !global;
$base-line-height: 33px !global;
$rhythm-unit: "px" !global;
$grid-background-baseline-color: red !global;
@include establish-baseline;
body {
@include debug-vertical-alignment;
}How to use it with Drupal7.Examples
#ledc2015
#ledc2015