How to deal with styles in Magento 2
We all know, Magento 2 introduced a new framework for frontend styling with less and grunt.
All the shiny new technologies, we learned to love for our frontend development in Magento 1
and it has a built-in compiling process, too — doesn’t this sound stellar?
In this talk we'll investigate why it could be good or why bad, to learn this new Magento 2 framework,
instead of trying to bend the system to the process we're comfortable with.
// ---- | |
// Sass (v3.4.4) | |
// Compass (v1.0.1) | |
// ---- | |
$list: 10px, 15px, 20px; | |
@function getListEntry ($list, $index) { | |
@if length($list) >= $index { | |
@return nth($list, $index); |
{ | |
"theme": "default", | |
"minifyCss": true, | |
"uglifyJS": true, | |
"bless" : { | |
"useImport": false | |
}, | |
"bootstrap": { | |
"js": [ | |
"bower_components/bootstrap/js/transition.js", |
%div.grid__container | |
%div.grid__row | |
%div.grid__col.grid__col--xs-2 | |
foo | |
%div.grid__col.grid__col--xs-2 | |
foo | |
%div.grid__col.grid__col--xs-4 | |
foo | |
%div.grid__col.grid__col--xs-2 | |
foo |
(function ($) { | |
var moduleLauncher = { | |
oSettings: { | |
prefix: 'js_', | |
moduleRegister: [], | |
debug: false | |
}, | |
/** | |
* Method to print out debug information |
<?php | |
/** @var Mage_Cms_Model_Block $oLoadedCmsBlock */ | |
$oCmsBlockModel = Mage::getModel('cms/block')->setStoreId($aBlockData['stores'])->load($aBlockData['identifier']); | |
$bDoesStoreMatchCurrentBlockStore = $aBlockData['stores'] === (int)$oCmsBlockModel->getStoreId()[0]; | |
if($oCmsBlockModel->getId() && $bDoesStoreMatchCurrentBlockStore) { | |
// update block | |
$oCmsBlockModel->setContent($aBlockData['content']); | |
} else { | |
// save new block |
/** @var Mage_Cms_Model_Page $oMagePageModel */ | |
$oMagePageModel = Mage::getModel('cms/page'); | |
foreach ($aHomePageTeaserContent as $iStoreId => $sHomePageTeaserContent) { | |
$iPageId = $oMagePageModel->checkIdentifier('home', $iStoreId); | |
$oPage = $oMagePageModel->load($iPageId); | |
$sPagePrevContent = $oPage->getContent(); | |
$oPage->setData('stores', array($iStoreId)); |
(function (getSettings) { | |
/** | |
* change standard behavior to not wrap code into <p>-tag | |
* and add some html5 tags | |
* | |
* @param mMode | |
* @returns {object} | |
*/ | |
tinyMceWysiwygSetup.prototype.getSettings = function (mMode) { | |
var oSettings = getSettings.call(this, mMode); |
<?php | |
class Project_Customer_Helper_Install extends Mage_Core_Helper_Abstract | |
{ | |
/** | |
* @param string $sEntityIdentifier | |
* @param string $sAttributeIdentifier | |
* @param string $sSortOrder | |
* @throws Mage_Core_Exception | |
*/ |
After 10 years of handcrafting web design and frontend coding, I started heavily working with javascript, css preprocessors and Magento about 4 years ago. Starting as a junior frontend developer at a big company, I made my way through smaller design agencies as a technical project lead, frontend concept engineer, designer and developer. As a trained designer and mainly self-learned frontend coder, I really enjoy the powers of both worlds and love to combine them to make awesome projects. Nowadays I work as a frontend lead developer for e-commerce projects at Sitewards. I love contributing to open source projects and community work in general because of the huge amount of power which a community can share. My strengths are solving structural issues with HTML and stylesheets, writing ass kicking styles, developing user interfaces in javascript and I’m also good at designing user interfaces for apps and shops.