Creating a responsive pintrest layout for mobile/tablets using Gemionic UI (Freebie Included)

In Custom Components, Ionic 3 by semeLeave a Comment

If you’ve been been to pintrest you’ve seen that masonry layout that everyone knows them for:

We’re going to do the same thing for in Ionic, with some css and a free part of our upcoming UI Kit, Gemionic.

You can check out the our stackblitz demo

Setup

  1. Create a new ionic project by running ionic start pintrest blank in your terminal/command line
  2. Download the free Gemionic NgModule and extract the gm-components folder into your project. For purposes of this tutorial we will be copying to src/components/
  3. import the gemionic.ui.module.ts from src/components/gm-components to your app.module.ts. Add it to your imports array. (the most important lines of code have comments)
    // import from the components folder
    import { GemionicUiModule } from '../components/gm-components/gemionic.ui.module';
    
    @NgModule({
      declarations: [
        MyApp,
        HomePage,
      ],
      imports: [
        BrowserModule,
        GemionicUiModule, // <---- add here
        IonicModule.forRoot(MyApp),
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage,
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
      ]
    })
  4. That’s it (easier than copying a theme, right?). Now run Ionic serve. Then open src/pages/home/home.html while you’re at it

Using the Gemionic Component

All gemionic components start with the gm- prefix, and some basic/minimal html within. We chose this route so you still know your content why Gemionic handles the styling. To use our component, paste this code into your home.html and refresh.

<ion-header>
  <ion-navbar>
    <ion-title>Gemionic Ui Kit Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    
    <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x200-1.jpg" alt="">
      <div class="content">
        <h2>Hyper Exposure in the city</h2>
        <h6>Lifestyle</h6>
      </div>
    </gm-feed-card>

</ion-content>

Right now we should have something similar to this. Don’t worry if the the font isn’t the same. Gemionic was made to use any font you’ve already setup

The next step would be to add our masonry style.

Creating our masonry style

We’re going for something really simple but gets the job done. Open your src/pages/home/home.scss and copy the code below into it:

.masonry {
 -moz-column-width: auto;
 -webkit-column-width: auto;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
 column-count: 1;
}

.masonry .item {
 display: inline-block;
 width:  100%;
 background:  #efefef;
}

Explaining the code above:

  • column-width specifies specifies the minimum column width. We’re setting this auto so each .item in the masonry takes a natural width
  • column-gap sets the gap between items. 1em is fine
  • Most importantly (this is where the magic is), setting our column-countis what tells us how many columns the masonry should have. as we have set this 1, all items will be vertically stacked. We’ll come to this later to make it more dynamic (changing the columns based on display size)

For now, lets make many copies of our component. Paste the following code below. We just wrapped our component in an .item div inside our .masonry class.

<ion-header>
  <ion-navbar>
    <ion-title>Gemionic Ui Kit Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1 text-center class="primary-font">Masonry Layout</h1>
  <div class="masonry">
    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x200-1.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">Hyper Exposure in the city</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x300-2.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">Food baking : Merry Christmass pizza</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x200-3.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">Cooking Leftovers with strawberry shapes</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x300-4.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">Reindeer Love</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x300-5.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">By the lake and beyond : Calm for the soul</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x300-2.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">Rolling up with butter and flour</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x200-5.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">Top Bridge Designs in 2018</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x200-6.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">Health Boosting food they should have told you in school</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x300-1.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">The city that never sleeps</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x300-6.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">At the speed of thought : Running through the city</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>

    <div class="item">
      <gm-feed-card>
      <img src="https://audacitus.com/gemionic-ui/imgs/gemionic-imgs/300x300-7.jpg" alt="">
      <div class="content">
        <h2 class="secondary-font">A stroll through the road of my mind</h2>
        <h6 class="primary-font">Lifestyle</h6>
      </div>
    </gm-feed-card>
    </div>
  </div>
</ion-content>

Now this is nice and all, but we also want to make sure the design can scale, can we set it the number of columns at each Ionic breakpoint? breakpoint-sass.com does that for us.

Breakpoint is a sass plugin that makes us easily define styles for varying device sizes.

In our project folder, via the command line, install breakpoint-sass in our project:

npm install breakpoint-sass --save

Next, in our app.scss, import the breakpoint sass plugin into our project. We’re also going to set our breakpoints for this tutorial.

// http://ionicframework.com/docs/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.


@import '../node_modules/breakpoint-sass/stylesheets/breakpoint';

// Using Ionic's Own Breakpoints at https://ionicframework.com/docs/api/components/grid/Grid/#default-breakpoints
$sm : 576px;
$md : 768px;
$lg : 992px;
$xl : 1200px;

@import "../pages/home/home";

What’s with these breakpoints? We’re creating these variables to match ionic’s default breakpoints.

Open our src/pages/home/home.scss and edit our masonry class like below:

.masonry {
 -moz-column-width: auto;
 -webkit-column-width: auto;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
 @include breakpoint(min-width $sm){
   column-count: 1;
 }
 @include breakpoint(min-width $md){
   column-count: 2;
 }
 @include breakpoint(min-width $lg){
   column-count: 3;
 }
 @include breakpoint(min-width $xl){
   column-count: 4;
 }
}

.masonry .item {
 display: inline-block;
 width:  100%;
 background:  #efefef;
 gm-feed-card {
   margin-bottom: 16px;
 }
}

What we’re doing above is stating the number of columns for our masonry class based on the breakpoint defined in our @include brackets. if the display size is above the supplied breakpoint, show the defined number of columns.

Run Ionic serve and see the page in action

And there we have it.

The component provided in this tutorial is part of Gemionic Ui kit. If you loved the UI component, you can subscribe for updates when the main product comes out. It’s a paid product, but I’m giving a special price for those who subscribe before launch.

Till next time, cheers!