Skip to content

Commit

Permalink
Merge pull request #73 from galio-org/Alpha-1
Browse files Browse the repository at this point in the history 
v0.5
  • Loading branch information
@palingheorghe
palingheorghe committed Feb 27, 2019
2 parents 3555681 + b9b2590 commit 26ebf62
Show file tree
Hide file tree
Showing 9 changed files with 763 additions and 150 deletions.
204 changes: 58 additions & 146 deletions README.md
View file
Expand Up @@ -6,9 +6,12 @@
[![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/galio-org/galio.svg)](https://github.com/galio-org/galio/pulls?q=is%3Apr+is%3Aclosed)
[![Gitter](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/galio-community)
[![npm](https://img.shields.io/npm/dm/galio-framework.svg)](https://www.npmjs.com/package/galio-framework)
[![Backers on Open Collective](https://opencollective.com/galio/backers/badge.svg)](#backers)
[![Sponsors on Open Collective](https://opencollective.com/galio/sponsors/badge.svg)](#sponsors)


<img src="assets/galio_thumbnail.jpg">
<p align="center">
<img src="assets/galio_thumbnail.jpg">
</p>

Galio is a 100% free and open source project, licensed under MIT License. You'll be building Android and iOS apps in style. Galio will always remain free to use and it is powered by a massive world-wide community.
It comes with a lot of carefully crafted, ready to be used components and a beautiful typography. Galio has a gorgeous base theme that adapts to each project.
Expand All @@ -17,41 +20,49 @@ Built with real app examples, component demos, guides, and how-to's to get you u
## Table of Contents
* [Quick start](#quick-start)
* [Components](#components)
* [Examples](#examples)
* [Documentation](#documentation)
* [Resources](#resources)
* [Reporting Issues](#reporting-issues)
* [Licensing](#licensing)
* [Useful Links](#useful-links)

<p align="center">
<img src="https://raw.githubusercontent.com/galio-org/galio-org.github.io/master/img/readme3.jpg">
</p>

## Quick Start

#### 1. Project Setup

Go ahead and install the app version of Galio in order to play around with our components and screens!

```bash
git clone https://github.com/galio-org/galio.git
cd galio
git checkout examples
npm install or yarn install
```

#### 2. Project testing
Terminal cli:
`npm run ios` or `yarn run ios`
Terminal cli: ```expo start```

After initializing your local server you are now able to test the app inside your simulator by running: `npm run ios` or `yarn run ios` (or try an Android simulator)

User our iOS or Android app to directly view Expo projects on your phone.
Use our iOS or Android app directly on your physical device by running it inside Expo!

[Expo iOS app](https://itunes.apple.com/us/app/expo-client/id982107779?mt=8)

[Expo Android app](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en)

#### 3. SDK library instructions
Use our awesome components inside your own projects by running:
```bash
npm install galio-framework
```
or
```sh
yarn add galio-framework
```
Import UI components to new screens:
Import our UI components to your screens:
```js
import { Block, Button, Card, Icon, Input, NavBar, Text } from 'galio-framework';
```
Expand All @@ -60,112 +71,18 @@ import { Block, Button, Card, Icon, Input, NavBar, Text } from 'galio-framework'

Under Galio's belt:

:white_check_mark: NavBar

:white_check_mark: Block

:white_check_mark: Card

:white_check_mark: Button

:white_check_mark: Icon

:white_check_mark: Input

:white_check_mark: Text

:construction: Will follow: :construction:

TBA

## Examples

Here we will showcase some screens and some sample code of how we've used Galio in order to create them.

<img src="http://oi65.tinypic.com/2i9m8oz.jpg" width="150" height="320">

```js
renderCard = (props, index) => {
const gradientColors = index % 2 ? GRADIENT_PINK : GRADIENT_BLUE;

return (
<Block row center card shadow space="between" style={styles.card} key={props.title}>
<Gradient
start={[0.45, 0.45]}
end={[0.90, 0.90]}
colors={gradientColors}
style={[styles.gradient, styles.left]}
>
<Icon
size={BASE_SIZE}
name={props.icon}
color={COLOR_WHITE}
family={props.iconFamily}
/>
</Gradient>

<Block flex>
<Text h5>{props.title}</Text>
<Text muted>{props.subtitle}</Text>
</Block>
<Button style={styles.right}>
<Icon size={BASE_SIZE * 1.5} name="ios-arrow-forward" family="Ionicons" color={COLOR_GREY} />
</Button>
</Block>
);
}
```

<img src="http://oi68.tinypic.com/25hhggj.jpg" width="150" height="320">

```js
<Block flex space="between" center style={styles.absolute}>
<NavBar transparent leftIconColor={theme.COLORS.WHITE} onLeftPress={() => props.navigation.openDrawer()} />
<Block style={styles.articleSummary}>
<Block row style={{ marginBottom: theme.SIZES.BASE }}>
<Block row middle style={{ marginHorizontal: theme.SIZES.BASE }}>
<Icon name="eye" family="MaterialCommunityIcons" color={theme.COLORS.WHITE} size={theme.SIZES.FONT * 0.8} />
<Text p color={theme.COLORS.WHITE} style={{ marginLeft: theme.SIZES.BASE * 0.25 }}>25.2k</Text>
</Block>
<Block row middle>
<Icon name="heart-outline" family="MaterialCommunityIcons" color={theme.COLORS.WHITE} size={theme.SIZES.FONT * 0.8} />
<Text p color={theme.COLORS.WHITE} style={{ marginLeft: theme.SIZES.BASE * 0.25 }}>936</Text>
</Block>
</Block>
{/*...more code in the open source files...*/}
</Block>
</Block>
```
<img src="http://oi66.tinypic.com/el5oqh.jpg" width="150" height="320">

```js
<Block>
<Input
rounded
type="email-address"
placeholder="Email"
autoCapitalize="none"
style={{ width: width * 0.9 }}
onChangeText={text => this.handleChange('email', text)}
/>
<Input
rounded
password
viewPass
placeholder="Password"
style={{ width: width * 0.9 }}
onChangeText={text => this.handleChange('password', text)}
/>
<Text
color={theme.COLORS.ERROR}
size={theme.SIZES.FONT * 0.75}
onPress={() => Alert.alert('Not implemented')}
style={{ alignSelf: 'flex-end', lineHeight: theme.SIZES.FONT * 2 }}
>
Forgot your password?
</Text>
</Block>
```
* Block
* Button
* Card
* Checkbox
* Icon
* Input
* NavBar
* Radio
* Slider
* Text
* Switch
* GalioTheme

## Documentation

Expand All @@ -188,43 +105,38 @@ We use GitHub Issues as the official bug tracker for Galio. Here are some advice

## Contributors

[//]: contributor-faces
<a href="https://github.com/hetmann" target="_blank">
<img src="https://avatars.githubusercontent.com/u/3584560?v=3" title="hetmann" width="80" height="80">
</a>
<a href="https://github.com/palingheorghe" target="_blank">
<img src="https://avatars.githubusercontent.com/u/15977949?v=3" title="palingheorghe" width="80" height="80">
</a>
<a href="https://github.com/steefan" target="_blank">
<img src="https://avatars.githubusercontent.com/u/13517497?v=3" title="steefan" width="80" height="80">
</a>
<a href="https://github.com/paullaros" target="_blank">
<img src="https://avatars.githubusercontent.com/u/1512219?v=3" title="paullaros" width="80" height="80">
</a>
<a href="https://github.com/rarestoma" target="_blank">
<img src="https://avatars.githubusercontent.com/u/27827318?v=3" title="rarestoma" width="80" height="80">
</a>
<a href="https://github.com/marqbeniamin" target="_blank">
<img src="https://avatars.githubusercontent.com/u/4600172?v=3" title="marqbeniamin" width="80" height="80">
</a>
<a href="https://github.com/EINazare" target="_blank">
<img src="https://avatars.githubusercontent.com/u/26245512?v=3" title="EINazare" width="80" height="80">
</a>
<a href="https://github.com/galio-profile" target="_blank">
<img src="https://avatars.githubusercontent.com/u/40339237?v=3" title="galio-profile" width="80" height="80">
</a>
[//]: contributor-faces
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
<a href="https://github.com/galio-org/galio/contributors"><img src="https://opencollective.com/galio/contributors.svg?width=890&button=false" /></a>


## Backers

Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/galio#backer)]

<a href="https://opencollective.com/galio#backers" target="_blank"><img src="https://opencollective.com/galio/backers.svg?width=890"></a>


## Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/galio#sponsor)]

<a href="https://opencollective.com/galio/sponsor/0/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/1/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/2/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/3/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/4/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/5/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/6/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/7/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/8/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/galio/sponsor/9/website" target="_blank"><img src="https://opencollective.com/galio/sponsor/9/avatar.svg"></a>

## Licensing

* Licensed under MIT (<https://github.com/galio-org/galio/blob/master/LICENSE>)

## Useful Links
© 2019 [Galio](https://galio.io), made with 💚 for the community.


Tutorials: coming soon...

Freebies from Galio Team: coming soon...

© 2018 [Galio](https://galio.io), made with love for apps.
13 changes: 11 additions & 2 deletions package.json
View file
@@ -1,7 +1,7 @@
{
"name": "galio-framework",
"main": "src/index.js",
"version": "0.4.4",
"version": "0.5.0",
"files": [
"src/"
],
Expand All @@ -25,7 +25,12 @@
],
"scripts": {
"precommit": "yarn lint",
"lint": "eslint src/**.js"
"lint": "eslint src/**.js",
"test": "jest",
"postinstall": "opencollective-postinstall"
},
"dependencies": {
"opencollective-postinstall": "^2.0.1"
},
"devDependencies": {
"expo": "^32.0.0",
Expand All @@ -42,6 +47,10 @@
"react-native": "*",
"react-native-vector-icons": "*"
},
"collective": {
"type": "opencollective",
"url": "https://opencollective.com/galio"
},
"eslintConfig": {
"extends": "universe/native"
}
Expand Down

0 comments on commit 26ebf62

Please sign in to comment.