SASS based version of Magento 2 Blank theme

SNOW.DOG

Last update: Dec 5, 2022

Related tags

Miscellaneous sass theme magento magento2 magento2-theme hacktoberfest

Overview

Magento 2 - Blank theme - SASS version

SASS based version of Magento 2 Blank theme, which aims to be as close to the core code as possible.

Installation

Add this to your project dependecies list composer require snowdog/theme-blank-sass
Set you application to developer mode
Run bin/magento setup:upgrade to register theme
Compile SASS files using Frontools or tools of choice

Compatibility

Magento 2.4: v1.5.0 or later
Magento 2.3: v1.2.0 or later
Magento 2.2: v1.0.0 or later
Magento 2.1: v0.11.0 or older
Magento 2.0: v0.6.0 or older

Bug reports and contribution rules

Before reporting an issue, check if you can reproduce it on the clean Magento instance with LESS version of the Blank theme. If that's true, submit issue to the Magento 2 repository, not here
If you know how to fix an issue, which is reproducible in Magento core, submit PR to the core product first, then here, with a link to PR in Magento 2 repository
If issue is related only to the SASS port, feel free to submit issue or PR

Questions

If you want to know more about this project, let's join Magento Community Engineering Slack and ask questions on #magefront channel.

Comments

Custom Theme Development

I installed theme-blank-sass and front tools easily, and created a themes.json

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["en_US"]
  },
  "zymo": {
    "src": "vendor/gigasavvy/theme-frontend-zymo",
    "dest": "pub/static/frontend/Gigasavvy/zymo",
    "locale": ["en_US"],
    "stylesDir": "styles",
    "postcss": ["plugins.autoprefixer()"],
    "parent": "blank"
  }
}

I'm just super confused on how to override blank theme styles.

Is there a boiler plate file where I easily change colors, borders, etc that I'm missing?

I know this isn't an issue, I'm just not sure where else to ask.

opened by crantron 18

Theme fallback doesn't work

Hi I extend snowdog/blank in a theme and try to override _typography.scss (actually any file) but it still uses the the file in vendor/snowdog/blank theme .

Can you please help?
bug

opened by vphat28 17
Email styles are missing

For now we don't have email.css, email-linline.css and email-fonts.css http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/templates/template-email.html#non-inline-styles
bug

opened by Igloczek 14
[BUGFIX] Fix @extend an outer selector from within @media

Fixes #87

