Cover image for Magento 2 Theme Design - Second Edition

Magento 2 Theme Design - Second Edition

Author Richard Carter , Fernando J Miguel
Release Date: 2016/10/01
ISBN: 9781785888229
Topic:
0%
86
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Create stunning and responsive Magento 2 themes for your business

About This Book

  • Realize the full potential of theme design in Magento 2
  • Design attractive themes for your e-commerce store to make them stand out amongst the crowd
  • Practical skills and examples ensure you can take what you've learnt to your own projects ? limited only by your own creativity!

Who This Book Is For

This book is for web designers and developers with existing knowledge of CSS, HTML, and XML who wish to create themes for Magento 2. Existing Magento 1.x theme designers who now want to develop themes for Magento 2 will also find this book useful.

What You Will Learn

  • Implement a local development Magento environment
  • Understand the workings of the Magento theme structure
  • Edit an existing Magento theme to satisfy your business needs
  • Create print strategies for the Magento 2.0 theme
  • Generate specific blocks to improve the Magento 2.0 theme
  • Explore specific Magento programming Methods to improve the Magento 2.0 theme
  • Customize the Magento 2.0 admin panel to create a new Magento 2.0 admin theme
  • Build a Twitter module for Magento 2.0 and integrate Magento 2.0 with social bookmarking

In Detail

Magento is the e-commerce software and platform trusted by the world's leading brands. Using Magento's powerful theming engine, you can control the look, content, and functionality, and easily launch a flexible e-commerce website. However, because of its powerful features, developing Magento themes is easier said than done.

This book aims to leverage the enhancements to theme designing in Magento 2 to the fullest. It will show you how to gear up the performance of your e-commerce website.

We begin by introducing Magento 2 and its features along with implementing a local development Magento environment. We then move on to discuss the concepts of the Magento theme structure such as templates, inheritance, customization, and override.

Further on, we explore the Magento UI Library, which is a new feature available in Magento 2.0. We will create a new Magento 2.0 theme named MyCake Store using Magento Bootstrap from Maven E-commerce and also create print strategies for the Magento 2.0 theme. We will also create and customize a new theme proposal for the Magento admin panel. At the end, we will integrate Magento 2.0 to Twitter and integrate it with social bookmarking and finally deploy our new Magento 2.0 theme.

Style and approach

This is a step-by-step guide to customizing the look and feel of your online store by creating stunning and responsive themes from scratch. In addition to creating new themes, the book will also offer guidance on customizing existing themes.

