Drupal 8 rocks! (but our CSS & HTML sucks.) Drupal 8 ( CSS HTML )



Similar documents
Creating a Drupal 8 theme from scratch

Drupal 8 Theming. Exploring Twig & Other Frontend Changes CROWD. Communications Group, LLC CROWD. Communications Group, LLC

DESIGN RESPONSIVELY DRUPAL CAMP CT RESPONSIVE WEB DESIGN AND DRUPAL PROJECT. Monday, August 27, 12

Role profile. London. not applicable. not applicable. not applicable. not applicable. not applicable. Not required. No travel

Title: Front-end Web Design, Back-end Development, & Graphic Design Levi Gable Web Design Seattle WA

Designing for Drupal. John Albin Wilkins

Everything you ever wanted to know about Drupal 8*

A Short Term E-commerce Course

HOW TO CREATE THEME IN MAGENTO 2

FRONT END & UX WEB DEVELOPER

EXAM - M Magento Front End Developer. Buy Full Product.

Develop IBM i Mobile and Desktop Applications with a Single Code Base. BCD Software, LLC. All rights reserved.

Website design & development process

Bootstrap + Drupal Commerce in less than 45 minutes! by Jorge Diaz

Building a Drupal 8 Theme. with new-fangled awesomeness

Presentation. SharePoint Designer. A Presentation for the State of Colorado SharePoint User Group

Magento 1.4 Themes Design

SEARCH G2. Paul Taylor, Solutions Architect October 29, 2014

Full Stack Web Developer

JAVASCRIPT, TESTING, AND DRUPAL

Drupal and ArcGIS Yes, it can be done. Frank McLean Developer

An Advanced E-commerce Course

From 0 to Drupal in Six Months

DRUPAL Web Content Management (WCM) Cloud Solution. RFP Q&A Session Jan. 21, 2015

Connect Web Experience. Basel. Modular Front-End in AEM. Namics. Michael Kreis. Software Engineer. René Bach. Senior Frontend Engineer.

Mistral Joomla Template

Two New JavaScript Features in Drupal 6. AHAH and Drag and Drop (JavaScript so you don t have to)

Open Source Content Management System for content development: a comparative study

Site Audit ( /site_audit) Generated on Fri, 22 Aug :14:

Drupal 8 Theming Deep Dive

Imagine. Innovate. Create. Explore the world of Graphic & Web Design, Animation & Vfx!

38 Essential Website Redesign Terms You Need to Know

Technology Used: Drupal 7 HTML 4 & CSS MySQL 5 PHP 5 THE CHALLENGE

Content Management System (Comparison between Top- Three CMS Platforms)

GOVERNMENT SERVICES. Open Source Software Development Web Content Management Mobile + Web Apps

PRINCIPAL JAVA ARCHITECT JOB ID: WD001087

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Web Design Graphic Design Web Develpment

Drupal 8 The site builder's release

Responsive UX & UI Front End Developer

Certified PHP/MySQL Web Developer Course

FORTIS. User Guide. Fully responsive flexible Magento theme by Infortis. Copyright Infortis. All rights reserved

Changes Overview of View Layer in Magento 2

SizmekFeatures. HTML5JSSyncFeature

IGW+ Certificate. I d e a l G r o u p i n W e b. International professional web design,

Rethinking Online Code Editors for Supporting Time-based Web Documents

The easy way to a nice looking website design. By a total non-designer (Me!)

INTRO TO THEMING IN MAGENTO

The importance of Drupal Cache. Luis F. Ribeiro Ci&T Inc. 2013

Fusesix. Design Programming Development Marketing. Fusesix Web Services South Carolina, USA. Phone:

Drupal CMS for marketing sites

Kentico CMS 5 Developer Training Syllabus

Best Practices for Building Mobile Web

Migrating into Drupal 8

Drupal Training Modules 2015

Due to a period of rapid growth Made Media is recruiting for new roles in development, design, project and account management.

HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

