Themable CSS styling for websites and web applications
npm install remix-cssView the complete documentation for this repo at: https://ronniesan.gitbook.io/remix-css/
1. Install the package as a dependency.
``bash`
$ npm install --save-dev remix-css
2. Import the ResponsiveStyles script into your webpack entry file and init it.
`js`
import { SnapResponsive } from 'remix-css';
SnapResponsive.init();
3. Import the default theme (or your custom theme) into your entry file.
`js`
import 'remix-css/default.theme.less';
#### Responsive Styles
Remix CSS uses snap responsiveness--container elements will snap to specific width when the window dimensions fall between certain size ranges. Using snap responsiveness is a great way to deliver a consistent design experience across different devices without having to update styles for an infinite number of window widths. Snap responsiveness works well because almost mobile/tablet devices can scale the viewport to fill the screen.
Remix CSS includes some responsive mixins to make styling for the different snap sizes easy. Simply nest one of the mixins with size-specific styling.
`css
.my-class {
color: @blue;
.laptop({
color: @red;
});
.tablet({
color: @purple;
});
.mobile({
color: @green;
});
}
`
In the code above, the text inside of elements with the class my-class will change color depending on the screen width. Responsive styles are categorized into five main widths--full, desktop, laptop, tablet, and mobile.
You can show and hide elements on a specific width using modifier classes like show-tablet or hide-mobile. The show- style will hide the element on all other widths.
#### Grid Layouts
Remix CSS makes it very easy to structure a site using flex box. Following the correct nesting structure allows you to create grid layouts very easily.
`html
COLUMN ONE
COLUMN TWO
COLUMN THREE
`less
.custom-gutter {
.gutter-size(50px);
}
`Grid layouts will wrap and stack responsively. If you just want to use flexbox on an arbitrary element, you can use the special
flex-h (horizontal) and flex-v (vertical) classes.`html
`#### Form Elements
One caveat to using Remix CSS is that some elements require specific structure to render as expected. Form elements fall into this category. Use the following guidelines when creating form elements.
Use the following structure to wrap your form controls (similar to bootstrap)...
`html
FORM FIELD GOES HERE
`Wrap each form element in the appropriate wrapper element...
`html
`Inputs with types equal to
submit, reset, and button do not need to be wrapped.#### Tables
When creating tables, make sure to use the proper format with
thead and tbody tags. Using the striped class on the table element will add zebra-striping to it and using the bordered class will add a border.#### Colors
A few convenience styles are available for changing colors. You can use
bkg-color- on an element to change the background color of it (color_name is one of the main color variables in the theme or primary, secondary, or accent). You can also use text-color- to change the color of the text in an element.You can also use the provided mixins to quickly add color styles to your own classes:
`less
.my-class {
.bkg-color(#FF0000);
.text-color(@gray-65);
}
`Using those mixins for button or link styles will also add hover styles to them.
#### Utility Styles
A few utility styles are included to help you make quick adjustments to your styles.
* The
borderless class will remove a border from any element.
* The cover class will make an element position absolutely over a relative parent and cover it completely.
* The remove class will display: none; an element.
* The hidden class will change an element to visibility: hidden;.
* The invisible class will change an element to opacity: 0;.
* The justify-left, justify-right, and center classes will change the text-align` property of an element.