This fixes two erros with Error: You may not @extend an outer selector from within @media..(https://github.com/SnowdogApps/magento2-theme-blank-sass/issues/87#issuecomment-372298221).

opened by marvinhuebner 11

Error with @extend inside @media

error vendor/magento-ui/_utilities.scss (Line 31: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .abs-add-clearfix-desktop" on line 239 of ../../Magento_Sales/css/source/_module.scss.

got this running sass --watch styles.scss:styles.css, is that b/c of the sass version I am using?

bug

opened by weilunallen 10

Fotorama alignment issues

I'm having trouble with the fotorama gallery and alignment. In our store images differ in proportions per category and Fotorama does not respect this. The alignment is off. This is not the case with the default luma theme. It seems like the problem is related to the div fotorama__stage which gets a height by the js.

Is there any setting to make Fotorama adjust to the image?

opened by zamson 9
Magento 2.1 support
Hey, we will have to do extensive testing, but it would be good to support the latest version ofcourse.

Diff:

[x] composer.json

[x] etc/view.xml

[x] i18n/en_US.csv

[x] Magento_AdvancedCheckout/web/css/source/_module.less

[x] Magento_AdvancedCheckout/web/css/source/_widgets.less

[x] Magento_Banner/web/css/source/_widgets.less

[x] Magento_Braintree

[x] Magento_BraintreeTwo

[x] Magento_Bundle/web/css/source/_module.less

[x] Magento_Catalog: layout

[x] Magento_Catalog/web/css/source/_module.less

[x] Magento_Catalog/web/css/source/_widgets.less

[x] Magento_Catalog/web/css/source/module/_listings.less

[x] Magento_Catalog/web/css/source/module/_toolbar.less

[x] Magento_CatalogEvent/web/css/source/_module.less

[x] Magento_CatalogEvent/web/css/source/_widgets.less

[x] Magento_CatalogSearch/web/css/source/_module.less

[x] Magento_Checkout: layout

[x] Magento_Checkout/web/css/source/module/_cart.less

[x] Magento_Checkout/web/css/source/module/_minicart.less

[x] Magento_Checkout/web/css/source/module/checkout/_authentication.less

[x] Magento_Checkout/web/css/source/module/checkout/_checkout.less

[x] Magento_Checkout/web/css/source/module/checkout/_estimated-total.less

[x] Magento_Checkout/web/css/source/module/checkout/_fields.less

[x] Magento_Checkout/web/css/source/module/checkout/_modals.less

[x] Magento_Checkout/web/css/source/module/checkout/_order-summary.less

[x] Magento_Checkout/web/css/source/module/checkout/_payment-options.less

[x] Magento_Checkout/web/css/source/module/checkout/_payments.less

[x] Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

[x] Magento_Checkout/web/css/source/module/checkout/_shipping-policy.less

[x] Magento_Checkout/web/css/source/module/checkout/_shipping.less

[x] Magento_Checkout/web/css/source/module/checkout/_tooltip.less

[x] Magento_Cms/web/css/source/_widgets.less

[x] Magento_Customer: layout

[x] Magento_Customer/web/css/source/_module.less

[x] Magento_Downloadable/web/css/source/_module.less

[x] Magento_GiftCard/web/css/source/_module.less

[x] Magento_GiftCardAccount: layout

[x] Magento_GiftCardAccount/web/css/source/_module.less

[x] Magento_GiftMessage/web/css/source/_module.less

[x] Magento_GiftRegistry/web/css/source/_module.less

[x] Magento_GiftWrapping/web/css/source/_module.less

[x] Magento_GroupedProduct/web/css/source/_module.less

[x] Magento_Invitation/web/css/source/_module.less

[x] Magento_LayeredNavigation/web/css/source/_module.less

[x] Magento_Msrp/web/css/source/_module.less

[x] Magento_MultipleWishlist/web/css/source/_module.less

[x] Magento_MultipleWishlist/web/css/source/_widgets.less

[x] Magento_Multishipping: layout

[x] Magento_Multishipping/web/css/source/_module.less

[x] Magento_Newsletter/web/css/source/_module.less

[x] Magento_Paypal/web/css/source/module/_paypal-button.less

[x] Magento_Paypal/web/css/source/module/_review.less

[x] Magento_ProductVideo/web/css/source/_module.less

[x] Magento_Reports/web/css/source/_widgets.less

[x] Magento_Review/web/css/source/_module.less

[x] Magento_Reward/web/css/source/_module.less

[x] Magento_Rma/web/css/source/_email.less

[x] Magento_Rma/web/css/source/_module.less

[x] Magento_Sales/web/css/source/_email.less

[x] Magento_Sales/web/css/source/_module.less

[x] Magento_SendFriend/web/css/source/_module.less

[x] Magento_Theme/layout: default.xml

[x] Magento_Theme/layout/default_head_blocks.xml

[x] Magento_Theme/web/css/source: module

[x] Magento_Theme/web/css/source/_module.less

[x] Magento_Vault

[x] Magento_VersionsCms/web/css/source/_widgets.less

[x] Magento_Weee/web/css/source/_module.less

[x] Magento_Wishlist/web/css/source/_module.less

[x] web/css/email-fonts.less

[x] web/css/print.less

[x] web/css/source: _dropdowns.less

[x] web/css/source: _rating.less

[x] web/css/source/_actions-toolbar.less

[x] web/css/source/_buttons.less

[x] web/css/source/_components.less

[x] web/css/source/_email-base.less

[x] web/css/source/_email-extend.less

[x] web/css/source/_extends.less

[x] web/css/source/_forms.less

[x] web/css/source/_icons.less

[x] web/css/source/_layout.less

[x] web/css/source/_loaders.less

[x] web/css/source/_navigation.less

[x] web/css/source/_pages.less

[x] web/css/source/_popups.less

[x] web/css/source/_price.less

[x] web/css/source/_reset.less

[x] web/css/source/_sources.less

[x] web/css/source/_tables.less

[x] web/css/source/_tooltips.less

[x] web/css/source/_typography.less

[x] web/css/source/_variables.less

[x] web/css/source/components/_modals_extend.less

[x] web/js/responsive.js
opened by timneutkens 9
lib-css() mixin not being used

This mixin is heavily used in the Blank theme for setting css properties within other mixins. It allows to omit properties where falsy variables were specified (i.e. empty strings).

While making modifications to the Sass theme we've noticed that inherit is often used for certain variables which often causes an undesired effect of overwriting selector's rules by its parent. In majority of those cases they should be set to '' (empty string) which lib-css() mixin allows to do.

By reviewing the commit history I noticed that the lib-css() was initially used in the previous builds but it was removed at some point (with a very intricate message, btw :)).

@Igloczek, could you please shed some more light on why this mixin is being excluded? Thanks!

opened by rocketweb-fed 9
Magento 2.4 compatibility

This theme is not installable with Magento 2.4.0 due to the version restrictions in the composer.json file. It requires magento/framework ^101.0.0 or ^102.0.0 while Magento 2.4.0 has version 103.0.0 of the magento/framework package.

opened by dverkade 8

I've installed this theme and Frontools and everything seems to work. (I'm in developer mode). Now i would like to use this theme as base for a new one, so i've created app/design/frontend/MyVendor/MyTheme/theme.xml:

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

and added to frontools themes.json:

...
"MyVendor-MyTheme": {
    "src"    : "app/design/frontend/MyVendor/MyTheme",
    "dest"   : "pub/static/frontend/MyVendor/MyTheme",
    "locale" : ["en_US", "it_IT"],
    "lang"   : "scss",
    "postcss": ["plugins.autoprefixer()"]
  }
...

Trying to set my new theme in magento backend i get a "broken" site without css. I cannot figure out how to proceed with the customization. Which is the best practice?

opened by slackerzz 7

Regressions in 2.2 update

Looks like #161 introduced some discrepancies. Chiefly, the removal of !default flags.

E.g https://github.com/SnowdogApps/magento2-theme-blank-sass/blob/34827e76e74ca12b21e510056d8e8da2b55cd563/Magento_Checkout/styles/module/checkout/_shipping.scss

https://github.com/SnowdogApps/magento2-theme-blank-sass/blob/34827e76e74ca12b21e510056d8e8da2b55cd563/Magento_Checkout/styles/module/checkout/_sidebar-shipping-information.scss

https://github.com/SnowdogApps/magento2-theme-blank-sass/blob/34827e76e74ca12b21e510056d8e8da2b55cd563/Magento_Checkout/styles/module/checkout/_tooltip.scss

...and many other files. Ideally, any variable definitions should end with a default flag.

Also, not sure about the usage of lib-css – it looks like that's used primarily to output vendor prefixed values and Frontools' autoprefixer takes care of that by default.

opened by Leland 6