react-native-rimeso-styles

v1.2.0

Published

2 months ago

A comprehensive utility-first styling framework for React Native, inspired by Bootstrap 5

Downloads

0High
0Medium
0Low

sujeet_kumar

react-native styles css framework bootstrap bootstrap-5 utility-first mobile ios android flexbox layout responsive

Rimeso CSS Utility Classes for `React Native`

react-native-rimeso-styles - Utility-first design library inspired by frameworks like Bootstrap

This documentation provides an overview of the utility classes available in the Rimeso CSS library for React Native. These utility classes are designed to help you quickly apply styles to your components using familiar class names.

ScreenShots

Flexbox

d-flex: Applies display: flex to the component.
flex-1: Sets flex: 1, allowing the component to grow and shrink as needed.
flex-row: Sets flexDirection: row, arranging children horizontally.
flex-column: Sets flexDirection: column, arranging children vertically.
justify-content-start: Aligns children at the start of the container.
justify-content-end: Aligns children at the end of the container.
justify-content-center: Centers children horizontally within the container.
justify-content-between: Distributes children evenly with space between them.
justify-content-around: Distributes children with space around them.
align-items-start: Aligns children at the start of the cross axis.
align-items-end: Aligns children at the end of the cross axis.
align-items-center: Centers children vertically within the container.

Aspect Ratio

aspect-ratio-1: Sets the aspect ratio to 1:1.
aspect-ratio-16-9: Sets the aspect ratio to 16:9.
aspect-ratio-4-3: Sets the aspect ratio to 4:3.

Background Colors

bg-primary: Applies the primary background color.
bg-secondary: Applies the secondary background color.
bg-success: Applies the success background color (e.g., green).
bg-danger: Applies the danger background color (e.g., red).
bg-warning: Applies the warning background color (e.g., yellow).
bg-info: Applies the info background color (e.g., light blue).
bg-light: Applies a light background color.
bg-dark: Applies a dark background color.
bg-white: Applies a white background color.
bg-transparent: Applies a transparent background color.

Text Colors

text-primary: Applies the primary text color.
text-secondary: Applies the secondary text color.
text-success: Applies the success text color (e.g., green).
text-danger: Applies the danger text color (e.g., red).
text-warning: Applies the warning text color (e.g., yellow).
text-info: Applies the info text color (e.g., light blue).
text-light: Applies a light text color.
text-dark: Applies a dark text color.
text-white: Applies a white text color.
text-muted: Applies a muted text color.
text-black-50: Applies a semi-transparent black text color.
text-white-50: Applies a semi-transparent white text color.

Padding

p-0: Sets padding to 0%.
p-1: Sets padding to 4%.
p-2: Sets padding to 8%.
p-3: Sets padding to 16%.
p-4: Sets padding to 24%.
p-5: Sets padding to 32%.
pt-0: Sets top padding to 0%.
pt-1: Sets top padding to 4%.
pt-2: Sets top padding to 8%.
pt-3: Sets top padding to 16%.
pt-4: Sets top padding to 24%.
pt-5: Sets top padding to 32%.
pb-0: Sets bottom padding to 0%.
pb-1: Sets bottom padding to 4%.
pb-2: Sets bottom padding to 8%.
pb-3: Sets bottom padding to 16%.
pb-4: Sets bottom padding to 24%.
pb-5: Sets bottom padding to 32%.
pl-0: Sets left padding to 0%.
pl-1: Sets left padding to 4%.
pl-2: Sets left padding to 8%.
pl-3: Sets left padding to 16%.
pl-4: Sets left padding to 24%.
pl-5: Sets left padding to 32%.
pr-0: Sets right padding to 0%.
pr-1: Sets right padding to 4%.
pr-2: Sets right padding to 8%.
pr-3: Sets right padding to 16%.
pr-4: Sets right padding to 24%.
pr-5: Sets right padding to 32%.
py-0: Sets vertical padding to 0%.
py-1: Sets vertical padding to 4%.
py-2: Sets vertical padding to 8%.
py-3: Sets vertical padding to 16%.
py-4: Sets vertical padding to 24%.
py-5: Sets vertical padding to 32%.
px-0: Sets horizontal padding to 0%.
px-1: Sets horizontal padding to 4%.
px-2: Sets horizontal padding to 8%.
px-3: Sets horizontal padding to 16%.
px-4: Sets horizontal padding to 24%.
px-5: Sets horizontal padding to 32%.