Table of Contents

  1. Magento 2 Theme Design - Second Edition
    1. Magento 2 Theme Design - Second Edition
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Why subscribe?
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    7. 1. Introduction to Magento 2
      1. What is Magento?
        1. Magento 2's features
        2. Differences between Magento 1 and Magento 2
      2. Showcase of Magento themes
        1. Venroy
        2. Alcatel Onetouch
        3. Cultcha Kids
      3. Challenges of Magento 2 theme design
      4. Why create a custom Magento 2 theme?
      5. Installing Magento 2
        1. XAMPP PHP development environment
        2. XAMPP installation
        3. XAMPP for Windows installation
        4. XAMPP for Linux installation
        5. XAMPP for OS X installation
        6. Downloading Magento 2
      6. Summary
    8. 2. Exploring Magento Themes
      1. Magento terminology
        1. Magento vendors and themes
        2. Magento websites and Magento stores
      2. What makes a Magento theme?
        1. Unique aspects of a Magento theme
      3. Default Magento 2 themes
        1. Magento Luma theme
        2. Magento Blank theme
      4. Blocks and pages in Magento
      5. Magento theme inheritance
      6. Custom Variables
      7. Good practices in Magento theming
      8. Summary
    9. 3. Magento 2 Theme Layout
      1. Magento 2 and Model-View-Controller architecture
      2. Magento 2 Command-Line Interface
      3. Magento 2 theme files
      4. Magento 2 cache system
      5. Magento 2 layout system
      6. Creating your first Magento 2 theme
        1. Magento Modes
        2. Disabling Magento's cache
        3. Theme development
        4. Creating the static files directories
      7. Creating a theme logo
      8. Applying the theme
      9. Magento 2 theme debug
      10. Summary
    10. 4. Magento UI Library
      1. Magento 2 UI
      2. LESS and CSS preprocessing
        1. Custom variables
        2. Functions
        3. Mixins
        4. Operators
        5. Nestings
      3. LESS compilation in Magento 2
      4. The Magento UI library
      5. Testing the Magento UI library
      6. Summary
    11. 5. Creating a Responsive Magento 2 Theme
      1. The BookStore theme project
      2. Managing dependencies with Composer
        1. Installing Composer on Unix-like operating systems
        2. Installing Composer on Windows
      3. Building the BookStore theme
        1. Applying new CSS to the BookStore theme
        2. Creating the BookStore logo
        3. Changing your store's design
        4. Adding content with Magento CMS
        5. Displaying featured categories on the home page
      4. Developing Magento 2 templates
      5. Summary
    12. 6. Magento 2 Styles Debugging
      1. Increasing productivity by creating flow test styles
      2. Debugging styles in Magento
        1. Client-side debugging mode
        2. Server-side debugging mode
      3. Using the Grunt task runner to debug
        1. Installing Node.js on Linux
        2. Installing Node.js on Windows
        3. Installing Node.js on OSX
        4. Installing Grunt
        5. Testing Grunt
        6. grunt watch
      4. Applying changes to Bookstore with Grunt
      5. Summary
    13. 7. Magento UI Components
      1. The Magento UI components
      2. UI listing/grid component
      3. UI listing/grid secondary components
        1. Filter
        2. Pagination
        3. TreeMass action
        4. Column
        5. UI-select
        6. Multiselect
        7. Inline edit
        8. Bookmark
        9. Resize
        10. Sticky header
        11. Export button
        12. File uploader
      4. Form component
      5. UI components control definition file
      6. Magento sample module form
      7. Summary
    14. 8. Magento Layout Development
      1. The Magento page layout
      2. Layout instructions and types
        1. Extend and override a layout
      3. Layout customizations
        1. Set the page layout
        2. Managing static resources
        3. Working with static blocks
        4. Working with dynamic blocks
      4. Customizing templates
        1. Customizing templates with a new language
      5. Summary
    15. 9. Magento 2 JavaScript
      1. Magento 2 JavaScript structure
      2. Initializing and locating JavaScript component
        1. Initializing JavaScript
        2. Mapping the JavaScript resources
      3. Magento jQuery widgets
        1. Creating a Tabs widget
      4. Creating a jCarousel component for Promo module
      5. Summary
    16. 10. Social Media in Magento 2
      1. Magento components
      2. Development workflow
        1. Understanding the composer.json
      3. Developing the Sweet Tweet module
        1. The Twitter REST API
        2. The Twitter OAuth library
        3. The Module directory structure
        4. Coding the composer.json file
        5. Declaring the XML configuration files and registration.php
        6. Programming the controllers
        7. Programming the blocks
        8. Programming the Observer
        9. Programming the View layer
        10. Enabling the module
      4. Summary
    17. 11. Theme Development Best Practices
      1. Why I should worry about it?
      2. Best practices in Magento 2 development
      3. Always use the Magento architecture
        1. The Magento technology stack
        2. PHP standard recommendations
          1. PSR-1 – basic coding standards
          2. PSR-2 – coding style guide
          3. PSR-4 – autoloader
      4. Strategies for customizing your themes
      5. Seeking external resources to improve
        1. Community Magento
        2. The Magento 2 official repository
        3. The Magento blog
        4. Magento Stack Exchange
        5. Blogs about Magento development
          1. Inchoo
          2. Mukesh Chapagain
          3. Alan Storm
      6. Summary
    18. 12. Magento Theme Distribution
      1. The packaging process
      2. Packaging your theme
        1. Magento component validation
      3. Hosting your theme
        1. Hosting your project on GitHub and Packagist
        2. Hosting your project in a private repository
      4. Magento Marketplace
        1. Submitting your theme
      5. Summary
18.116.90.141