The Agile Drupalist. Methodologies & Techniques for Running Effective Drupal Projects. By Adrian AJ Jones (Canuckaholic)

Simple Tips to Improve Drupal Performance: No Coding Required. By Erik Webb, Senior Technical Consultant, Acquia

FUNCTIONAL OVERVIEW VERSION: 1.0

Annex E - Capability Building Policy

Typography and Drupal. What does Drupal provide? Ashok Modi DDCLA 2011

JOB DESCRIPTION. To take design and developmental responsibility for the University s outward-facing web sites in liaison with the Web Manager.

FormAPI, AJAX and Node.js

JAVIER GONZÁLEZ. User Experience Designer and Information Architect

CLASSROOM WEB DESIGNING COURSE

SPHOL326: Designing a SharePoint 2013 Site. Hands-On Lab. Lab Manual

Offerte del 13 giugno 2014

Auditing Drupal sites for performance, content and optimal configuration

1: 2: : 3.1: 3.2: 4: 5: & CAPTCHA

Company Profile. Company Objectives

How To Fix A Bug In Drupal 8.Dev

Hello, I m Ryan Huber. I m currently the lead web developer and designer for a small team at Vanderbilt University.

Providing the Public with Data Visualization using Google Maps

SkaDate 9 Custom Template Creation Manual

Fidelity Joomla Theme

MASTER DRUPAL 7 MODULE DEVELOPMENT

Transcription:

Drupal 8 rocks! (but our CSS & HTML sucks.) Drupal 8! ( CSS HTML )

John Albin Wilkins Drupal 8 Mobile Initiative Lead Front-end Dev at Palantir.net

1993

The Drupal 8 Mobile Initiative

Mobile And Responsive Themes INIative

Mobile And Responsive Themes INIative

What will make Drupal mobilicious? Web Services Responsive Design Front-end Performance JavaScript CSS w/ SMACSS HTML5 form elements Assetic Responsive Images Mobile Administration

groups.drupal.org/mobile/drupal-8

Drupal 8 Demo With only one patch: https://drupal.org/node/1887800

The Drupal 8 {{ Twig }} Initiative

Template files No more.tpl.php!

Template files node.html.twig

