@congritta-ui/base
@congritta-ui/base is required module for all Congritta UI libs working.
Let's install it
yarn add @congritta-ui/base
after this, import it once into entry point of your project (that file where ReactDOM.render
or ReactDOM.createRoot
):
import '@congritta-ui/base';
If you need, you can import your CSS files AFTER importing @congritta-ui libs
CSS Vars
Provide these CSS vars to apply some styles. What value to use as var value - you decide ("px" or "em" or "%" and so on)
CSS Variable | CSS property when used | Description |
---|---|---|
--cui-css-transition | transition , animation | Default CSS transition duration |
--cui-accent-color-... | background , color , border-color and more... | Accent color shades (--cui-accent-color-50 , --cui-accent-color-100 ,... --cui-accent-color-900 ) (step 100) |
--cui-inputs-height | min-height , height | Base height in pixels for text inputs, buttons, one-row textareas and so on |
--cui-inputs-horizontal-padding | padding | Horizontal padding between inputs edges and their contents |
--cui-buttons-gap | gap | Gap between elements in buttons |
--cui-gap-between-inputs | gap , margin | Gap between form elements (inputs, buttons and so on) |
How to provide CSS Vars
Just create your own CSS file and fill it with code like below.
:root {
--cui-inputs-height: 50px;
}
All CSS vars have default values so you don't need to specify them all.
Important: Import CSS with your vars AFTER importing @congritta-ui/base
.
How to make additional styles
Just write your CSS files with your own styles. You can learn source code of all Congritta UI libs. You also can provide CSS for Congritta UI components (read more in them docs).
How to change page fonts
- Import fonts from any CDN if needed;
- In your CSS file, create
body
selector and give themfont
property with neccessary value
What is @congritta-ui/base
This is basic CSS styles for all Congritta components; so it's no need to repeat same CSS across Congritta-UI compoents.
Base HTML styles
There are basic styles for html
, body
, svg
, img
, audio
, video
, iframe
elements
Inputs styles
There are basic styles for input elements like input
, button
and textarea
. All inputs are display: block
and width: 100%
in default.
Buttons may have class _isDuctile
for making button auto width'ed and class _isZeroed
for removing all styles from button (in this case, we get transparent button with no background, padding, borders and so on.).
There are basic form
element styles with 100% width, display block and margin top 1em.
There is .form-label
class for making input labels.
There is .fields-wrapper
class for making responsive forms. There are some cases:
form
.fields-wrapper
input input input
input input
.fields-wrapper
input
.fields-wrapper
.form-label
input
.fields-wrapper
.fields-wrapper
.form-label
input
.fields-wrapper
.form-label
input
.fields-wrapper
button
Typography
There are basic styles for h1
, h2
, h3
, h4
, h5
, h6
, p
, ul
, ol
, li
, a
elements
Classes
There are most used in web helpful classes:
Flex: .flex
, .flex-ais
, .flex-aic
, .flex-aifs
, .flex-aie
, .flex-jcfs
, .flex-jcfe
, .flex-jcsb
, .flex-jcc
, .flex-jcsa
, .flex-wrap
, flex-nowrap
In future @congritta-ui/base releases, there will be more classes
Source code
You can learn source code to find CSS selectors. You can write you CSS with same selectors and overwrtie existing or add styles