• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Adaptive theming using compass susy grid

Adaptive theming using compass susy grid



Adaptive theming in Drupal using Susy grid with SASS.

Adaptive theming in Drupal using Susy grid with SASS.



Total Views
Views on SlideShare
Embed Views



1 Embed 4

https://twitter.com 4



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Adaptive theming using compass susy grid Adaptive theming using compass susy grid Presentation Transcript

    • Adaptive Themingusing Compass + <Susy> gridMikhutkin AlexanderFrontend developer
    • Adaptive themingSCSS files structureSusy gridHTML в panels, views, panesResponsive images (module resp_img)Abstract classes, MixinsSite optimizationAbout
    • Adaptive themingAdaptive theming
    • Layout based on the proportions (fluid grid)Fluid mediaMedia queriesWhat we need?Adaptive theming
    • Basic principlesMobile FirstCode optimization- SASS, SCSS(CSS), HTMLImages optimizationAdaptive theming
    • Mobile FirstAdaptive themingMobile LastMobile 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 styleshere}@media only screen and (min-width: 1380px) {desktops styles here}Base styles for old phonesAdaptive theming
    • Fluid media - its simpleimg,video,iframe,object,embed {max-width: 100%;}Adaptive theming
    • baseie.scssmixins-vars outer-modules pages partialslayoutglobalresettabsvariablesmixinsmodulefrontsectionarticleheaderfooterblocksscreen.scssmaintenance.scssCSSfonts etc. etc.@import "compass"etc.SCSS files structure
    • Структура файлов в тмеSiteie.cssscreen.cssmaintenance .cssCCS structure upcoming to siteSCSS AggregateCSSGZIPSCSS 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#mainSusy grid
    • #page#main#sidebarUsage#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 CSSSusy 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 #navUsage nested elementsSusy 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 780pxmedia-layout: 780px 16; // Use 16-columnar layout with a minimum width of 780pxmedia-layout: 12 780px; // Use 12-columnar layout to a maximum width of 780pxmedia-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 valuesmedia-layout: 920px 16 780px; // The same as the previous one, the highest value is takenMedia LayoutsSusy 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 MixinsCSSSusy responsive gridat-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 gridResponsive MixinsSCSS@media (min-width: 780px) and (max-width: 920px) {CSSlayout
    • @include with-grid-settings (12, 35px, 15px, 15px) {#page {@include container;}}Responsive MixinsSusy responsive gridwith-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 PaddingsSusy 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-omegaSusy responsive gridReset mixins
    • and youll like ...Try itSusy responsive grid
    • "HTML5 in Drupal 7"Nathan SmithBLOCK.tpl.phpFIELD.tpl.phpREGION.tpl.phpVIEWS-VIEW.tpl.phpPAGE.tpl.phpAlleviate 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
    • StyleUse display default styleNo markup at allListNo styleRounded cornershttps://drupal.org/node/1814696PatchAlleviate HTMLRegions and View
    • DateОблегчаем HTMLFIELDSImageTimeTaxonomyTitleBodyLinkCustomize field HTMLCustomize label HTMLCustomize field and label wrapper HTMLAdd default classesTheme informationRow style outputAlleviate HTMLViews
    • Optimization of the whole siteOptimization
    • Page Speed https://developers.google.com/speed/pagespeed/?hl=ruYSlow http://developer.yahoo.com/yslow/WebPageTest http://www.webpagetest.org/OptimizationCheck the speed of the site
    • Tiny Png http://tinypng.org/ Jpegmini http://jpegmini.com/OptimizationOptimize images
    • Module Resp img https://drupal.org/project/resp_imgOriginal2000x1447 836 Kbimg { width: 100%; }CSS836 Kb<img src="../cat.jpg"/>Resp_img100 Kb220x160220x160Do not stretch the image with CSSOptimization
    • GZIPOptimizationCompress the data
    • <head></head>CSS<body></body><html></html>Page containerJSOptimizationCSS at the beginning of the file, JS at the end of the page
    • Reduce the number of HTTP requestsSpritesData URI background: url(data:image/png;base64,iVBO...Minimize count CSS and JSCacheOptimization
    • Resp img moduleResp img
    • Создание стиляStyle NameMachine nameThe suffix for the main styleThe minimum width of thescreenResp img
    • Minimal style for all imagesUpdating styles when the width ofthe browser windowНастройкиResp img
    • Добавление стиляBasic styleStyle NameResp img
    • Настройка стилейResp imgDrupal Image styles
    • Resp imgWhat we getResp imgDesktop TabletPhone Landscape Phone Portrait600 Kb300 Kb100 Kb75 Kb600 Kb75 Kb
    • A little bonusBonus
    • BonusAbstract 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;}
    • BonusMixins@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);}
    • BonusMixins@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 Alexanderalexander.mikhutkin@propeople.com.uaweareporpeople.com