27

Some of you probably read that topic regarding theming from scratch for Magento 1: Theming - starting from scratch

I was wondering, what would be the best practice to develop a theme from scratch for Magento 2 ?

  • Do you build using the native luma or blank theme ? Or anything else ?
  • Do you use any extension to help you develop your theme ?
  • Which steps do you follow when developping a theme from scratch ?
43
+50

TL:DR

Do you build using the native luma or blank theme ? Or anything else ?

This is up to you, declaring a parent theme is optional. If you don't declare a parent you will still fallback to the modules (e.g Magento_Catalog) which provide XML and template files but no styling.

Do you use any extension to help you develop your theme ?

As I prefer working with SCSS and GULP I now use Frontools and the SCSS blank theme. It removes a lot of the stress of dealing with the default Grunt/LESS worflow.

Which steps do you follow when developping a theme from scratch ?

  1. Declare the theme
  2. Remove parent theme CSS (if required)
  3. Add your own CSS/LESS/SCSS

My personal opinion is it's best to create your own 'blank theme' from scratch as you can tailor this to be exactly what you need.

This is how I would create a theme from scratch, I have used NewStore/default as my vendor and theme name.

Now for the more detailed answer...

Create the theme (as per official docs)

Create the theme as per the official docs

Optionally declaring a parent

Within app/design/frontend/NewStore/default/theme.xml you have the choice of declaring a parent theme or not, for this example I have left out line 3 (<parent>Vendor/theme</parent>) so there is no parent theme. This means all templates/layout files will be coming from the modules themselves and not Blank or Luma, and there will no theme styling as this is added in the blank theme.

My theme.xml looks like this:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>NewStore default</title>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Remove styling (if you set a parent theme) and add your own CSS

If you do set blank or Luma as a parent you will need to prevent the CSS files from loading. To do this create app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xml and add the following XML:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <!-- Remove blank/luma theme styling if you declared a parent -->
        <remove src="css/styles-m.css" />
        <remove src="css/styles-l.css" />
        <remove src="css/print.css" />

        <!-- Add your own CSS files -->
        <css src="css/styles.css" />
    </head>
</page>

This removes styles-m.css, styles-l.css and print.css added by the blank theme. It also adds styles.css as a base for your own CSS.

If you did not specify a parent you can remove the 3 <remove /> tags in the code above.

Add your own CSS

You can now style up your theme however you please, I'm a fan of Sass rather than LESS so I added this file - app/design/frontend/NewStore/default/web/css/styles.scss

I changed the background colour in here just to prove this works, ideally you'd only use this file for importing other Sass/Less files.

Result

The result of what I've just done is a theme with no styling (apart from my beautiful green background) allowing you to style up your theme without working with Magento's (sometimes difficult to work with) styling.

enter image description here

Tips

  • If you prefer to work with SCSS and don't have the time to create a theme from scratch I recommend using Frontools and the SCSS blank theme both by Snowdog Apps.

  • I find the most frustrating aspect to working with Magento's front-end code is how specific their styling is, to help avoid this I'd recommend using the BEM naming convention when writing your own styling.

  • Also helpful comments are key, if a dev used to working with Luma/Blank worked on a theme built from scratch they'd probably find things work quite differently to what they expect.

  • I have created my own blank theme using your instructions, without a parent theme defined in the theme.xml. However, There are still all sorts of styles visible in the front end. The Magento installation is in developer mode and all caches have been cleared. I don't know where all these styles come from - do you have an idea? – fritzmg Dec 20 '17 at 13:22
  • Do you have any extensions/plugins installed? It could also be Varnish if that's installed, to rule that out add a question mark and a random string after the URL, such as ?=123 – Ben Crook Dec 20 '17 at 13:36
  • Yeah I have ruled out Varnish (or similar). There are no extensions or plugins installed. – fritzmg Dec 20 '17 at 14:14
  • Is it the full theme styling or just parts of it? It's hard for me to say without seeing the site and codebase. Maybe ask a new question and post some details there? If you tag me I'll see if I can work it out. – Ben Crook Dec 20 '17 at 14:22
  • It's the full theming as far as I can see. Plus the included CSS file from my own theme. Yeah, it's probably better to create a new question for this :) – fritzmg Dec 20 '17 at 14:41
8

There are a lot of tutorials are there for starting a theme in Magento 2.0. I am providing some video links and some normal links where you can get a good knowledge about the theme development in magento 2.0. click here for video

take reference from this links also

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

From this link you will be learning about the frontend architecture of magento 2.0

http://inchoo.net/magento-2/frontend-theme-architecture/

also check these two links

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1

5

I Inherit from blank but am swiftly moving towards trying to create a more lightweight base theme that has a much less complex CSS structure.

It is worth noting that, in 2015, Magento have come out and said that they do not recommend inheriting from luma as they reserve the right to make unannounced changes to it for their own marketing and demo purposes. They later revised that statement by saying it's their goal to allow inheriting.

3

The best way to start developing a theme is to start with inheriting from either luma or blank. The reason for this is because they are built to be responsive(i.e. multi-resolution friendly). It also reduces the amount of work you have to do in creating the different template files and JS/CSS definitions. All you have to do is just override only the pieces you want to customize with your own. See links below for different instructions on how to develop a theme.

Magento Documentation Links:

  • The template files now come from the modules and not blank/luma, so you can affectively bypass them if you don't require the styling/changes. For example if you take a look at app/design/frontend/Magento/blank/Magento_Catalog all it does is move one element and add some styling, the templates are coming from app/code/Magento/Catalog/view/frontend/templates and app/code/Magento/Catalog/view/base/templates – Ben Crook May 2 '16 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.