View the complete documentation for this repo at: https://ronniesan.gitbook.io/remix-css/
About Remix CSS
Remix CSS is a themable CSS starter kit. It resets default browser styles and add simple, yet desirable styling to standard HTML elements. Remix CSS also includes a basic flexbox-based grid system and responsive styling.
Using this package has the following requirements:
- ES6 support - such as Webpack with Babel
- LessCSS compiler
Install the package as a dependency.$ npm install --save-dev remix-css
Import the ResponsiveStyles script into your webpack entry file and init it.;SnapResponsive;
Import the default theme (or your custom theme) into your entry file.;
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.
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-<width> style will hide the element on all other widths.
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.
<!-- CREATE A THREE COLUMN LAYOUT WITH DEFAULT GUTTER WIDTH (FROM THEME FILE) -->COLUMN ONECOLUMN TWOCOLUMN THREE<!-- CREATE A THREE COLUMN LAYOUT WITH CUSTOM GUTTER WIDTH (SET IN STYLES BELOW) -->COLUMN ONECOLUMN TWOCOLUMN THREE<!-- CREATE A THREE COLUMN LAYOUT WITH NO GUTTERS -->COLUMN ONECOLUMN TWOCOLUMN THREE
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.
HOMEABOUTCONTACTLOGIN <!-- This one will only take up as much room as it needs -->
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)...
LABEL GOES HEREFORM FIELD GOES HERE
Wrap each form element in the appropriate wrapper element...
<!-- Text Inputs (text, number, password, email, tel) --><!-- Textareas --><!-- Selects -->Select One<!-- Radio Buttons --><!-- Checkboxes --><!-- Button Structure -->BUTTON TEXT
Inputs with types equal to
button do not need to be wrapped.
When creating tables, make sure to use the proper format with
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.
A few convenience styles are available for changing colors. You can use
bkg-color-<color_name> on an element to change the background color of it (
color_name is one of the main color variables in the theme or
accent). You can also use
text-color-<color_name> 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:
Using those mixins for button or link styles will also add hover styles to them.
A few utility styles are included to help you make quick adjustments to your styles.
borderlessclass will remove a border from any element.
coverclass will make an element position absolutely over a relative parent and cover it completely.
display: none;an element.
hiddenclass will change an element to
invisibleclass will change an element to
centerclasses will change the
text-alignproperty of an element.
Remix CSS acts as the foundation layer to your site's styles. You can easily theme it by making a copy of the default theme file (default.theme.less) and adjusting the variables to your liking. Once you've updated the variable values, just add your own styles to override or compliment the ones set by Remix CSS.