Changes for v1.0.0

[Dogfalo]

v1 Updates

1.0.0-alpha.1 is here! Check out the announcement post on Medium

Big Changes

• [x] Rewrite Datepicker to no longer use pickadate.js which is no longer in development
• [x] Remove jQuery as a dependency

  Enhancements

• [x] Refactor plugins into Classes
  • [x] Dropdown
  • [x] Select
  • [x] Tooltip
  • [x] Toast
  • [x] Modal
  • [x] Collapsible
  • [x] Carousel
  • [x] Parallax
  • [x] Pushpin
  • [x] Materialbox
  • [x] Sidenav
  • [x] Slider
  • [x] Chips
  • [x] Autocomplete
  • [x] Feature Discovery
  • [x] Timepicker
• [x] All Plugins have
  • [x] this.el
  • [x] this.destroy()
  • [x] this.getInstance()
  • [x] upgrade guide
  • [x] update changelog
  • [x] update documentation
  • [x] In / Out transition options where applicable
• [x] getInstance takes in nodeList as well as single elem
• [ ] Remove styling on base HTML elements (pushed to a later release)
• [x] Form reworks
  • [x] Rework input field validation styling
  • [x] Rework labels to wrap Checkboxes and Radio Buttons

Slimming Down

• [x] Remove jQuery Easing plugin as a dependency
• [x] Remove HammerJs as a dependency
• [x] Remove transitions.js
• [x] Remove scrollfire
• [x] Remove automatic initialization for plugins
• [x] Remove options as HTML attributes on plugins
• [x] Unbundle Roboto from Materialize(#4798)

Clean Up

• [x] Remove the deprecated.userView class (#5037)
• [ ] Prefix plugin names (M_pluginname)?

Meta Items

• [x] Create 1.0.0 upgrade guide
• [x] Drop IE 10 Support
• [x] Drop Safari 7 + 8 Support
• [x] Archived Documentation

New Features

• [ ] Youtube-like PiP

[tomscholz]

Quick reminder @Dogfalo @DanielRuf @jgacuca567 There is a separate issue issue for adding SSL to the documentation site #4040

[coxta]

Apologies if this has been suggested elsewhere, or if this is the wrong place to do so. Something that continues to puzzle me:

Collections and Collapsibles are very similar elements... However, a collection cannot have collapsible items - and a collapsible cannot possess the .with-header class, like collections (<ul class="collection with-header">) -- Please correct me if I'm wrong..

Nonetheless, why not merge the two components and essentially enable "Collapsible Collections"? Ideally, this would allow a slick, card-like, element:

<ul class="collapsible collection with-header" data-collapsible="accordion">
  <!-- [collapsible|collection]-header -->
  <li class="collection-header"><h4>Card-Like Header</h4></li>
    <li>
      <div class="collapsible-header">Collapsible Item Header</div>
      <div class="collapsible-body"><span>Collapsible Item Content</span></div>
    </li>
    <li class="collection-item">Simple Collection Item</li>
    <li class="collection-item">Another Collection Item</li>
</ul>

[Ninja-Coding-Git]

PLEASE USE CLASS SELECTORS, DON'T USE SELECTORS TO NATIVE ELEMENTS, LIKE THIS:

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {

THIS IS, UGLY, BAD PRACTICE, UN-FRIENDLY WITH ANOTHER FRAMEWORKS/STYLES

browser-default IS THE WORST PATCH EVER. I WONT ADD browser-default TO EVERY INPUT IN AN EXISTENT PROYECT, NO BODY WILL.

USE CLASS SELECTOR LIKE: input .mcss { ... }

INTEGRATION MUST BE EASY (THINK IN EXISTENT PROYECTS, NOT ALL PROYECTS ARE NEW).

[basicBrogrammer]

Wow caps lock

[DanielRuf]

@Ninja-Coding-Git not when you write caps lock ;-)

[DanielRuf]

So far Materialize is a framework which applies ist styles and logics to existing elements, not much extra markup needed in many cases. Rewriting this to class names is not planned for 1.x.

[Dogfalo]

@Ninja-Coding-Git WE HAVE HEARD YOUR FEEDBACK. I THINK THIS WILL BE A GOOD CHANGE FOR VERSION 2. Thanks for your concern.

[LCallaghan84]

Would be cool if Modals could load sites like an iframe lightbox

[pwwiur]

Fix tag sizings like header tags! They are too much big!

[DanielRuf]

Fix tag sizings like header tags! They are too much big!

What exactly do you mean?

[tomscholz]

@DanielRuf See https://github.com/Dogfalo/materialize/issues/4229

[DanielRuf]

So the sizes in the specification are bigger than ourse and we have to adjust them to use their sizes. Ours are probably smaller than theirs as it seems.

[Ninja-Coding-Git]

sorry, @Dogfalo i was frustrated. but is nice to see your good humor.

[bassie1995]

I think fixing the autocomplete, which could use a lot of work, would be great for this: https://github.com/Dogfalo/materialize/issues/4086.

[mohamadlounnas]

can you add plugin like Sticky-kit

[Dogfalo]

@bassie1995 Yep we are reworking the autocomplete and enhancing it when suggestions made by people on issues and PR @ateweb Why does it need to be bundled with materialize? It is easy enough to just add the sticky-kit plugin yourself if you want it.

[JamesVanWaza]

@Dogfalo , how about merging with https://github.com/icefox0801/materialize-autocomplete, since the autocomplete is already done?

[DanielRuf]

@jgacuca567 we are moving away crom using jQuery. Also the repository that you linked is using a problematic UMD wrapper.

[paulpflug]

hey,

I really love materialize.css, but I never was pleased with including a big blob in a website. So my first take was to create vue-materialize to get away from jQuery and from the beginning I always aimed at load-only-what-you-need directive. Sadly vue wasn't the right tool for creating standalone components.. My current approach is to create all components based on custom elements-standard: ceri-comps, but many are still missing. Also webpack is a requirement..

My last step was to translate all materialize scss to stylus: ceri-materialize. Stylus has 2 major advantages:

• require
• better functions

With every css "module" in a single file, I can declare a depedency tree. So I have a grid.styl file, which requires mixins.styl, which requires variables.styl, which requires color.styl.

In the project I can have a stylus file:

@require "~ceri-materialize/5_inputFields"
@require "~ceri-materialize/5_checkboxes"
@require "~ceri-materialize/5_radioButtons"
@require "~ceri-materialize/5_grid"

and it just works like expected. My unused css is down from ~99% to ~30%

For the color problem I created a function to include only needed colors: stylus implementation scss implementation:part 1 part 2 To include

.black{
  background-color: black;
}
.black-text{
  color: black;
}

the call was for scss: @include do("include-color","black", "base");, stylus: addColor("black")

maybe this is source for some inspiration..

[DanielRuf]

@paulpflug you can always use the Sass version and include only the needed files combined with cssnano, csso and other tools.

[AkashPanja]

please add material design table with check box.

i have create one but it does not look so good !!

[tomscholz]

@AkashPanja See: https://github.com/Dogfalo/materialize/issues/1327

[Ninja-Coding-Git]

Please test all Browsers for Mobile:

iOs Android Not all components are working as should, even in showcase.

[paulpflug]

@DanielRuf That is exactly what I did, the whole point of my post was, that materialize-css in its current state isn't optimized for this usage. The absolute needed _global.scss for example contains seldom used pieces like breadcrumbs.. cssnano only affects file size, not parsing duration. So something like purifycss would be needed to get rid of the unused css. But I really prefer to load only the needed pieces in the first place, I suggested to make this easier. Maybe even document how to do it correctly..

[tomscholz]

@paulpflug See this issue https://github.com/Dogfalo/materialize/issues/5024

[Dogfalo]

@AkashPanja Yep, not currently planned for v1 as that is more aimed towards consistency of our plugins and a cleaner code structure which will make maintenance and future bug fixes easier. v1 will also be a big step towards the removal of jQuery but will still be backwards compatible with the current style of jQuery initialization

[renatop7]

Sorry if it was answered elsewhere, but do you guys have an estimated date of release?

[Dogfalo]

No, you can see the current progress on this issue however. We intend to release a 1.0 beta so people can try it out as soon as it's stable enough for that.

On Thu, Sep 14, 2017 at 11:17 AM, Renato Parreira notifications@github.com wrote:

Sorry if it was answered elsewhere, but do you guys have an estimated date of release?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Dogfalo/materialize/issues/5004#issuecomment-329515180, or mute the thread https://github.com/notifications/unsubscribe-auth/ACpax3t7Qe6W9OXszItSeCginNVGGYzkks5siUOJgaJpZM4Of-wF .

-- Doggy sends his greetings from Mars.

[fredgrott]

just a basic question..

anybody think that this might be a good set of classes to add?

.nav-row{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}
.nav-row:after {
  content: "";
  display: table;
  clear: both;
}

I started using it do very complex navbars, it turns out to be very useful

The other question, since MSIE is being dropped at v1.0.0 any plans on adopting CSS variables?

[Dogfalo]

We are only dropping internet explorer 10, so can't add CSS variables yet.

[BW155]

How about a better and more full documentation. Some things are missing at the moment I think.

[mohamadlounnas]

Is RTL supported? https://github.com/atechninfo/materialize-rtl

[Dogfalo]

RTL is not supported and there is no plan for it yet

[mohamadlounnas]

Thanks.

[rubenscd]

please, you can adjust the UTC time setting (countries with daylight saving time) like https://github.com/amsul/pickadate.js/pull/991

?

[DanielRuf]

@rubenscd we use pickadate

[Saticmotion]

@DanielRuf It might be worth linking to the pickadate.js documentation from the Materialize documentation. I remember it wasn't obvious to me either when I first started using Materialize.

[lepusmorris]

when will it be published? is the date certain?

[Dogfalo]

We're trying to get a beta build for it out soon

[AntoninSorrento]

I love this ui, expect ，Thank you developers

[rogerpence]

I'm a little late to this party but you folks are doing a great job! Spun up a few page parts last night and am very impressed. Keep up the great work.

[darckyn]

In version 1.0 stable, will have native support to Angular 2/4 ?

[DanielRuf]

In version 1.0 stable, will have native support to Angular 2/4 ?

No. But there is also an Angular related repository which makes it possible to integrate Materialize with custom Angular directives.

[tomscholz]

@Dogfalo @Fega @eboye @DanielRuf I proposed a change regarding the color system here: https://github.com/Dogfalo/materialize/issues/3612#issuecomment-331460322 Feedback is welcome.

[darckyn]

No. But there is also an Angular related repository which makes it possible to integrate Materialize with custom Angular directives.

Thx for the answer :)

[DanielRuf]

@darckyn to be more precise: https://github.com/search?o=desc&q=angular+materialize&s=stars&type=Repositories

[LCallaghan84]

Actually there is one you can check out - https://material.angularjs.org/

I have tried it out and it works pretty well

[DanielRuf]

Well.

Developers should note that AngularJS Material works only with AngularJS 1.x.

[tomscholz]

Then use https://material.angular.io/ instead

[ghost]

Any idea when Version 1.0 will be released?