Super JSS: A Library for Responsive CSS Styles

Super JSS is a library for handling responsive CSS styles using JSON objects in Angular. It provides a simple way to define styles and create responsive layouts for your applications.

Basic Implementation

The basic implementation of Super JSS is simple. To get started with super-jss, you'll first need to install it via npm. You can do this by running the following command:

npm install super-jss

and on the app.module.ts

import { SuperJssModule } from 'super-jss';

@NgModule({imports: [SuperJssModule] })

Once installed, all you need to do is add the sj directive to the HTML element and pass a JSON object with the desired styles as its value.

For example, if you want to set the background color of a div element to red and its text color to white, you can do it like this:

<div [sj]="{ backgroundColor: 'red', color: 'white' }">Hello World</div>

Super JSS also supports more complex styles such as flexbox layouts and responsive design.

Typography

SuperJSS comes with a typography system, you just need to add the directive to the html element.

<div>
  <h1 [sj]>Hello world H1</h1>
  <h2 [sj]>Hello world H1</h2>
  <h3 [sj]>Hello world H3</h3>
  <h4 [sj]>Hello world h4</h4>
  <h5 [sj]>Hello world H5</h5>
  <h6 [sj]>Hello world H6</h6>
  <p [sj]>Hello world P</p>
  <span [sj]>Hello world span</span>
</div>

How Responsive System Works and a Flexbox Implementation Example

One of the key features of Super JSS is its responsive system. You can define styles for different screen sizes by using the xs, sm, md, lg, and xl keys in your JSON object. Super JSS will automatically apply the appropriate styles based on the screen size.

Here’s an example of how you can use Super JSS to create a responsive flexbox layout:

<div [sj]="{
    backgroundColor: { xs: 'red', sm: 'blue', md: 'green', lg: 'purple', xl: 'orange' },
    color: { xs: 'white', md: 'gray' },
    display: 'flex',
    justifyContent: 'center',
    padding: '3rem'
  }">
  Hello World
</div>

In this example, the background color of the div element will be red on extra-small screens, blue on small screens, green on medium screens, purple on large screens, and orange on extra-large screens. The text color will be white on extra-small and small screens, and gray on medium screens and above. The display and justify-content styles will always be applied, regardless of screen size.

How to Implement Themes

Super JSS also provides a way to implement themes. Themes allow you to define a set of styles that can be reused across your application. You can define themes using the SJssTheme interface and the SJssThemeService provider.

Here’s an example of how to use themes in Super JSS:

import { Component } from '@angular/core';
import { SJssTheme, SJssThemeService } from 'super-jss';

@Component({
  selector: 'app-root',
  template: `
    <div [sj]="{ xs: theme.palette.primary.main, sm: theme.palette.primary.light }">Hello World, SJss Class</div>
  `,
})
export class AppComponent {
  theme: SJssTheme;
  constructor(themeService: SJssThemeService) {
    this.theme = themeService.defaultTheme();
  }
}

In this example, the SJssThemeService is injected into the AppComponent constructor. The defaultTheme method is used to get the default theme, which is defined in the SJssTheme interface. The theme is then applied to the div element using the sj directive.

How to override the theme

Please check it in the next article: https://medium.com/@viejorichard/super-jss-how-to-override-a-theme-64d8da14e3fb

Conclusion

Super JSS is a powerful library for creating responsive CSS styles in Angular. It provides a simple way to define styles and layouts using JSON objects, and supports responsive design and theming. By using Super JSS, you can create beautiful and responsive web applications with ease.

External Examples

Here are some examples of our library in action on StackBlitz:

Basic implementation: https://stackblitz.com/edit/angular-ivy-vewzoz

How flexboxes work: https://stackblitz.com/edit/angular-ivy-ieshja

Theme handler: https://stackblitz.com/edit/angular-ivy-atzazr