Skip to content

Styling

A vast space with many patterns to get lost in if you are a new developer. This page serves as a guide to making cleaner succinct styling for our applications.

PrimeFlex

In Computational Sciences, we leverage PrimeNG for our applications to make component development faster. Similarly, PrimeFlex is a css utility for
reducing complexity around css properties.

FlexBox vs Grid

Please see this video if you are very unsure what to do. However I will summarize it below.

If we want a FLEXIBLE layout (the layout adapts to fit the content), we use flex.

Flex works very "fluid" like and only in a single direction. This type of layout is a bit more complex but works well when you don't care about how elements wrap underneath. When dealing with items of varying sizes, flexbox can automatically adjust their sizes to fit within the container, which is useful for items like navigation menus, toolbars, or lists.

If we want a more fixed layout (the content adapts to fit the layout), we use grid.

Grid is exactly how it sounds, it works in 2-dimensions, where flex only works in one. A general rule that people have found that works well is for the larger page layouts to use grid and for the smaller components and things that would not necessarily require structure to use flex. Grid is well-suited for complex multi-column layouts, such as magazine-style layouts, dashboard grids, or any design that requires precise control over the placement of items within the grid.

Utility Classes

Warning

If you find yourself constantly making the basic classes like ".bold", ".margin-left" ".padding-left". YOU ARE DOING SOMETHING WRONG

PrimeFlex gives you amazingly simple classes that you can reuse anywhere.

Quicklinks

These are a subset of provided classes.

The result of utility usage should be smaller and simpler css for your components.

Info

If you find that you are reusing the same classes in the same components often. It is a sign that you need to modularize (or create new) components more for encapsulation.

SASSY Stylesheets (SCSS)

The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.

If you must write css, we opt to use scss syntax which will be compiled to css at build time. We use this for a variety of reasons but most importantly to reduce complexity see the following example:

"""

// CSS
.card {
    margin: 10px;
}
.card .title {
    color: red;
}

// SCSS
.card {
    margin:10px;
    & .title {
        color: red;
    }
}

"""

Notice how scss make things more concise, with large stylesheet files you could easily lose track of where you place similar styles. With scss, everything sticks together.

View Encapsulation

One of the biggest challenges when styling components used from another library is understanding Angular View Encapsulation.

For our use cases, view encapsulation prevents us from styling components and there is only two ways to deal with it. We recommend using a mix of the two.

First as a prerequisite encapsulate the entire application in styles.scss with a single class and drop all app specific styles underneath it.

    <html>
        <body class="my-app">
        </body>
    </hmtl>
    ---
    .my-app {
        // All other styles in here
    }

Global SCSS

To apply styles to prime components globally across your application. Simply add your styles to target the components in styles.scss.

Fine Grained Component SCSS

To fine grain apply styles to prime components you use only in a particular part of your app.

Additionally, we favor creating our own encapsulation for each component/page that we create. In our page scss we define something below while setting ViewEncapsulation.None.

    @Component({
      selector: 'about-component',
       template: `
            <div class="about-page">
                Everything else in here
            </div>
          `,
         styles: [
             .my-app .about-page {}
         ],
         encapsulation: ViewEncapsulation.None
    })

This will prevent us from leaking styles across our application however it will allow us to target any sub components with styles. If you do not scope your styles like this they will be leaking across your application.

Responsiveness

Almost 60% of all web traffic is through your phone. While most of our applications are complex visual science follow these guidelines when thinking about usability.

  1. All static content pages should be fully-response.
  2. Dynamic pages with complex displays should have a banner or note that the page works best on a bigger device.

Lean on your web designers for different device display. If you don't have access to one follow the tips below.

Key Tips

Prioritize Page Content

Display the most critical elements first on mobile. Remember that not all content must be shown on mobile. As more space is given start revealing less important content until you reach the full-featured mode on desktop screen.

Leverage your tools

Most browsers come with tools to help with responsive design. On chrome do the following:

  1. Right click > inspect
  2. To the left of the element tab click the small laptop icon

This allows you to view the page on a particular device or just resize between them.