SlideShare a Scribd company logo
1 of 46
Adaptive Theming
using Compass + <Susy> grid
Mikhutkin Alexander
Frontend developer
Adaptive theming
SCSS files structure
Susy grid
HTML в panels, views, panes
Responsive images (module resp_img)
Abstract classes, Mixins
Site optimization
About
Adaptive theming
Adaptive theming
Layout based on the proportions (fluid grid)
Fluid media
Media queries
What we need?
Adaptive theming
Basic principles
Mobile First
Code optimization- SASS, SCSS(CSS), HTML
Images optimization
Adaptive theming
Mobile First
Adaptive theming
Mobile Last
Mobile First
Media queries
@media only screen and (min-width: 480px) {
mobile styles here
}
@media only screen and (min-width: 768px) {
tablet portrait styles here
}
@media only screen and (min-width: 980px) {
tablet landscape, notebooks, some desktops styles
here
}
@media only screen and (min-width: 1380px) {
desktops styles here
}
Base styles for old phones
Adaptive theming
Fluid media - it's simple
img,
video,
iframe,
object,
embed {
max-width: 100%;
}
Adaptive theming
base
ie.scss
mixins-vars outer-modules pages partials
layout
global
reset
tabs
variables
mixins
module
front
section
article
header
footer
blocks
screen.scss
maintenance.scss
CSS
fonts etc. etc.
@import "compass"
etc.
SCSS files structure
Структура файлов в тме
Siteie.css
screen.css
maintenance .css
CCS structure upcoming to site
SCSS Aggregate
CSS
GZIP
SCSS files structure
Welcome, Susy
@import "susy";
Basic settings$total-columns: 12;
$column-width: 60px; // rem, em, %
$gutter-width: 20px; // rem, em, %
$grid-padding: $gutter-width;
require "susy";
Susy grid
Usage
#page {
@include $container;
}
#main {
@include $span-columns(8);
}
#sidebar {
@include $span-columns(4 omega);
}
#page
#sidebar#main
Susy grid
#page
#main#sidebar
Usage
#page {
@include $container;
}
#main {
@include $span-columns(8 omega);
}
#sidebar {
@include $span-columns(4);
}
Susy grid
#main {
width: 65.95745%;
float: left;
margin-right: 2.12766%;
display: inline;
}
#sidebar {
width: 31.91489%;
float: right;
margin-right: 0;
display: inline;
}
#page {
max-width: 980px;
_width: 980px;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}
#page:after {
content: "";
display: table;
clear: both;
}
Outputted CSS
Susy grid
#subheader {
@include $span-columns(8, 8);
}
#content {
@include $span-columns(6, 8);
}
#main#main {
@include $span-columns(8);
}
#nav {
@include $span-columns(2 omega, 8);
}
#subheader
#content #nav
Usage nested elements
Susy grid
#subheader {
width: 100%;
float: left;
margin-right: 3.22581%;
display: inline;
}
#nav {
width: 22.58065%;
float: right;
margin-right: 0;
display: inline;
}
Outputted CSS
#content {
width: 74.19355%;
float: left;
margin-right: 3.22581%;
display: inline;
}
Susy grid
media-layout: 12; // Use the 12 and column layout with the minimum width (980px in this case)
media-layout: 780px; // Use the next layout with a minimum width of 780px
media-layout: 780px 16; // Use 16-columnar layout with a minimum width of 780px
media-layout: 12 780px; // Use 12-columnar layout to a maximum width of 780px
media-layout: 920px 780px; // Use the layout between the values ​​of the nearest (to the lowest (820px))
media-layout: 780px 16 920px; // Use the 16-count. layout between the values
media-layout: 920px 16 780px; // The same as the previous one, the highest value is taken
Media Layouts
Susy responsive grid
SCSS
@include at-breakpoint (780px 12 920px) {
#page {
#content {
@include span-columns(8, 12);
}
}
}
#page {
@include container;
}
$total-columns: 16;
#page {
width: 100%;
float: left;
margin-right: 2.12766%;
display: inline;
}
@media (min-width: 780px) and (max-width: 920px) {
}
#page #content {
width: 65.95745%;
float: left;
margin-right: 2.12766%;
}
Responsive Mixins
CSS
Susy responsive grid
at-breakpoint
@include at-breakpoint (780px 12 920px) {
@include layout ( 6 ) {
#page {
//some stuffs
}
}
}
#page {
max-width: 500px;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}
}
#page:after {
content: "";
display: table;
clear: both;
}
Susy responsive grid
Responsive Mixins
SCSS
@media (min-width: 780px) and (max-width: 920px) {
CSS
layout
@include with-grid-settings (12, 35px, 15px, 15px) {
#page {
@include container;
}
}
Responsive Mixins
Susy responsive grid
with-grid-settings (columns, column width, gutter, padding)
with-grid-settings
.element { @include prefix(2); }
.element { @include suffix(2); }
Paddings
.element { @include pad(2, 3); }
.element { @include bleed(2); }
.element { @include pre(2); }
.element { @include post(2); }
Margins
.element { @include squish(2, 3); }
.element { @include push(2); }
.element { @include pull(2); }
Margins and Paddings
Susy responsive grid
.element { @include span-columns(6); }
Reset columns
.full-width .element { @include reset-columns; }
.element { @include span-columns(6 omega); }
Remove omega
.full-width .element { @include remove-omega; }
.element { @include remove-nth-omega(3n); }
Remove nth-omega
Susy responsive grid
Reset mixins
and you'll like ...
Try it
Susy responsive grid
ALLEVIATE
HTML
?
Alleviate HTML
"HTML5 in Drupal 7"
Nathan Smith
BLOCK.tpl.php
FIELD.tpl.php
REGION.tpl.php
VIEWS-VIEW.tpl.php
PAGE.tpl.php
Alleviate HTML
PAGE.tpl.php
<?php print render($page['content']);
BLOCK.tpl.php
<?php print render $content;
REGION.tpl.php
<?php print render $content;
FIELD.tpl.php
<?php print render ('items');
VIEWS-VIEW.tpl.php
много кода, все не влезло :(
Alleviate HTML
Style
Use display default style
No markup at all
List
No style
Rounded corners
https://drupal.org/node/1814696
Patch
Alleviate HTML
Regions and View
Date
Облегчаем HTML
FIELDS
Image
Time
Taxonomy
Title
Body
Link
Customize field HTML
Customize label HTML
Customize field and label wrapper HTML
Add default classes
Theme information
Row style output
Alleviate HTML
Views
Optimization of the whole site
Optimization
Page Speed https://developers.google.com/speed/pagespeed/?hl=ru
YSlow http://developer.yahoo.com/yslow/
WebPageTest http://www.webpagetest.org/
Optimization
Check the speed of the site
Tiny Png http://tinypng.org/ Jpegmini http://jpegmini.com/
Optimization
Optimize images
Module Resp img https://drupal.org/project/resp_img
Original
2000x1447 836 Kb
img { width: 100%; }
CSS
836 Kb
<img src="../cat.jpg"
/>
Resp_img
100 Kb
220x160
220x160
Do not stretch the image with CSS
Optimization
GZIP
Optimization
Compress the data
<head>
</head>
CSS
<body>
</body>
<html>
</html>
Page container
JS
Optimization
CSS at the beginning of the file, JS at the end of the page
Reduce the number of HTTP requests
Sprites
Data URI background: url(data:image/png;base64,iVBO...
Minimize count CSS and JS
Cache
Optimization
Resp img module
Resp img
Создание стиля
Style Name
Machine name
The suffix for the main style
The minimum width of the
screen
Resp img
Minimal style for all images
Updating styles when the width of
the browser window
Настройки
Resp img
Добавление стиля
Basic style
Style Name
Resp img
Настройка стилей
Resp img
Drupal Image styles
Resp img
What we get
Resp img
Desktop Tablet
Phone Landscape Phone Portrait
600 Kb
300 Kb
100 Kb
75 Kb
600 Kb
75 Kb
A little bonus
Bonus
Bonus
Abstract classes
%border-bottom {
border-bottom: 1px solid #ccc;
}
.news-item {
//... some rules
@extend %border-bottom;
}
SCSS CSS
.article h3 {
//... some rules
@extend %border-bottom;
}
.news-item,
.article h3 {
border-bottom: 1px solid #ccc;
}
Bonus
Mixins
@mixin sprite ( $sprite, $x, $y, $bgcolor: transparent ) {
background: $bgcolor url( $sprite ) no-repeat $x $y;
}
.facebook-icon {
//... some rules
@include sprite($sprite, 10px, 20px);
}
@mixin font-size ( $sizeValue: 14 ) {
font-size: ( $sizeValue ) + px;
font-size: ( $sizeValue / 16 ) + rem;
}
.news-item {
//... some rules
@include font-size(16);
}
Bonus
Mixins
@mixin links ( $color: #f37ad9, $hover: #9a9995, $dec: false) {
color: $color;
@if $dec == true {
text-decoration: underline;
&:hover {
color: $hover;
}
}
@if $dec == false {
text-decoration: none;
&:hover {
color: $hover;
}
}
}
.some-link {
//... some rules
@include links( #1794c8, #73e8b2);
}
Thank you for your attention!
Questions?
Reported:
Mikhutkin Alexander
alexander.mikhutkin@propeople.com.ua
weareporpeople.com

More Related Content

What's hot

GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatRachel Andrew
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?Rachel Andrew
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyArcbees
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid LayoutRachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS LayoutRachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
CSS3 meets GWT with GSS
CSS3 meets GWT with GSSCSS3 meets GWT with GSS
CSS3 meets GWT with GSSjdramaix
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenRachel Andrew
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
Open Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesOpen Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesEstelle Weyl
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASSJon Dean
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRachel Andrew
 
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoCSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoRachel Andrew
 

What's hot (20)

GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
CSS Grid vs. Flexbox
CSS Grid vs. FlexboxCSS Grid vs. Flexbox
CSS Grid vs. Flexbox
 
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
CSS3 meets GWT with GSS
CSS3 meets GWT with GSSCSS3 meets GWT with GSS
CSS3 meets GWT with GSS
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
CSS Grid Layout - All Things Open
CSS Grid Layout - All Things OpenCSS Grid Layout - All Things Open
CSS Grid Layout - All Things Open
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Next-level CSS
Next-level CSSNext-level CSS
Next-level CSS
 
Open Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesOpen Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable Features
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASS
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart OrlandoCSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart Orlando
 

Viewers also liked

Fancy Page with LaTeX
Fancy Page with LaTeX Fancy Page with LaTeX
Fancy Page with LaTeX Hirwanto Iwan
 
Lecture 1 particle view of matter
Lecture 1   particle view of matterLecture 1   particle view of matter
Lecture 1 particle view of matterChantel Davis
 
Apol 120 week 5
Apol 120 week 5Apol 120 week 5
Apol 120 week 5Jewell-LU
 
Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1
Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1
Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1PACKED vzw
 
Adobe InDesign CC with LaTeX
Adobe InDesign CC with LaTeXAdobe InDesign CC with LaTeX
Adobe InDesign CC with LaTeXHirwanto Iwan
 
Simfonia orhideelor
Simfonia orhideelorSimfonia orhideelor
Simfonia orhideelorkrizma
 
Engineering club presentation (072813) (modified)
Engineering club presentation (072813) (modified)Engineering club presentation (072813) (modified)
Engineering club presentation (072813) (modified)vazqueb
 
All That You Need to Know about a Startup
All That You Need to Know about a StartupAll That You Need to Know about a Startup
All That You Need to Know about a StartupDeena Zaidi
 
Unlocking the Central Banks
Unlocking the Central BanksUnlocking the Central Banks
Unlocking the Central BanksDeena Zaidi
 
Mybility by posso
Mybility by possoMybility by posso
Mybility by possoFlora Frate
 
Adel abouhana HRMS implementation
Adel abouhana HRMS implementationAdel abouhana HRMS implementation
Adel abouhana HRMS implementationAdel Abouhana
 
European grand prix (F-1 Race)
European grand prix (F-1 Race)European grand prix (F-1 Race)
European grand prix (F-1 Race)Jessica Ampater
 

Viewers also liked (18)

bacon.js
bacon.jsbacon.js
bacon.js
 
презентация
презентацияпрезентация
презентация
 
Fancy Page with LaTeX
Fancy Page with LaTeX Fancy Page with LaTeX
Fancy Page with LaTeX
 
Lecture 1 particle view of matter
Lecture 1   particle view of matterLecture 1   particle view of matter
Lecture 1 particle view of matter
 
Apol 120 week 5
Apol 120 week 5Apol 120 week 5
Apol 120 week 5
 
Gourmetbarna
GourmetbarnaGourmetbarna
Gourmetbarna
 
Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1
Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1
Cultuurforum 2016 Wikipedia: Een platform om levend erfgoed te documenteren 1
 
Adobe InDesign CC with LaTeX
Adobe InDesign CC with LaTeXAdobe InDesign CC with LaTeX
Adobe InDesign CC with LaTeX
 
Simfonia orhideelor
Simfonia orhideelorSimfonia orhideelor
Simfonia orhideelor
 
Engineering club presentation (072813) (modified)
Engineering club presentation (072813) (modified)Engineering club presentation (072813) (modified)
Engineering club presentation (072813) (modified)
 
Lx font
Lx fontLx font
Lx font
 
Qttc2
Qttc2 Qttc2
Qttc2
 
All That You Need to Know about a Startup
All That You Need to Know about a StartupAll That You Need to Know about a Startup
All That You Need to Know about a Startup
 
Unlocking the Central Banks
Unlocking the Central BanksUnlocking the Central Banks
Unlocking the Central Banks
 
Eureka!
Eureka!Eureka!
Eureka!
 
Mybility by posso
Mybility by possoMybility by posso
Mybility by posso
 
Adel abouhana HRMS implementation
Adel abouhana HRMS implementationAdel abouhana HRMS implementation
Adel abouhana HRMS implementation
 
European grand prix (F-1 Race)
European grand prix (F-1 Race)European grand prix (F-1 Race)
European grand prix (F-1 Race)
 

Similar to Adaptive theming using compass susy grid

Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Responsive web design
Responsive web designResponsive web design
Responsive web designBen MacNeill
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationCharlie Moad
 
Best Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsBest Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsRapidValue
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960LightSpeed
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive DesignValtech UK
 
Responsive grids overview
Responsive grids overviewResponsive grids overview
Responsive grids overviewdeWeb
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Wahyu Putra
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pagesNilesh Bafna
 
Building websites and leading librarians to a new level of project engagement
Building websites and leading librarians to a new level of project engagementBuilding websites and leading librarians to a new level of project engagement
Building websites and leading librarians to a new level of project engagementMarina Georgieva
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by MaqboolNavin Agarwal
 

Similar to Adaptive theming using compass susy grid (20)

Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
Best Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsBest Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue Solutions
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
Responsive grids overview
Responsive grids overviewResponsive grids overview
Responsive grids overview
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Building websites and leading librarians to a new level of project engagement
Building websites and leading librarians to a new level of project engagementBuilding websites and leading librarians to a new level of project engagement
Building websites and leading librarians to a new level of project engagement
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Responsive layouts by Maqbool
Responsive layouts by MaqboolResponsive layouts by Maqbool
Responsive layouts by Maqbool
 
CSS
CSSCSS
CSS
 
Responsive design
Responsive designResponsive design
Responsive design
 

Recently uploaded

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Recently uploaded (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

Adaptive theming using compass susy grid

  • 1. Adaptive Theming using Compass + <Susy> grid Mikhutkin Alexander Frontend developer
  • 2. Adaptive theming SCSS files structure Susy grid HTML в panels, views, panes Responsive images (module resp_img) Abstract classes, Mixins Site optimization About
  • 4. Layout based on the proportions (fluid grid) Fluid media Media queries What we need? Adaptive theming
  • 5. Basic principles Mobile First Code optimization- SASS, SCSS(CSS), HTML Images optimization Adaptive theming
  • 7. Media queries @media only screen and (min-width: 480px) { mobile styles here } @media only screen and (min-width: 768px) { tablet portrait styles here } @media only screen and (min-width: 980px) { tablet landscape, notebooks, some desktops styles here } @media only screen and (min-width: 1380px) { desktops styles here } Base styles for old phones Adaptive theming
  • 8. Fluid media - it's simple img, video, iframe, object, embed { max-width: 100%; } Adaptive theming
  • 9. base ie.scss mixins-vars outer-modules pages partials layout global reset tabs variables mixins module front section article header footer blocks screen.scss maintenance.scss CSS fonts etc. etc. @import "compass" etc. SCSS files structure
  • 10. Структура файлов в тме Siteie.css screen.css maintenance .css CCS structure upcoming to site SCSS Aggregate CSS GZIP SCSS files structure
  • 11. Welcome, Susy @import "susy"; Basic settings$total-columns: 12; $column-width: 60px; // rem, em, % $gutter-width: 20px; // rem, em, % $grid-padding: $gutter-width; require "susy"; Susy grid
  • 12. Usage #page { @include $container; } #main { @include $span-columns(8); } #sidebar { @include $span-columns(4 omega); } #page #sidebar#main Susy grid
  • 13. #page #main#sidebar Usage #page { @include $container; } #main { @include $span-columns(8 omega); } #sidebar { @include $span-columns(4); } Susy grid
  • 14. #main { width: 65.95745%; float: left; margin-right: 2.12766%; display: inline; } #sidebar { width: 31.91489%; float: right; margin-right: 0; display: inline; } #page { max-width: 980px; _width: 980px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } #page:after { content: ""; display: table; clear: both; } Outputted CSS Susy grid
  • 15. #subheader { @include $span-columns(8, 8); } #content { @include $span-columns(6, 8); } #main#main { @include $span-columns(8); } #nav { @include $span-columns(2 omega, 8); } #subheader #content #nav Usage nested elements Susy grid
  • 16. #subheader { width: 100%; float: left; margin-right: 3.22581%; display: inline; } #nav { width: 22.58065%; float: right; margin-right: 0; display: inline; } Outputted CSS #content { width: 74.19355%; float: left; margin-right: 3.22581%; display: inline; } Susy grid
  • 17. media-layout: 12; // Use the 12 and column layout with the minimum width (980px in this case) media-layout: 780px; // Use the next layout with a minimum width of 780px media-layout: 780px 16; // Use 16-columnar layout with a minimum width of 780px media-layout: 12 780px; // Use 12-columnar layout to a maximum width of 780px media-layout: 920px 780px; // Use the layout between the values ​​of the nearest (to the lowest (820px)) media-layout: 780px 16 920px; // Use the 16-count. layout between the values media-layout: 920px 16 780px; // The same as the previous one, the highest value is taken Media Layouts Susy responsive grid
  • 18. SCSS @include at-breakpoint (780px 12 920px) { #page { #content { @include span-columns(8, 12); } } } #page { @include container; } $total-columns: 16; #page { width: 100%; float: left; margin-right: 2.12766%; display: inline; } @media (min-width: 780px) and (max-width: 920px) { } #page #content { width: 65.95745%; float: left; margin-right: 2.12766%; } Responsive Mixins CSS Susy responsive grid at-breakpoint
  • 19. @include at-breakpoint (780px 12 920px) { @include layout ( 6 ) { #page { //some stuffs } } } #page { max-width: 500px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } } #page:after { content: ""; display: table; clear: both; } Susy responsive grid Responsive Mixins SCSS @media (min-width: 780px) and (max-width: 920px) { CSS layout
  • 20. @include with-grid-settings (12, 35px, 15px, 15px) { #page { @include container; } } Responsive Mixins Susy responsive grid with-grid-settings (columns, column width, gutter, padding) with-grid-settings
  • 21. .element { @include prefix(2); } .element { @include suffix(2); } Paddings .element { @include pad(2, 3); } .element { @include bleed(2); } .element { @include pre(2); } .element { @include post(2); } Margins .element { @include squish(2, 3); } .element { @include push(2); } .element { @include pull(2); } Margins and Paddings Susy responsive grid
  • 22. .element { @include span-columns(6); } Reset columns .full-width .element { @include reset-columns; } .element { @include span-columns(6 omega); } Remove omega .full-width .element { @include remove-omega; } .element { @include remove-nth-omega(3n); } Remove nth-omega Susy responsive grid Reset mixins
  • 23. and you'll like ... Try it Susy responsive grid
  • 25. "HTML5 in Drupal 7" Nathan Smith BLOCK.tpl.php FIELD.tpl.php REGION.tpl.php VIEWS-VIEW.tpl.php PAGE.tpl.php Alleviate HTML
  • 26. PAGE.tpl.php <?php print render($page['content']); BLOCK.tpl.php <?php print render $content; REGION.tpl.php <?php print render $content; FIELD.tpl.php <?php print render ('items'); VIEWS-VIEW.tpl.php много кода, все не влезло :( Alleviate HTML
  • 27. Style Use display default style No markup at all List No style Rounded corners https://drupal.org/node/1814696 Patch Alleviate HTML Regions and View
  • 28. Date Облегчаем HTML FIELDS Image Time Taxonomy Title Body Link Customize field HTML Customize label HTML Customize field and label wrapper HTML Add default classes Theme information Row style output Alleviate HTML Views
  • 29. Optimization of the whole site Optimization
  • 30. Page Speed https://developers.google.com/speed/pagespeed/?hl=ru YSlow http://developer.yahoo.com/yslow/ WebPageTest http://www.webpagetest.org/ Optimization Check the speed of the site
  • 31. Tiny Png http://tinypng.org/ Jpegmini http://jpegmini.com/ Optimization Optimize images
  • 32. Module Resp img https://drupal.org/project/resp_img Original 2000x1447 836 Kb img { width: 100%; } CSS 836 Kb <img src="../cat.jpg" /> Resp_img 100 Kb 220x160 220x160 Do not stretch the image with CSS Optimization
  • 35. Reduce the number of HTTP requests Sprites Data URI background: url(data:image/png;base64,iVBO... Minimize count CSS and JS Cache Optimization
  • 37. Создание стиля Style Name Machine name The suffix for the main style The minimum width of the screen Resp img
  • 38. Minimal style for all images Updating styles when the width of the browser window Настройки Resp img
  • 41. Resp img What we get Resp img Desktop Tablet Phone Landscape Phone Portrait 600 Kb 300 Kb 100 Kb 75 Kb 600 Kb 75 Kb
  • 43. Bonus Abstract classes %border-bottom { border-bottom: 1px solid #ccc; } .news-item { //... some rules @extend %border-bottom; } SCSS CSS .article h3 { //... some rules @extend %border-bottom; } .news-item, .article h3 { border-bottom: 1px solid #ccc; }
  • 44. Bonus Mixins @mixin sprite ( $sprite, $x, $y, $bgcolor: transparent ) { background: $bgcolor url( $sprite ) no-repeat $x $y; } .facebook-icon { //... some rules @include sprite($sprite, 10px, 20px); } @mixin font-size ( $sizeValue: 14 ) { font-size: ( $sizeValue ) + px; font-size: ( $sizeValue / 16 ) + rem; } .news-item { //... some rules @include font-size(16); }
  • 45. Bonus Mixins @mixin links ( $color: #f37ad9, $hover: #9a9995, $dec: false) { color: $color; @if $dec == true { text-decoration: underline; &:hover { color: $hover; } } @if $dec == false { text-decoration: none; &:hover { color: $hover; } } } .some-link { //... some rules @include links( #1794c8, #73e8b2); }
  • 46. Thank you for your attention! Questions? Reported: Mikhutkin Alexander alexander.mikhutkin@propeople.com.ua weareporpeople.com