Magento Boilerplate Themes for Development

magento-1theme

Does anyone out there know of a good, clean boilerplate / blank / skeleton / naked theme (unsure of the proper term myself) besides the base/default? Not that it is bad, but sometimes another one may be more suited to a particular theme-cut job. It would be the Magento equivalent of this.

Best Answer

There are a few magento templates based on different HTML/CSS frameworks. But check the links. I'm no frontend developer and have therefore no idea, how good they are.

Related Solutions

Magento – magento2 theme development process step by step

Make sure you have inherit theme from parent theme luma.

Create theme directory app/design/frontend/MySite/MyTheme
Create theme.xml file under app/design/frontend/MySite/MyTheme and configure it using following content:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>New theme</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media><!-- media tag is optional -->
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

Add registration.php file in theme directory (MyTheme) and content of this would be

 <?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/MySite/MyTheme',
    __DIR__
);

Login to admin panel, Go to Store->Configuration->design. Select your theme and save it.
Refresh magento cache, it will work.

How to override/modify css file

You can modify the style(css) of your theme by 2 ways. Method 1 - By overriding _theme.less file in your theme. Method 2 - By including custom css file in your theme.

Method 1 - To overriding _theme.less file in your theme, you need to copy _theme.less file of your parent theme. Then add your style or override class/id of style sheet. Path of _theme.less file in your theme should be app/design/frontend/MySite/MyTheme/web/css/source/_theme.less.

Method 2 - Create new custom css file (mystyle.css) in your theme (app/design/frontend/MySite/MyTheme/web/css/mystyle.css). Then to include it in all pages, you need to modify default_head_blocks.xml file of Magento_Theme module. Extend the Magento_Theme module in your theme, and including the required stylesheets in this file. Your custom default_head_blocks.xml file path should be app/design/frontend/MySite/MyTheme/Magento_Theme/layout/default_head_blocks.xml. Content of your default_head_blocks.xml file should be like: -

<?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>
        <css src="css/styles-m.css" />
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print" />
        <css src="css/mystyle.css"/>
    </head>
</page>

Note: Clear your magento cache (Flush Magento Cache)

Magento – Magento 2 – Create New Theme based on the blank theme

To apply a custom theme please follow below steps

Create a theme directory

To create the directory for your theme:

Go to <your Magento install dir>/app/design/frontend.
Create a new directory named according to your vendor name: /app/design/frontend/<Vendor>.
Under the vendor directory, create a directory named according to your theme. (e.g. mytheme)

in theme directory structure looks like this

app/design/frontend/
├── <Vendor>/ (my)
│   │   ├──...<theme>/  (themename)
│   │   │   ├── ...etc
│   │   │   ├── ...media
│   │   │   ├── ...web
|   |   |   |    ├── ...css
|   |   |   |    ├── ...images
|   |   |   |    ├── ...js
│   │   │   ├── registration.php
│   │   │   ├── theme.xml

Declare your theme

Add or copy from an existing theme.xml to your theme directory

app/design/frontend//

Configure it using the following example:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>blank</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

Register your theme

in your theme directory add a registration.php file with the following content:

<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<Vendor>/<theme>',
    __DIR__
);

Where <Vendor> is your vendor name, <theme> is the theme code.

Configure Your theme

<your Magento install dir>dev\tools\grunt\configs\themes.js

    themename: {
        area: 'frontend',
        name: 'my/themename',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

flush your cache
apply your theme from admin Store > configuration > design

Best Answer

960gs

bootstrap

yaml

boilerplate

Related Solutions

Magento – magento2 theme development process step by step

Magento – Magento 2 – Create New Theme based on the blank theme

Related Topic