Documentation
/**
* HELLO WORLD EXAMPLE
*
* @author nicolacastellanidev@gmail.com
* @desc the root stylesheet, don't rename stylesheets export
*/
const { generics } = require('./partials/generics');
/**
* Core stylesheet
*/
const stylesheets = {
root: {
selector: "body",
padding: 0,
margin: 0,
width: '100vw',
height: '100vh',
align: 'center column',
children: [
...generics
]
}
};
module.exports = {
stylesheets,
};
As you can see the main stylesheets component defines a :root selector, wich is the starting
point for JSSheet.
git clone https://github.com/NicolaLC/js-sheet.git
cd js-sheet/tutorials/hello-world
yarn yarn dev
const stylesheets = {
root: {
selector: "body",
...bodyProps
children: [...childrens]
}
};
module.exports = {
stylesheets
};
As you can see it defines a root selector, wich is the main selector to starts with, and exports
a stylesheets variable wich will be
used for JSS parsing.
Remember to start from this file, and include (by imports) your partials!
/// Get partials
const { body } = require("./partials/body");
const { header } = require("./partials/header");
const { footer } = require("./partials/footer");
const stylesheets = {
root: {
selector: "body",
...bodyProps
children: [
body,
header,
footer
]
}
};
module.exports = {
stylesheets
};
By this way you can organize your styles into different files, to improve your styles
readability.
/**
* HEADER PARTIAL
*/
const header = {
selector: ".Header",
...headerProps,
children: [
...headerChildrens
]
};
module.exports = {
header
};
As you can see this partials is the same of the main styles.js file, except for root selector. Remember
to include your partials into the styles.js file
to see your properties in action.
[...]
const colors = {
primary: "#323232",
secondary: "lawngreen",
tertiary: "rgba(255,255,255,1)",
dark: "rgb(0,0,0)"
};
[...]
module.exports = {
colors,
otherVars
};
As you can see we have defined and exported a colors variable in your variables.js
file.
Now we can use this variables in your JSSheets:
[...]
// import the variables first in your stylesheet
const {colors} = require('path/to/variables.js');
[...]
// then use it in your styles:
const stylesheets = {
root: {
selector: "body",
backgroundColor: colors.primary
[...]
}
};
[...]
By this way you can edit the colors once in your variables.js file to propagate the edit to all the
stylesheets!
const widthByPadding = (padding) => `calc(100% - ${padding}*2)`;
This method returns a dynamic css property, a 100% width minus the padding passed. We can use this
method in our styles:
[...]
width: widthByPadding('1rem'),
[...]
You can now define a global shared file (e.g. mixins.js) wich defines and exports the global
method, and reuse it in your stylesheets!
align: 'center';
This shortcut will create a flexbox layout item:Cool, I'm on center!
Cool, I'm on center!
| Property | CSS relative code |
|---|---|
| row | flex-direction: row |
| column | flex-direction: column |
| top | align-items: flex-start |
| bottom | align-items: flex-end |
| center | align-items: center + justify-content: center |
| left | justify-content: flex-start |
| right | justify-content: flex-end |
gridTemplate: {
columns: 'repeat( 33.33%, minmax(250px, 1fr) );'
rows: 'repeat( 33.33%, minmax(250px, 1fr) );'
},
Result:
1-1
1-2
1-3
2-1
2-2
2-3
3-1
3-2
3-3
| Property | CSS relative code |
|---|---|
| fontFamily | font-family |
| fontSize | font-size |
| fontWeight | font-weight |
| overflowX | overflow-x |
| overflowY | overflow-y |
| zIndex | z-index |
| boxShadow | box-shadow |
| textShadow | text-shadow |
| whiteSpace | white-space |
| borderBottom | border-bottom |
| borderTop | border-top |
| borderLeft | border-left |
| borderRight | border-right |
| letterSpacing | letter-spacing |
| maxWidth | max-width |
| maxHeight | max-height |
| textAlign | text-align |
| textTransform | text-transform |
| backgroundColor | background-color |
| textDecoration | text-decoration |