Margin

m-0: Sets margin to 0%.
m-1: Sets margin to 4%.
m-2: Sets margin to 8%.
m-3: Sets margin to 16%.
m-4: Sets margin to 24%.
m-5: Sets margin to 32%.
mt-0: Sets top margin to 0%.
mt-1: Sets top margin to 4%.
mt-2: Sets top margin to 8%.
mt-3: Sets top margin to 16%.
mt-4: Sets top margin to 24%.
mt-5: Sets top margin to 32%.
mb-0: Sets bottom margin to 0%.
mb-1: Sets bottom margin to 4%.
mb-2: Sets bottom margin to 8%.
mb-3: Sets bottom margin to 16%.
mb-4: Sets bottom margin to 24%.
mb-5: Sets bottom margin to 32%.
ml-0: Sets left margin to 0%.
ml-1: Sets left margin to 4%.
ml-2: Sets left margin to 8%.
ml-3: Sets left margin to 16%.
ml-4: Sets left margin to 24%.
ml-5: Sets left margin to 32%.
mr-0: Sets right margin to 0%.
mr-1: Sets right margin to 4%.
mr-2: Sets right margin to 8%.
mr-3: Sets right margin to 16%.
mr-4: Sets right margin to 24%.
mr-5: Sets right margin to 32%.
my-0: Sets vertical margin to 0%.
my-1: Sets vertical margin to 4%.
my-2: Sets vertical margin to 8%.
my-3: Sets vertical margin to 16%.
my-4: Sets vertical margin to 24%.
my-5: Sets vertical margin to 32%.
mx-0: Sets horizontal margin to 0%.
mx-1: Sets horizontal margin to 4%.
mx-2: Sets horizontal margin to 8%.
mx-3: Sets horizontal margin to 16%.
mx-4: Sets horizontal margin to 24%.
mx-5: Sets horizontal margin to 32%.

Border Radius

rounded: Applies a default border radius.
rounded-top: Applies border radius to the top corners.
rounded-end: Applies border radius to the end corners.
rounded-bottom: Applies border radius to the bottom corners.
rounded-start: Applies border radius to the start corners.
rounded-circle: Applies a border radius that makes the component circular.
rounded-pill: Applies a border radius that makes the component pill-shaped.
rounded-0: Removes border radius.

Width and Height

w-25: Sets width to 25%.
w-50: Sets width to 50%.
w-75: Sets width to 75%.
w-100: Sets width to 100%.
h-25: Sets height to 25%.
h-50: Sets height to 50%.
h-75: Sets height to 75%.
h-100: Sets height to 100%.

Text Alignment

text-left: Aligns text to the left.
text-center: Centers text.
text-right: Aligns text to the right.

Font Weight

font-weight-bold: Applies bold font weight.
font-weight-normal: Applies normal font weight.
font-weight-light: Applies light font weight.

Position

position-static: Applies static positioning.
position-relative: Applies relative positioning.
position-absolute: Applies absolute positioning.

Position Offsets

top-0: Sets top offset to 0%.
top-50: Sets top offset to 50%.
top-100: Sets top offset to 100%.
bottom-0: Sets bottom offset to 0%.
bottom-50: Sets bottom offset to 50%.
bottom-100: Sets bottom offset to 100%.
start-0: Sets start offset to 0%.
start-50: Sets start offset to 50%.
start-100: Sets start offset to 100%.
end-0: Sets end offset to 0%.
end-50: Sets end offset to 50%.
end-100: Sets end offset to 100%.

New Updates (v1.2)

Added many new classes for react-native app which may help you to achive you best UI design.

