Giter Site home page Giter Site logo

jessicarobins / bulma-native Goto Github PK

View Code? Open in Web Editor NEW
11.0 1.0 1.0 10.32 MB

React Native port of Bulma components

Home Page: https://jessicarobins.github.io/bulma-native/

TypeScript 89.25% JavaScript 10.75%
react-native bulma bulma-extensions bulma-ui react-native-component component-library

bulma-native's Introduction

Bulma Native

Bulma Native is a React Native port of the amazing CSS component library, Bulma.

Getting started

This guide will help you start using Bulma Native components in your React Native app.

If you have not already set up a React Native project, please refer to the React Native documentation to get started. Bulma Native will work with both Expo and vanilla React Native projects.

Install

yarn add @jrobins/bulma-native

Installing Icons

If you would like to use components that include icons, and you are not using Expo, you will also need to add React Native Vector Icons and follow its installation instructions.

If you are using Expo, Icons are already built in via the @expo/vector-icons library.

For more information on icon installation and usage, see the Bulma Native Storybook page for Icons

Documentation

Documentation for the Bulma Native component library lives in the Bulma Native Storybook. There, you can preview components, view and interactively set their props, and copy sample code. This Storybook also contains information on setting up theming.

Caveat

The components in this Storybook were adapted to web using React Native Web. As such, components are not guaranteed to be 100% accurate reflection of what they would look like on a device.

Sub-caveat

The Image component relies on a prop specific to React Native. As such, it does not display on web. I am currently working on a solution for this, as well as a solution for previewing components using Expo Snacks.

bulma-native's People

Contributors

jessicarobins avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

xendke

bulma-native's Issues

Build out documentation website

  • put back expo storybook
  • figure out how to get RN story book and web story book to co-exist (tsconfig, etc)

Docs

  • setup
  • icon
  • ApplicationProvider
  • image (aspect ratio doesn't work on web)
  • theming/variables
  • motivation
  • useTheme

things that aren't working on web:

  • image
  • progress
  • title (this is not just web)
  • select
  • overlays

Bugs

  • something is wrong with default Button color
  • line heights probably need to be fixed

Add License?

Hello. This package looks nice, but there's probably some legal issues with other people using it right now. Perhaps consider adding a license?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.