• Stars
    star
    127
  • Rank 282,790 (Top 6 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created almost 7 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Backpack Design System

Backpack Android

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

CI Status

Maven Central license platform

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. The app can be downloaded from App Center or by scanning the QR code below.

QR code

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:

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.

More Repositories

1

SkyFloatingLabelTextField

A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.
Swift
4,094
star
2

backpack

Backpack Design System
TypeScript
492
star
3

whispers

Identify hardcoded secrets in static structured text
Python
480
star
4

turbolift

A simple tool to help apply changes across many GitHub repositories simultaneously
Go
434
star
5

LambdaGuard

AWS Serverless Security
Python
399
star
6

cfripper

Library and CLI tool for analysing CloudFormation templates and check them for security compliance.
Python
396
star
7

Dixie

Dixie, turning chaos to your advantage.
Objective-C
192
star
8

aiotask-context

Contextual information for asyncio tasks
Python
161
star
9

engineering-principles

Skyscanner's Engineering Principles
133
star
10

applicationset-progressive-sync

Progressive sync controller for Argo ApplicationSet
Go
124
star
11

skyscanner-python-sdk

Skyscanner Python SDK
Python
121
star
12

full-stack-recruitment-test

JavaScript
110
star
13

backpack-ios

Backpack Design System
Swift
108
star
14

sonar-secrets

SonarQube plugin for identifying hardcoded secrets, such as passwords, API keys, AWS credentials, etc..
Java
99
star
15

pyfailsafe

Simple failure handling. Failsafe implementation in Python
Python
89
star
16

kms-issuer

KMS issuer is a cert-manager Certificate Request controller that uses AWS KMS to sign the certificate request.
Go
61
star
17

backpack-react-native

Backpack Design System
JavaScript
49
star
18

pycfmodel

A python model for Cloud Formation scripts
Python
27
star
19

ensure-node-env

A script that helps ensure you have the correct node & npm versions installed in your environment.
JavaScript
19
star
20

historical-bank-ruby

A Ruby Bank that serves historical exchange rates
Ruby
15
star
21

gradle-time-logger-plugin

Gradle plugin to log your build time
Kotlin
12
star
22

stylelint-config-skyscanner

Skyscanner's very own stylelint config.
JavaScript
10
star
23

gha-aws-oidc-sample

Enforcing per-repo privileges on AWS with GitHub Actions OIDC, without session tags
9
star
24

backpack-foundations

The foundational repo for Backpack platforms
JavaScript
9
star
25

eslint-config-skyscanner

Skyscanner's ESLint configuration
JavaScript
7
star
26

skyscanner-contentful-management

CLI tool for performing bulk actions with content managed using Contentful
Python
7
star
27

backpack-docs

Backpack design system's docs
JavaScript
7
star
28

skyscanner.github.io

Homepage of Skyscanner Open Source Software https://skyscanner.github.io
JavaScript
5
star
29

cra-template-backpack

The Backpack template used for Backpack React Scripts app creation.
HTML
4
star
30

backpack-node-sass

Parallelised node-sass with Backpack support.
JavaScript
3
star
31

OpenTSDB-rollup

Spark job generating rollup data points from a snapshot of an OpenTSDB raw data table
Java
3
star
32

backpack-usage-analyser

A tool to analyse the usage of Backpack resources in codebases.
JavaScript
2
star
33

grpc-asyncio

Python
2
star
34

eslint-plugin-backpack

JavaScript
1
star
35

eslint-config-skyscanner-with-prettier

Skyscanner's eslint config with additional support for Prettier
JavaScript
1
star
36

helm-argocd-appofapps

A helm chart that provides a relatively simple app of apps pattern
Smarty
1
star