Malack app logo

A mobile app development project.

To build a hypothetical animal tracking app using HTML, CSS, and JavaScript. The designed app is an app where you can add a dog on your current location on the map. The intention of the app is to track down dogs in different areas and location. These data can be useful in the future to know various facts like what type of dog or dog breed or dog breed type is popular in a particular area of location. On the other hand, the primary goal of building this app is to explore the coding languages for mobile app development. The technologies used in this app are HTML5, CSS3, Sass, JavaScript, jQuery, jQuery Mobile. Talking about designing tools, the app is designed using Adobe Design software including Adobe XD, Photoshop and Illustrator.
user screen
  • Brainstorming for the names.
  • Design a logo for the app.
  • List the features to be added in the app.
  • Design style guide.
  • Prepare wireframes.
  • Run user testing.
  • Design High-Fidelity wireframes.
  • Develope the app with HTML, CSS, and JS.
  • Features
  • Track a particular dog.
  • Track based on the breed.
  • Add a location to a dog.
  • Edit a dog’s information.
  • Add a new location to a particular dog.

Site Map

Malack site map


Ready national public campaign
img 2
img 2
img 2
Ready national public campaign
img 2
img 2
img 2

Development Technologies

jQuery mobile
SASS css preprocessor

Visual Design

Login screen
img 2
img 2
img 2
Ready national public campaign
img 2
img 2
img 2


1. Designing with - An awesome CSS preprocessor.
Global variables:
                                $tool-height: 3em
$ub-fonts: urbane-rounded, sans-serif
$gr-fonts: brandon-grotesque, sans-serif
$fw-heavy: 900
$fw-bold: 700
$fw-dbold: 600
$fw-med: 500
$fw-reg: 400
$fw-light: 300
$fw-ex-light: 200
$fw-thin: 100
$text-right: right
$text-center: center
=type($font: $gr-fonts, $size: 1em, $weight: $fw-reg, $align: left);
    font-family: $font;
    font-weight: $weight;
    text-align: $align;
    font-size: $size;
    text-rendering: auto;
=text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba($dark, 0.4));
    text-shadow: $x $y $blur $color;
=box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba($dark, 0.4), $inset: “”);
    @if $inset != “”;
        +css3-prefix(“box-shadow”, $inset $x $y $blur $color);
        +css3-prefix(“box-shadow”, $x $y $blur $color);
CSS3 gradient overlay on Image
    background: linear-gradient( rgba($dark, 0.25),
                rgba($dark, 0.65) ),
                url(‘image path’)

With use of gradient overlay technique of CSS background property you can easily avoid:

  1. Cretion of an overlay element.
  2. Styling and positioning of overlay element.
Pure CSS3 image shaping
    background: linear-gradient( rgba($dark, 0.25),
                rgba($dark, 0.65) ),
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 12vw));

Achievment by image shaping with CSS:

  1. No need of image processing scipts or software.
  2. Easy modification for future as image is still in original shape.
css image shaping
Styling google map markers.
        border-radius: 50%

Achievment by styling markers with css.

  1. No nee to process image for marker. It will get direct shape with border radius

  2. Wise use of CSS selectors means no JS hussle.

Styling google map markers with CSS is not possible directly because of the limitations of Google Map API. However, a smart way to do it is by naming the marker images with a specific naming convention in the begining of the image name and selecting with CSS string( ^ ) or substring ( * ) selectors.

Using mixin is like taking CSS to OOP world.
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex: none;
    +flex(1, 1, auto);
// Flex align items;

You can grab full plugin here: SASS Flexbox mixin - by liquidcharcoal

Test it live.
Malack app

The prototype of this app is live here: Malack App To get best out of the link. you might wanna turn on developer mode and choose responive device to make it look like a mobile app.

Tw Be Gh Cp
2019 © liquidcharcoal