Overview

  • +

    Introduction

    Lemon is a template multipurpose ionic 4

    Diverse design, clean, simple and luxurious.

    Convenient, easy to use, save time. Fully functional, use many cases. Easy to customize.

    Lemon is built from the components of the ionic supply and is tailored to suit our needs. The template consists of four main parts: the component has been customized. The interfaces are designed based on the custom component. Social networking sites provided API. The native of Ionic is used to interact with your device.

    Email: lrandom@gmail.com


    About the available interfaces:

    + 15 Skin Color Can Add More

    + 3 Blog

    + 4 Gallery

    + 1 Firebase Crud

    + 4 Parallax Mold

    + 1 Drop & Drag

    + 2 Slides

    + 9 Login

    + 5 Profile

    + 3 Register

    + 2 Warning Error 404 & 500

    + Ui Element Full Component Ionic 4


    About component:

    Lemon is rewritten for Ionic's existing elements with classes and adds many designs for you to choose from.


    Lemon is made up of Sass, Angular 6, Ionic 4, FireBase, Admob, Cordova.

Class in component

  • +

    Variable in Color

    Here are some color variations, you can change them to show your preferences for the entire template.

    Colors will be selected for 5 types: primary, secondary, tertiary, light, medium, dar, success, warning, danger. The variants will be calculated by the Color plugin and reprinted into the global.scss file and distributed to the entire application.

    Variable Value
    var(--ion-color-primary) Depending on the value you installed in the enviroment file
    var(--ion-color-secondary) Depending on the value you installed in the enviroment file
    var(--ion-color-tertiary) Depending on the value you installed in the enviroment file
    var(--ion-color-light) Depending on the value you installed in the enviroment file
    var(--ion-color-medium) Depending on the value you installed in the enviroment file
    var(--ion-color-dark) Depending on the value you installed in the enviroment file
    var(--ion-color-succsess) Depending on the value you installed in the enviroment file
    var(--ion-color-warning) Depending on the value you installed in the enviroment file
    var(--ion-color-danger) Depending on the value you installed in the enviroment file
  • +

    Background

    You also have some gradient backgrounds with the following classes.


    .black .white

    Color depends on the color variable installed in the enviroment file


    .bg-base

    .bg-secondary

    .bg-tertiary

    .bg-light

    .bg-medium

    .bg-dark

    .bg-success

    .bg-warning

    .bg-danger

  • +

    Text

    The following are common classes that define text. font-weight classes, font-color classes, text-aligning classes, text-decoration, text-transform, letter-spacing, text-overflow. You can see the list below and how to use the template.

    Class Description
    .text-dark Text color
    .text-light Text color
    .text-primary color : var(--ion-color-primary);
    .text-secondary color : var(--ion-color-secondary);
    .text-tertiary color : var(--ion-color-tertiary);
    .text-medium color : var(--ion-color-medium);
    .text-dark color : var(--ion-color-dark);
    .text-success color : var(--ion-color-success);
    .text-warning color : var(--ion-color-warning);
    .text-danger color : var(--ion-color-danger);
    .spacing-1 Text color
    .spacing-2 Text color
    .spacing-3 Text color
    .spacing-4 Text color
    .spacing-5 Text color
    .uppercase Text uppercase
    .lowercase Text lowercase
    .capitalize Text capitalize
    .text-ellipsis

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    .overline Text overline
    .line-throught Text line throught
    .underline Text underline
    .fw-100 font weight 100
    .fw-200 font weight 200
    .fw-300 font weight 300
    .fw-400 font weight 400
    .fw-500 font weight 500
    .fw-600 font weight 600
    .fw-700 font weight 700
    .fw-800 font weight 800
    .fw-900 font weight 900
    .fs-5 font size 5px
    .fs-6 font size 6px
    .fs-7 font size 7px
    .fs-8 font size 8px
    .fs-9 font size 9px
    .fs-10 font size 10px
    .fs-11 font size 11px
    .fs-12 font size 12px
    .fs-13 font size 13px
    .fs-14 font size 14px
    .fs-15 font size 15px
    .fs-16 font size 16px
    .fs-17 font size 17px
    .fs-18 font size 18px
    .fs-19 font size 19px
    .fs-20 font size 20px
    .fs-21 font size 21px
    .fs-22 font size 22px
    .fs-23 font size 23px
    .fs-24 font size 24px
    .fs-25 font size 25px
    .fs-26 font size 26px
    .fs-27 font size 27px
    .fs-28 font size 28px
    .fs-29 font size 29px
    .fs-30 font size 30px
    .fs-32 font size 32px
    .fs-34 font size 34px
    .fs-36 font size 36px
    .fs-38 font size 38px
    .fs-40 font size 40px
    .fs-42 size 42px
    .fs-44 size 44px
    .fs-46 size 46px
    .fs-48 size 48px
    .fs-50 size 50px
    .fs-60 size 60px
    .fs-70 size 70px
    .fs-80 size 80px
    .fs-90 size 90px
    .fs-100 size 100px
  • +

    Stroke

    Stroke classes and their uses and combinations with colors.

    Class Description
    .bdra-0 border radius 0px
    .bdra-1 border radius 1px
    .bdra-2 border radius 2px
    .bdra-3 border radius 3px
    .bdra-4 border radius 4px
    .bdra-5 border radius 5px
    .bdra-6 border radius 6px
    .bdra-7 border radius 7px
    .bdra-8 border radius 8px
    .bdra-9 border radius 9px
    .bdra-10 border radius 10px
    .bdra-12 border radius 12px
    .bdra-14 border radius 14px
    .bdra-15 border radius 15px
    .bdra-16 border radius 16px
    .bdra-18 border radius 18px
    .bdra-20 border radius 20px
    .bdra-25 border radius 25px
    .bdra-30 border radius 30px
    .circle
  • +

    Shadow

    Shadow has shadow outer and shadow inner. There are 3 different strengths. You can see the specific explanations below.

    Class Description
    .shadow-0

    boxshadow 0

    .shadow-1

    shadow 1

    .shadow-2

    shadow 2

    .shadow-3

    shadow 3

  • +

    Margin

    Classes define common margin for quick use.

    Class Description
    .mg-0 margin 0px
    .mg-auto margin left auto & margin-right auto
    .mg-5 margin left 5px
    .mg-10 margin left 10px
    .mg-15 margin left 15px
    .mg-20 margin left 20px
    .mg-25 margin left 25px
    .mg-30 margin left 30px
    .mg-35 margin left 35px
    .mg-40 margin left 40px
    .mg-45 margin left 45px
    .mg-50 margin left 50px
    .mg-70 margin left 70px
    .mg-90 margin left 90px


    Below are the classes that define the common margin.

    Margin top (px) Margin right (px) Margin bottom (px) Margin left (px)
    .mgt-0 .mgr-0 .mgb-0 .mgl-0
    .mgt-5 .mgr-5 .mgb-5 .mgl-5
    .mgt-10 .mgr-10 .mgb-10 .mgl-10
    .mgt-15 .mgr-15 .mgb-15 .mgl-15
    .mgt-20 .mgr-20 .mgb-20 .mgl-20
    .mgt-25 .mgr-25 .mgb-25 .mgl-25
    .mgt-30 .mgr-30 .mgb-30 .mgl-30
    .mgt-35 .mgr-35 .mgb-35 .mgl-35
    .mgt-40 .mgr-40 .mgb-40 .mgl-40
    .mgt-45 .mgr-45 .mgb-45 .mgl-45
    .mgt-50 .mgr-50 .mgb-50 .mgl-50
    .mgt-70 .mgr-70 .mgb-70 .mgl-70
    .mgt-90 .mgr-90 .mgb-90 .mgl-90


    In addition, you can subtract the distance by the margin class back to the corresponding side you need.

    Margin top (px) Margin right (px) Margin bottom (px) Margin left (px)
    .mgt--5 .mgr--5 .mgb--5 .mgl--5
    .mgt--10 .mgr--10 .mgb--10 .mgl--10
    .mgt--15 .mgr--15 .mgb--15 .mgl--15
    .mgt--20 .mgr--20 .mgb--20 .mgl--20
    .mgt--25 .mgr--25 .mgb--25 .mgl--25
    .mgt--30 .mgr--30 .mgb--30 .mgl--30
    .mgt--35 .mgr--35 .mgb--35 .mgl--35
    .mgt--40 .mgr--40 .mgb--40 .mgl--40
    .mgt--45 .mgr--45 .mgb--45 .mgl--45
    .mgt--50 .mgr--50 .mgb--50 .mgl--50
    .mgt--70 .mgr--70 .mgb--70 .mgl--70
    .mgt--90 .mgr--90 .mgb--90 .mgl--90
  • +

    Padding

    Here are the common definition padding classes for you to use quickly. You can view the listing and usage below.

    Class Description
    .pd-0 padding 0px
    .pd-1 padding 1px
    .pd-2 padding 2px
    .pd-3 padding 3px
    .pd-4 padding 4px
    .pd-5 padding 5px
    .pd-6 padding 6px
    .pd-7 padding 7px
    .pd-8 padding 8px
    .pd-9 padding 9px
    .pd-10 padding 10px
    .pd-11 padding 11px
    .pd-12 padding 12px
    .pd-13 padding 13px
    .pd-14 padding 14px
    .pd-15 padding 15px
    .pd-16 padding 16px
    .pd-17 padding 17px
    .pd-18 padding 18px
    .pd-19 padding 19px
    .pd-20 padding 20px
    .pd-25 padding 25px
    .pd-30 padding 30px
    .pd-35 padding 35px
    .pd-40 padding 40px
    .pd-45 padding 45px
    .pd-50 padding 50px
    .pd-70 padding 50px
    .pd-100 padding 50px
    .pd-150 padding 50px


    You also have specific classes defining the padding you need.

    padding top (px) padding right (px) padding bottom (px) padding left (px)
    .pdt-0 .pdr-0 .pdb-0 .pdl-0
    .pdt-1 .pdr-1 .pdb-1 .pdl-1
    .pdt-2 .pdr-2 .pdb-2 .pdl-2
    .pdt-3 .pdr-3 .pdb-3 .pdl-3
    .pdt-4 .pdr-4 .pdb-4 .pdl-4
    .pdt-5 .pdr-5 .pdb-5 .pdl-5
    .pdt-6 .pdr-6 .pdb-6 .pdl-6
    .pdt-7 .pdr-7 .pdb-7 .pdl-7
    .pdt-8 .pdr-8 .pdb-8 .pdl-8
    .pdt-9 .pdr-9 .pdb-9 .pdl-9
    .pdt-10 .pdr-10 .pdb-10 .pdl-10
    .pdt-11 .pdr-11 .pdb-11 .pdl-11
    .pdt-12 .pdr-12 .pdb-12 .pdl-12
    .pdt-13 .pdr-13 .pdb-13 .pdl-13
    .pdt-14 .pdr-14 .pdb-14 .pdl-14
    .pdt-15 .pdr-15 .pdb-15 .pdl-15
    .pdt-16 .pdr-16 .pdb-16 .pdl-16
    .pdt-17 .pdr-17 .pdb-17 .pdl-17
    .pdt-18 .pdr-18 .pdb-18 .pdl-18
    .pdt-19 .pdr-19 .pdb-19 .pdl-19
    .pdt-20 .pdr-20 .pdb-20 .pdl-20
    .pdt-25 .pdr-25 .pdb-25 .pdl-25
    .pdt-30 .pdr-30 .pdb-30 .pdl-30
    .pdt-35 .pdr-35 .pdb-35 .pdl-35
    .pdt-40 .pdr-40 .pdb-40 .pdl-40
    .pdt-45 .pdr-45 .pdb-45 .pdl-45
    .pdt-50 .pdr-50 .pdb-50 .pdl-50
    .pdt-70 .pdr-70 .pdb-70 .pdl-70
    .pdt-100 .pdr-100 .pdb-100 .pdl-100
    .pdt-150 .pdr-150 .pdb-150 .pdl-150

Installation

Run on browser

  • +

    Run on browser

    Want to run an application on a browser? you'll do that by opening your terminal and typing:

    ionic serve -l

    And here is the result, the template on your browser.

Support Other Builders