DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDevels)

•Download as PPTX, PDF•

1 like•1,223 views

Drupaltour

Presentation about SASS and Drupal themes. Презентація про SASS та Drupal теми.

Technology

What is SASS?
Syntactically
Awesome
Style
Sheets

Use @extend .base-class
as solution. #1 Example
2 31

#1 Example. Only one big CSS file
style.css
NO!!!

SASS used in a few frameworks
For example Rebar.io
Desktop
Mobile
Tablet

Architecture of Drupal Theme
Engine Base theme Sub-theme

Important files
*.info template.php *.tpl.php

Use Drush for creating
Omega sub-theme
drush omega-wizard
OR
drush omega-subtheme "My Theme"

Similar to DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDevels)

Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017

La Drupalera

Back in the Drupal 7 days (aka last year), we came across some pretty large, hard-to-maintain Drupal 7 sites. The theme was often responsible for a lot of the cruft. We saw themes with excess code, too many template files, and not enough documentation. The Drupal 8 theme layer provides new features like libraries and Twig blocks that can help us to build cleaner, better-organized themes. So now is a good time for themers to re-visit which theming techniques to use to create themes that are smaller, maintainable, and well organized.

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme

Suzanne Dergacheva

Joes sass presentation

JoeSeckelman

Building a Custom Theme in Drupal 8

Anne Tomasevich

April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization

Eric Sembrat

Structuring your CSS for maintainability: rules and guile lines to write CSS

Sanjoy Kr. Paul

Sass:-Syntactically Awesome Stylesheet by Shafeeq

DignitasDigital1

If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.

Intro to Sass for WordPress Developers

Suzette Franck

SCSS is a an extension of CSS that adds power and elegance to the basic language. It helps keep large stylesheets well organized and get small stylesheets up and running quickly. This recipe provides a structured approach for using SCSS Pre-processor for your web applications. Features covered : • Pre-processing • Variables • Nesting • Partials • Imports • Mixins • Inheritance • Operators

SCSS Implementation

Amey Parab

CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way… SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more. Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint. Key Takeaways : - I will explain what SASS is and where you would use it. - How to use SASS to brand SharePoint without requiring lengthy deployments. - How to create simple Rich Text Editor Styles using mixins and includes. - How to apply a Grid layout and make it Responsive. - How to structure your branding correctly to make it more maintainable. - How CSS 4 fits into the picture and does it make SASS obsolete?

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

Stefan Bauer

Bootstrap is one of the most popular digital (HTML, CSS and JS) frameworks used today. Because it makes front-end web development faster for any device and for projects of all sizes, many of the responsive mobile first applications you interact with daily were built on Bootstrap. Join this tech talk to learn how to create a Bootstrap theme for Drupal 8. We'll go through the process of creating a Bootstrap subtheme in Drupal 8, as well as how you can customize it to suit your site's design. The process will include: - Structuring your sub-theme files - Figuring out your mobile-first strategy - Using Compass to compile CSS from SCSS - Overriding Bootstrap variables & custom variables - Twig template file customization - Bootstrap options for Panels, Views, Display Suite

How to Create a Drupal 8 Theme Using Bootstrap

Acquia

Sass Essentials at Mobile Camp LA

Jake Johnson

1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors. Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on web page. 9. Include the CCS files. CSS Part 1 Styles' locations https://youtu.be/gw4tOnu4S8w CSS Part 2 Types of selectors by engineer & educator Osama Ghandour https://youtu.be/9Emyuiey-98 CSS Part 3 CSS Syntax https://youtu.be/-vQwT7uFTUY CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour https://youtu.be/ZuCCLeVvyW8 CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour https://youtu.be/8c0Z5cej03o CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour https://youtu.be/H4VnXlW9Ik8

Css week10 2019 2020 for g10 by eng.osama ghandour

Osama Ghandour Geris

CSS: a rapidly changing world

Russ Weakley

Elegant CSS Design In Drupal: LESS vs Sass

Mediacurrent

Less(CSS Pre Processor) Introduction

rushi7567

LESS(CSS Pre Processor) introduction

rushi7567

Drupal: Content Management and Community for your Library

guest5e78e

Intermediate Web Design

mlincol2

Sass - basic to advance

Vinita Swamy

Similar to DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDevels) (20)

Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme

Joes sass presentation

Building a Custom Theme in Drupal 8

April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization

Structuring your CSS for maintainability: rules and guile lines to write CSS

Sass:-Syntactically Awesome Stylesheet by Shafeeq

Intro to Sass for WordPress Developers

SCSS Implementation

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

How to Create a Drupal 8 Theme Using Bootstrap

Sass Essentials at Mobile Camp LA

Css week10 2019 2020 for g10 by eng.osama ghandour

CSS: a rapidly changing world

Elegant CSS Design In Drupal: LESS vs Sass

Less(CSS Pre Processor) Introduction

LESS(CSS Pre Processor) introduction

Drupal: Content Management and Community for your Library

Intermediate Web Design

Sass - basic to advance

More from Drupaltour

DrupalTour. Lviv — Bumpy road of Drupal7 (Pavel Shevchuk, EPAM)

Drupaltour

DrupalTour Lviv — Theming in Drupal8 (Ivan Tibezh, InternetDevels)

Drupaltour

DrupalTour. Lviv — Apache solr. Advanced use cases (Artem Sylchuk, InternetDe...

Drupaltour

DrupalTour. Rivne — SEO & Usability (Roman Demydyuk and Oleg Shykhalov, Inter...

Drupaltour

DrupalTour. Rivne — Drupal 8 (Ivan Tibezh, InternetDevels)

Drupaltour

DrupalTour. Zhytomyr — Entity API in Drupal 7 (Ivan Tibezh, InternetDevels)

Drupaltour

DrupalTour. Zhytomyr — Створення інтернет-магазину на базі Drupal (Sergiy Skr...

Drupaltour

DrupalTour. Zhytomyr — Drupal Optimization (Dmitry Kinakh, InternetDevels)

Drupaltour

DrupalTour. Khmelnytskyi — Ember (Timur Bolotyuh, stfalcon.com)

Drupaltour

DrupalTour.Chernivtsi — Як написати якісний модуль для Drupal 7 (Taras Tsuper...

Drupaltour

DrupalTour. Vinnytsia — Борьба с нагрузкой на MySQL (Andrey Leshchuk, LetyShops)

Drupaltour

DrupalTour. Khmelnytskyi — Why Drupal? (Andrij Sakhaniuk, InternetDevels)

Drupaltour

DrupalTour. Ternopil — What's going on when you visit an URL (Andrij Sakhaniu...

Drupaltour

DrupalTour. Chernivtsi — Think different або кUxня cучасного веб дизайну (Pa...

Drupaltour

DrupalTour. Khmelnytskyi — Про блог сайти (Olexander Kuzava, InternetDevels)

Drupaltour

DrupalTour. Ternopil — Drupal shell or just Drush (Serhii Puchkovskii, Intern...

Drupaltour

Composer is an application-level dependency manager for the PHP programming language that provides a standard format for managing dependencies of PHP software and required libraries. Composer - це пакетний менеджер рівня додатків для мови програмування PHP, який надає засоби з управління залежностями в PHP-додатку.

DrupalTour. Chernivtsi — Composer (Sergiy Skripchuk, InternetDevels)

Drupaltour

DrupalTour. Chernivtsi — Як спростити життя Web-розробнику (Olexander Kuzava,...

Drupaltour

DrupalTour. Ivano-Frankivsk — Dark side of the Drupal (Artem Sylchuk, Interne...

Drupaltour

More from Drupaltour (19)