Skip to main content

RamBase Guidelines

Component layout

We are using flexbox to create components layout, aims at providing a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown and/or dynamic. This input fields are mobile friendly. Still if you need some customization we have made that also easy to do with some extra classes and open to use style.

Input fields are set min-width 150px and maximum with of 350px, this size are designed after testing in many devices and applications. But still you can customize the components as you wish you will learn that in below explanation.

Regular use of flexbox

As shown below always have the “flex” class for container of the component along with "rb-input-form” and if your using "<rb-input>" flex relational classes will apply automatically.

<div class="rb-input-form flex">


Input field with icon

There are occasions input fields will carry an action/ information icon next to input field such situation you can use this "customflex" to place icon next to input

<div class="customflex">
 	<rb-input class="flexElementCont"></rb-input>
    <div class="flexElementIcon">
        <i class="icon-plus"></i>

Custom size of element

Even though we defined min and max width of a input field area still you have option to customize input fields using some CSS attributes. Follow below example

<div class=”flex”>
 	<rb-input style=”max-width:100px;”></rb-input>
    <rb-input style=”max-width:450px;”></rb-input>

Full width elements

If you need to have the input field to be fill the container you can use "fullwidth" class with along with other as shown below