Shopify Question posted in
The Shopify help center can be found here.

Combining Shopify's theme dev framework Slate with the CSS Framework Materialize

Into which Slate directories do I need to copy the Materialize files?
I managed to create a Materialized layout by using 

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

Then I copied the content of the Materialize /sass folder to slates /global directory, added the line

<!--Import materialize.css-->
{{ 'materialize.scss' | asset_url | stylesheet_tag }}

into my theme.liquid and ran slate build, deploy and watch. Can’t see the Materialize files uploaded to my theme files. What am I doing wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0
    1. copied materialize SCSS files in directory sass/ files to slate generated src/styles/vendor directory

    2. added following code to src/styles/theme.scss

              /*================ MODULES ================*/
        @import url('modules/site-header.scss');
        @import url('modules/gift-card-template.scss');

        /*================ Materialize  ===========*/
        @import url('vendor/materialize/materialize.scss');
        // Mixins
        // @import url('vendor/materialize/components/prefixer');
        @import url('vendor/materialize/components/_mixins.scss');
        @import url('vendor/materialize/components/_color.scss');

        // Variables;
        @import url('vendor/materialize/components/_variables.scss');

        // Reset
        @import url('vendor/materialize/components/_normalize.scss');

        // components
        @import url('vendor/materialize/components/_global.scss');
        @import url('vendor/materialize/components/_badges.scss');
        @import url('vendor/materialize/components/_icons-material-design.scss');
        @import url('vendor/materialize/components/_grid.scss');
        @import url('vendor/materialize/components/_navbar.scss');
        @import url('vendor/materialize/components/_roboto.scss');
        @import url('vendor/materialize/components/_typography.scss');
        @import url('vendor/materialize/components/_transitions.scss');
        @import url('vendor/materialize/components/_cards.scss');
        @import url('vendor/materialize/components/_toast.scss');
        @import url('vendor/materialize/components/_tabs.scss');
        @import url('vendor/materialize/components/_tooltip.scss');
        @import url('vendor/materialize/components/_buttons.scss');
        @import url('vendor/materialize/components/_dropdown.scss');
        @import url('vendor/materialize/components/_waves.scss');
        @import url('vendor/materialize/components/_modal.scss');
        @import url('vendor/materialize/components/_collapsible.scss');
        @import url('vendor/materialize/components/_chips.scss');
        @import url('vendor/materialize/components/_materialbox.scss');
        @import url('vendor/materialize/components/forms/_forms.scss');
        @import url('vendor/materialize/components/forms/_input-fields.scss');
        @import url('vendor/materialize/components/forms/_radio-buttons.scss');
        @import url('vendor/materialize/components/forms/_checkboxes.scss');
        @import url('vendor/materialize/components/forms/_switches.scss');
        @import url('vendor/materialize/components/forms/_select.scss');
        @import url('vendor/materialize/components/forms/_file-input.scss');
        @import url('vendor/materialize/components/forms/_range.scss');
        @import url('vendor/materialize/components/_table_of_contents.scss');
        @import url('vendor/materialize/components/_sideNav.scss');
        @import url('vendor/materialize/components/_preloader.scss');
        @import url('vendor/materialize/components/_slider.scss');
        @import url('vendor/materialize/components/_carousel.scss');
        @import url('vendor/materialize/components/_tapTarget.scss');
        @import url('vendor/materialize/components/_pulse.scss');
        @import url('vendor/materialize/components/date_picker/_default.scss');
        @import url('vendor/materialize/components/date_picker/_default.date.scss');
        @import url('vendor/materialize/components/date_picker/_default.time.scss');

    This allowed

    $ slate build

    to run properly and create the theme.scss file out of all SCSS components. So the theme.scss seems to be concatenated and uploaded properly. Unfortunately, there seems to be an overall Shopify issue which is discussed on the slate github repo


  2. 0

    I am looking at your question. Did you get it to work as expected.
    I have been trying myself to add the bootstrap grid to my slate them

    1. added bootstrap files: vendor/bootstrap/_grid.scss (for example, there are a bunch of them)

    2. reference the bootstrap assets in src/styles/theme.scss like so:

      /================ UTILS ================/
      @import url(‘tools/mixins.scss’);

      /================ SETTINGS ================/
      @import url(‘settings/variables.scss.liquid’);

      /================ COMMON ================/
      @import url(‘global/normalize.scss’);
      @import url(‘global/slate-reset.scss’);
      @import url(‘global/helper-classes.scss’);
      //@import url(‘global/grid-bootstrap.scss’);
      @import url(‘global/layout.scss’);
      @import url(‘global/icons.scss’);
      @import url(‘global/rte.scss’);
      @import url(‘global/responsive-tables.scss’);
      @import url(‘global/links-buttons.scss’);
      @import url(‘global/forms.scss’);
      @import url(‘global/blank-states.scss’);

      /================ BOOTSTRAP ================/
      @import url(‘vendor/bootstrap/_grid.scss’);

      /================ MODULES ================/
      @import url(‘modules/site-header.scss’);
      @import url(‘modules/gift-card-template.scss’);

    really does not seem to work though My code editor

    Which task manager is used in the slate theme. I am thinking I could tweak the tasks to have a new stylesheet generated and do sthg like that:

    {{ ‘theme.scss.css’ | asset_url | stylesheet_tag }}

    //bootstrap grid
    {{ ‘grid.scss.css’ | asset_url | stylesheet_tag }}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search