<article class="{{ attributes.class }}" {{ attributes }}> {% if not page %} <h2>{{ label }}</h2> {% endif %} {# This is just a code comment. #} {% hide(content.comments) %} {{ content }} {{ content.comments }} </article>

<article class="{{ attributes.class }}" {{ attributes }}> {% if not page %} <h2>{{ label }}</h2> {% endif %} {# This is just a code comment. #} {% hide(content.comments) %} {{ content }} {{ content.comments }} </article>

<article class="{{ attributes.class }}" {{ attributes }}> {% if not page %} <h2>{{ label }}</h2> {% endif %} {# This is just a code comment. #} {% hide(content.comments) %} {{ content }} {{ content.comments }} </article>

<article class="{{ attributes.class }}" {{ attributes }}> {% if not page %} <h2>{{ label }}</h2> {% endif %} {# This is just a code comment. #} {% hide(content.comments) %} {{ content }} {{ content.comments }} </article>

<article class="{{ attributes.class }}" {{ attributes }}> {% if not page %} <h2>{{ label }}</h2> {% endif %} {# This is just a code comment. #} {% hide(content.comments) %} {{ content }} {{ content.comments }} </article>

Template files node.html.twig

Template files aggregator-feed-source.html.twig aggregator-item.html.twig aggregator-summary-items.html.twig block.html.twig book-all-books-block.html.twig book-export-html.html.twig book-navigation.html.twig book-node-export-html.html.twig color-scheme-form.html.twig comment-wrapper.html.twig comment.html.twig field.html.twig filter-caption.html.twig forum-icon.html.twig forum-list.html.twig forum-submitted.html.twig forum-topic-list.html.twig forums.html.twig link-formatter-link-separate.html.twig locale-translation-last-check.html.twig locale-translation-update-info.html.twig node-edit-form.html.twig node.html.twig overlay-disable-message.html.twig overlay.html.twig search-result.html.twig search-results.html.twig breadcrumb.html.twig datetime.html.twig html.html.twig install-page.html.twig maintenance-page.html.twig page.html.twig pager.html.twig region.html.twig system-plugin-ui-form.html.twig tablesort-indicator.html.twig taxonomy-term.html.twig user.html.twig views-exposed-form.html.twig views-more.html.twig views-view-field.html.twig views-view-fields.html.twig views-view-grid.html.twig views-view-grouping.html.twig views-view-list.html.twig views-view-mapping-test.html.twig views-view-row-rss.html.twig views-view-rss.html.twig views-view-summary-unformatted.html.twig views-view-summary.html.twig views-view-table.html.twig views-view-unformatted.html.twig views-view.html.twig views-ui-display-tab-bucket.html.twig views-ui-display-tab-setting.html.twig views-ui-view-preview-section.html.twig

Theme functions theme_image()

Theme functions theme_admin_block() theme_admin_block_content() theme_admin_page() theme_aggregator_block_item() theme_aggregator_page_opml() theme_aggregator_page_rss() theme_authorize_message() theme_authorize_report() theme_book_admin_table() theme_checkboxes() theme_comment_block() theme_comment_post_forbidden() theme_confirm_form() theme_container() theme_container() theme_date() theme_datelist_form() theme_datetime_form() theme_datetime_wrapper() theme_details() theme_dropbutton_wrapper() theme_exposed_filters() theme_feed_icon() theme_field() theme_fieldset() theme_field_multiple_value_form() theme_field_ui_table() theme_file_formatter_table() theme_file_icon() theme_file_link() theme_file_managed_file() theme_file_upload_help() theme_file_widget() theme_file_widget_multiple() theme_filter_guidelines() theme_filter_html_image_secure_image() theme_filter_tips() theme_form() theme_form_element() theme_form_element_label() theme_form_required_marker() theme_forum_form() theme_image() theme_image_anchor() theme_image_crop_summary() theme_image_formatter() theme_image_resize_summary() theme_image_rotate_summary() theme_image_scale_summary() theme_image_style() theme_image_style_effects() theme_image_style_list() theme_image_style_preview() theme_image_widget() theme_indentation() theme_input() theme_item_list() theme_language_negotiation_configure_browser_ form_table() theme_language_negotiation_configure_form() theme_links() theme_locale_translate_edit_form_strings() theme_mark() theme_menu_link() theme_menu_local_action() theme_menu_local_task() theme_menu_local_tasks() theme_menu_overview_form() theme_menu_tree() theme_more_link() theme_node_add_list() theme_node_preview() theme_node_recent_block() theme_node_recent_content() theme_node_search_admin() theme_picture() theme_picture_formatter() theme_picture_source() theme_progress_bar() theme_radios() theme_rdf_metadata() theme_select() theme_simpletest_result_summary() theme_simpletest_test_table() theme_status_messages() theme_status_report() theme_system_admin_index() theme_system_compact_link() theme_system_config_form() theme_system_date_format_localize_form() theme_system_modules_details() theme_system_modules_incompatible() theme_system_modules_uninstall() theme_system_powered_by() theme_system_themes_page() theme_table() theme_tableselect() theme_task_list() theme_textarea() theme_text_format_wrapper() theme_update_last_check() theme_update_manager_update_form() theme_update_report() theme_update_status_label() theme_update_version() theme_user_admin_permissions() theme_user_permission_description() theme_user_signature() theme_vertical_tabs()

Dream Markup drupal.org/node/1980004 https://drupal.org/sandbox/pixelmord/1750250 http://www.flickr.com/photos/35024384@n06/6894576799

Our CSS sucks. #our-css div.sucks

Architect our CSS https://drupal.org/node/1921610

Contributing == Sharing

Find your passion

Thank you! Follow me @JohnAlbin