Framework7 v8 - Material You

Material You

Material You (Material 3) - is the biggest new feature in Framework7 v8 and the biggest change in Framework7 Material design theme in the last few years.

Material You is Google's latest design language that builds upon the success of Material Design, offering even more customization and personalization options. It allows developers to craft adaptive UIs that respond to users' preferences, taking into account factors such as color schemes, typography, and other UI elements. By incorporating Material You support in Framework7, developers can now create visually stunning and unique applications with ease, enhancing the overall user experience.

Material You's emphasis on seamless design across various devices and platforms aligns perfectly with Framework7's mission to provide a high-performance, flexible, and easy-to-use framework for building mobile and web applications.

The integration of Material You into Framework7 is a great benefit for developers, as it demonstrates Framework's commitment to staying at the forefront of design.

Framework7 is the first project of its kind to support Material You at this level!

Styles, colors, transitions - absolutely all components of the Framework7 have received huge updates to match the latest Material Design.

You can explore all new components appearance in v8 Kitchen Sink.

Colors

Support for Material You color palette brings a lot of changes to color theming.

Now, primary theme color and all additional colors must be specified in app.colors parameters, rather than in CSS. Framework7 generates all required CSS variables related to colors dynamically:

const app = new Framework7({
  colors: {
    // primary color
    primary: '#ff0000',

    // extra colors
    green: '#00ff00',
    brand: '#0fff45',
    // ...
  },
});

It makes it so much easier to change colors, which is now can be done automatically at any time with new app.setColorTheme method:

// initially with go with red color theme
const app = new Framework7({
  colors: {
    primary: '#ff0000',
  },
});

// change it later to different color
app.setColorTheme('#00ff00');

Swiper

There is all new Swiper v9 arrived here as well. It has a lot of new features, especially new Swiper Element web component:

  • all new Loop mode without slides duplication
  • all new autoplay module
  • added support for virtual slides loop mode
  • improved virtual slides performance

It also comes with few breaking changes:

Photo Browser Thumbs

Photo Browser in v8 has new Thumbs module with previews of all images - basically what we have in most of modern mobile Gallery apps:

And the usage is very simple, we just need to pass thumbs array to Photo Browser parameters:

app.photoBrowser.create({
  photos: [
    'path/to/photo1.jpg',
    'path/to/photo2.jpg',
    'path/to/photo3.jpg',
    // ...
  ],
  thumbs: [
    'path/to/photo1-thumb.jpg',
    'path/to/photo2-thumb.jpg',
    'path/to/photo3-thumb.jpg',
    // ...
  ],
});

New Grid

Framework7 v8 comes with new simplified grid layout and sizes.

Before, Grid definitions were based on column widths, now it is a usual CSS Grid with definitions based on columns:

Before v8 we had:

<div class="row">
  <div class="col-25">Col 1</div>
  <div class="col-25">Col 2</div>
  <div class="col-25">Col 3</div>
  <div class="col-25">Col 4</div>
</div>

Now it is:

<div class="grid grid-cols-4">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
  <div>Col 4</div>
</div>

Block & List

Blocks and Lists default appearance has been changed. And now by default they don't have any background, outline and dividers (borders) between list items.

Appearance now should be controlled with extra classes (or with props in components):

  • block-strong / list-strong - adds block background
  • block-outline / list-outline - adds block outline (border)
  • list-dividers - adds dividers (borders) between list items

Plus there are new theme specific classes:

  • block-strong-ios / list-strong-md - adds block background only when iOS (or MD) theme is active
  • block-outline-ios / list-outline-md - adds block outline only when iOS (or MD) theme is active
  • list-dividers-ios / list-dividers-md - adds dividers only when iOS (or MD) theme is active

And we can combine all of these classes:

<div class="block-strong-ios block-outline-ios"></div>

<div class="list list-strong list-dividers-ios list-outline-md inset-md"></div>

Floating Panels

There is a new Panels floating effect arrived with Material You design:

Removed Aurora Theme

We decided to focus exclusively on mobile applications and interfaces, which is what the Framework7 was originally created for. Therefore it was decided to remove Aurora theme.

Removed Components & Functionality

  • Elevation - removed as such shadows are not used in Material Design anymore
  • Lazy - removed in favor of native loading="lazy"
  • Menu - removed as was intended to be used in Aurora theme
  • Appbar - removed as was intended to be used in Aurora theme
  • Request - removed in favor of native fetch
  • Inline Input Labels - removed as such layouts are rarely used in modern apps
  • List Item Cell & Row - removed as not really useful
  • Removed stackPages functionality in router that allows you to load pages from existing DOM elements, and keep previous pages in DOM. It is recommended to use Router Components instead
  • Removed expandInput functionality in Autocomplete as it was indented for inline inputs labels (which are removed now)
  • Browser lazy components - components files with .lazy prefix to be loaded by browser are removed now. Use bundler instead (e.g. Vite, Rollup, etc.)

What's Next?

It was an overview of most significant changes and new features.

There are also a lot of minor improvements and fixes across whole Framework7. For all changes list please refer to full v8 changelog.

As next steps it is recommended to check the following new and updated Framework7 v8 docs:

And docs in general:

P.S.

And as always, if you love Framework7, please, support project by donating or pledging:

Your support means a lot for us!

P.P.S

AI is coming more and more into our lives and work, and we are actively exploring how to use AI to improve the developer experience for building Framework7 apps. Stay tuned.

Nevertheless, AI is fun:

ChatGPT 4

Prompt:

How does Framework7 compare to competitors?

Response (a bit outdated):

Framework7 stands out among its competitors due to its simplicity, flexibility, and focus on providing a native-like experience using HTML, CSS, and JavaScript. Here's how Framework7 compares to some of its prominent competitors:

  • React Native

    React Native, developed by Facebook, enables developers to create cross-platform applications using native components written in JavaScript. It is known for its performance and ability to create truly native applications for iOS and Android. While React Native offers more extensive platform support, Framework7 shines with its simplicity, ease of use, and the ability to leverage web technologies for mobile app development. Developers who prefer working with React and seek better performance might prefer React Native.

  • Flutter

    Flutter, developed by Google, is a UI toolkit that allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase using Dart programming language. Flutter is known for its performance, rich set of widgets, and native-like experience on both iOS and Android platforms. However, Framework7 provides a more accessible approach for developers familiar with web technologies, as it doesn't require learning a new language (Dart) or adopting a new programming paradigm.

  • Ionic

    Ionic is a popular hybrid app development framework that, like Framework7, uses web technologies (HTML, CSS, and JavaScript) for building mobile applications. Both frameworks support integration with popular JavaScript libraries and frameworks, such as React, Vue, and Svelte.

    The key difference between the two lies in their approach and design philosophy. Ionic focuses on providing a consistent UI experience across platforms, while Framework7 emphasizes platform-specific UI components and styles that closely adhere to iOS and Android design guidelines. This focus on platform-specific design in Framework7 results in a more native-like experience.

Image Generation

Prompt:

4 best friends - "Framework7", "Ionic", "Flutter", "React Native" in a form of humans drink beer and create tools for mobile developers

Midjourney:

DALL-E:

Prompt:

mobile apps production factory, 3D in pixar style

Midjourney: