Skyscanner/backpack-android

Backpack Design System https://skyscanner.design

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.skyscanner:backpack-android:31.0.1'
	}

	dependencies {
		implementation("com.github.skyscanner:backpack-android:31.0.1")
	}

	<dependency>
	    <groupId>com.github.skyscanner</groupId>
	    <artifactId>backpack-android</artifactId>
	    <version>31.0.1</version>
	</dependency>


                            
    libraryDependencies += "com.github.skyscanner" % "backpack-android" % "31.0.1"


                            
    :dependencies [[com.github.skyscanner/backpack-android "31.0.1"]]

Readme

Backpack Android

Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner's products.

Backpack for Android supports two targets: Android View system and Jetpack Compose.

Demo application

The Backpack demo application is a good way of referring to the variants available for a component and their correct usage. The code is available under /app directory.

Installation

Backpack is available through Maven Central. Thus, before adding Backpack to your project, make sure Maven Central is in your repositories list. Add this to your root build.gradle:

repositories {
    mavenCentral()
}

Add the following dependencies to your build.gradle (in your app module) in the dependencies block:

implementation "net.skyscanner.backpack:backpack-android:bpkVersion" // for Android View system
implementation "net.skyscanner.backpack:backpack-compose:bpkVersion" // for Compose

All Backpack components must to be used within BpkTheme scope:

Android View system:

  <style name="AppTheme" parent="BpkTheme">
    <!-- Customize your theme here. -->
  </style>

Compose:

BpkTheme {
    BpkText("Hello from Compose!")
}

Features

Android View system

You can find the list of the available components, as well as the code samples and the screenshots here.

All design system tokens exist as public Android resources. Here's the list of the token types and the samples of its usage:

border radii – @dimen/bpkBorderRadiusSm (XML), R.dimen.bpkBorderRadiusSm (Java/Kotlin)
colours – @color/bpkSkyBlue (XML), R.color.bpkSkyBlue (Java/Kotlin)
semantic colours – @color/bpkTextPrimary (XML), R.color.bpkTextPrimary (Java/Kotlin)
elevations – @dimen/bpkElevationSm (XML), R.dimen.bpkElevationSm (Java/Kotlin)
spacings – @dimen/bpkSpacingLg (XML), R.dimen.bpkSpacingLg (Java/Kotlin)
text styles – ?bpkTextBaseSize (XML)

Jetpack Compose

Backpack for Compose targets stable Compose releases.

You can find the list of the available components, as well as the code samples and the screenshots here.

The design system tokens are located in a net.skyscanner.backpack.compose.tokens package. Here's the list of the token types and the samples of its usage:

border radii – BpkBorderRadius.Lg
border sizes – BpkBorderSize.Sm
colours – BpkColor.SkyBlue
semantic colours – BpkTheme.colors.textPrimary
elevations – BpkElevation.Sm
spacings – BpkSpacing.Sm
text styles – BpkTheme.typography.heading4

Contributing to Backpack

Please see the Contributing guide for instructions on contributing to this project.

License

Backpack is available under the Apache 2.0 license. See the LICENSE file for more info.