Font Sizes

font-xs: Sets font size to extra small (12).
font-sm: Sets font size to small (14).
font-md: Sets font size to medium (16).
font-lg: Sets font size to large (18).
font-xl: Sets font size to extra large (20).
font-2xl: Sets font size to 2x large (24).
font-3xl: Sets font size to 3x large (30).

Line Height

line-height-1: Sets line height to 1.
line-height-sm: Sets line height to 1.25.
line-height-md: Sets line height to 1.5.
line-height-lg: Sets line height to 1.75.

Text Transform

text-uppercase: Transforms text to uppercase.
text-lowercase: Transforms text to lowercase.
text-capitalize: Capitalizes the first letter of each word.

Text Decoration

text-underline: Underlines the text.
text-line-through: Applies a line-through to the text.

Opacity

opacity-0: Sets opacity to 0.
opacity-25: Sets opacity to 0.25.
opacity-50: Sets opacity to 0.5.
opacity-75: Sets opacity to 0.75.
opacity-100: Sets opacity to 1.

Overflow

overflow-hidden: Hides overflow content.
overflow-visible: Shows overflow content.
overflow-scroll: Makes overflow content scrollable.

Z-Index

z-0: Sets z-index to 0.
z-10: Sets z-index to 10.
z-20: Sets z-index to 20.
z-30: Sets z-index to 30.
z-40: Sets z-index to 40.
z-50: Sets z-index to 50.

Elevation (for Android shadow)

elevation-1: Sets elevation to 1.
elevation-3: Sets elevation to 3.
elevation-5: Sets elevation to 5.

Shadow (for iOS)

shadow-sm: Applies a small shadow.
shadow-md: Applies a medium shadow.
shadow-lg: Applies a large shadow.

Border Width

border: Applies a 1px border.
border-0: Removes border.
border-2: Applies a 2px border.
border-4: Applies a 4px border.

Border Color

border-primary: Sets border color to primary.
border-secondary: Sets border color to secondary.
border-success: Sets border color to success.
border-danger: Sets border color to danger.

Text Align Vertical

text-align-auto: Sets vertical text alignment to auto.
text-align-top: Aligns text to the top vertically.
text-align-bottom: Aligns text to the bottom vertically.
text-align-center: Centers text vertically.

Flex Wrap

flex-wrap: Allows flex items to wrap.
flex-nowrap: Prevents flex items from wrapping.

Align Self

self-start: Aligns flex item to the start.
self-end: Aligns flex item to the end.
self-center: Centers flex item.
self-stretch: Stretches flex item to fill the container.

Resize Mode (for Image component)

resize-cover: Scales the image to cover the frame.
resize-contain: Scales the image to fit within the frame.
resize-stretch: Stretches the image to fit the frame.

Contributing

If you'd like to contribute to the project, please read our CONTRIBUTING.md file.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Contact

For any questions or feedback, please reach out to eamil.

Feel free to add more utility classes and update this documentation as needed. Happy styling!

Getting Started

To get started with react-native-rimeso-styles, follow these steps:

Install the Package

   npm install react-native-rimeso-styles

   yarn add react-native-rimeso-styles

How to use

First Import RnStyles or if you have required than also import combineStyles

import RnStyles, { combineStyles } from 'react-native-rimeso-styles';

import RnStylesProxy from 'react-native-rimeso-styles';

Than, you can use RnStyles inside styles attribute of our React-Native View Component , below you can see an example.

example:

import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
import RnStyles, { combineStyles } from 'react-native-rimeso-styles';

const App = () => {

  return (
    <View>
      <View style={combineStyles(RnStyles['d-flex justify-content-center'], styles.bg1, {
        padding: 34
      })}>
        <Text>Test without custom styles</Text>
      </View>
      <View style={combineStyles(
        RnStyles['d-flex justify-content-center align-items-center'],
        { backgroundColor: 'red' }
      )}>
        <Text>Test with custom styles</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  bg1: {
    backgroundColor: 'orange'
  }
})
export default App