A stylin.js lightweight library for vanilla, to style builtin element using the prefix key in-
You just need to add the cdn (https://unpkg.com/@stylin.js/stylina@<version>) to your script tag with type="module", make sure that you add the correct version as you want, see our versions.
<html lang="en">
...
<body>
...
</body>
<script
type="module"
src="https://unpkg.com/@stylin.js/stylina@<version>"
></script>
</html>You must use CSS Properties as HTML attributes by passing the prefix in- as mention above. See the following code:
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 in-color="blue" in-background-color="red">
hello <strong in-color="green">world</strong>
</h1>
<h2 in-color="blue" in-background-color="red">
hi <small in-color="green">everyone</small>
</h2>
</body>
<script
type="module"
src="https://unpkg.com/@stylin.js/stylina@<version>"
></script>
</html>You can group defined style in a class and name him as you which, using the attribute in-def-class, see the following example:
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 in-color="blue" in-background-color="red" in-def-class="my-heading">
hello <strong in-color="green" in-def-class="my-emphasis">world</strong>
</h1>
<h2 in-color="blue" in-background-color="red">
hi <small in-color="green">everyone</small>
</h2>
</body>
<script
type="module"
src="https://unpkg.com/@stylin.js/stylina@<version>"
></script>
</html>For sure, you can reuse your pre-defined style, see the example:
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 in-color="blue" in-background-color="red" in-def-class="my-heading">
hello <strong in-color="green" in-def-class="my-emphasis">world</strong>
</h1>
<h2 in-use-class="my-heading">
hi <small in-use-class="my-emphasis">everyone</small>
</h2>
</body>
<script
type="module"
src="https://unpkg.com/@stylin.js/stylina@<version>"
></script>
</html>You can combine the in-def-class and in-use-class, to subscribe your styles, following example:
<!DOCTYPE html>
<html lang="en">
...
<body>
<div
in-use-class="circle"
in-background="green"
in-def-class="green-circle"
>
green
</div>
<div
in-def-class="circle"
in-width="4rem"
in-margin="1rem"
in-height="4rem"
in-color="white"
in-display="flex"
in-background="red"
in-font-weight="bold"
in-border-radius="50%"
in-align-items="center"
in-justify-content="center"
>
red
</div>
<div in-use-class="circle,green-circle">green</div>
</body>
<script
type="module"
src="https://unpkg.com/@stylin.js/stylina@<version>"
></script>
</html>- On above example, in the 1st element we have
in-use-class="circle"to declare that we will use this className; - and then we have a style
in-background="green"; - following by
in-def-class="green-circle"to declare that we are overwriting in class.circlea new style (background: green), in a combined class.green-circle.circle; - In the 2nd element, we are name all the styles as
.circle, using the attributein-def-class="circle"; - In the last element with
in-use-class="circle,green-circle"we are use both of declared classes,circle(to use circle styles) andgreen-circle(to overwrite the circle background color).
For pseudo selector after in- you must add on- following by the pseudo selector name, for example:
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 in-color="green" in-on-hover="color: red">hello world</h1>
</body>
<script
type="module"
src="https://unpkg.com/@stylin.js/stylina@<version>"
></script>
</html>For responsiveness you just must add the < symbol between styles breakpoints
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 in-color="green < blue < red < yellow" in-on-hover="color: red < black < gray < cyan" >
hello world
</h1>
</body>
<script
type="module"
src="https://unpkg.com/@stylin.js/stylina@<version>"
></script>
</html>Note: For breakpoints we are using mobile first bootstrap breakpoints, where:
- 1st style is for xs;
- 2nd style for sm;
- 3rd style for md;
- 4th style for lg;
- 5th style for xl;
- and 6th for xxl.