Frontend Development in Magento 2: SASS, LESS, RequireJS and more

Frontend Development in
Magento 2

Arjen Miedema
twitter.com/arjenmiedema_nl | linkedin.com/in/arjenmiedemanl

- Ever used Magento’s RWD theme? Then you met SASS
- SASS !== LESS
- Requires NodeJS, easy to install
- Use variables, nested styles, functions, etc.
- Watch usefull tutorials online on YouTube
Less

nav {
margin: 50px auto 0;
width: 750px;
ul {
padding: 0;
margin: 0;
li {
display: inline-block;
&:hover {
background-color: #5e5b56;
}
}
}
}
Less

nav { margin: 50px auto 0; width: 750px; height: 45px; }
nav ul { padding: 0; margin: 0; }
nav ul li { display: inline-block; }
nav ul li:hover { background-color: #5e5b56; }
Less

//
// Primary button
// ---------------------------------------------
.action-primary {
.lib-button-primary();
.lib-css(border-radius, @button__border-radius);
}
Less

.lib-button-primary(
@_button-line-height: @button-primary__line-height,
@_button-width: @button-primary__width,
@_button-margin: @button-primary__margin,
@_button-padding: @button-primary__padding,
(..)
) {
.lib-button(
@_button-line-height: @_button-line-height,
@_button-width: @_button-width,
@_button-margin: @_button-margin,
@_button-padding: @_button-padding,
(..)
);
}
Less

.lib-css(
@_property,
@_value,
@_prefix: 0
) when (@_prefix = 1)
and not (@_value = '')
and not (@_value = false)
and not (extract(@_value, 1) = false)
and not (extract(@_value, 5) = false) {
-webkit-@{_property}: @_value;
-moz-@{_property}: @_value;
-ms-@{_property}: @_value;
}
Less

.example-button-4 {
.lib-button-primary(@_button-margin: 3px);
&:active {
box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
}
&.example-button-5 {
.lib-button-s();
color: #fff;
&:hover,
&.active {
color: #fff;
}
}
}
Less

RequireJS
- Magento now uses AMD (Asynchronous Module Definitions)
- Easily manage JavaScript dependencies
- Asynchronous loading === faster page load
- JavaScripts are not initialized via layout XML files
Thanks to Filip Svetličić (Watch on YouTube)

RequireJS
<html>
<head>

<script src="js/main.js" data-main="main"></script>
</head>
<body>
<div class="wrapper">
(...)
</div>
</body>
</html>

RequireJS
require.config({
baseUrl: 'js/lib',
paths: {
// the left side is the module ID,
// the right side is the path to
// the jQuery file, relative to baseUrl.
// Also, the path should NOT include
// the '.js' file extension. This example
// is using jQuery 1.9.0 located at
// js/lib/jquery-1.9.0.js, relative to
// the HTML page.
jquery: 'jquery-1.9.0'
}
});

RequireJS
require.config({
map : {
'*' : {
'jquery': 'js/jquery-1.12.0'
},
'jquery-bxslider' : {
'jquery': 'js/jquery-1.9.1'
}
}
});

RequireJS
<input id="search" data-mage-init= '{"quickSearch":{ "formSelector":"
#search_mini_form", "url":"http://magento2.dev/search/ajax/suggest/",
"destinationSelector":"#search_autocomplete"} }' type="text" name="q"
value="" placeholder="Search entire store here..." class="input-text"
maxlength="128" role="combobox" aria-haspopup= "false" aria-autocomplete= "
both" autocomplete="off"/>

RequireJS
{
"quickSearch": {
"formSelector":"#search_mini_form",
"url":"http://magento2.dev/search/ajax/suggest/",
"destinationSelector":"#search_autocomplete"
}
}
var config = {
map: {
'*': {
quickSearch: 'Magento_Search/form-mini'
}
}
};
Loads file: vendor/magento/module-search/view/frontend/web/form-mini.js

RequireJS
define([
'jquery',
'underscore',
'mage/template',
'jquery/ui',
'mage/translate'
], function ($, _, mageTemplate) {
'use strict';
// Here is all JavaScript to handle the search autocomplete
});

RequireJS
<script type="text/x-magento-init">
{
"*": {
"mage/cookies": {
"expires": null,
"path": "/",
"domain": ".www.mydomain.com",
"secure": false,
"lifetime": "3600"
}
}
}
</script>

RequireJS
<script type="text/x-magento-init">
"#main-container": {
"navigation": "{ navigation-json-configuration }",
"accordion": "{ accordion-json-configuration }"
},
"*": {
"pageCache": "{ page-json-configuration }"
}
</script>

More Information
Magento 2 & Less:
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-
preprocess.html
Magento 2 & RequireJS:
http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js-
resources.html
http://devdocs.magento.com/guides/v2.0/javascript-dev-
guide/javascript/js_init.html

Frontend Development in Magento 2: SASS, LESS, RequireJS and more

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Frontend Development in Magento 2: SASS, LESS, RequireJS and more

Similar to Frontend Development in Magento 2: SASS, LESS, RequireJS and more (20)

Recently uploaded

Recently uploaded (20)

Frontend Development in Magento 2: SASS, LESS, RequireJS and more