Home

The Breakpoints Support Strategy

Before starting your project, you need to define the breakpoints you will use. The breakpoints are the points where the layout of your web application will change. TFCSSF supports several breakpoints, from generics (all devices) to mobile, tablet, desktop, and widescreen.

First, check your designs

The first step is to check your designs and identify the breakpoints needs. Most designs requiere only two breakpoints: mobile and desktop. But some other designs requiere tablet, widescreen, and other breakpoints. Here is a list of the most common strategies for breakpoints and this framework:

• No need to support mobile: use only the generics.css classes for your project. Remove sm.css, and md.css, lg.css files.
• Mobile and desktop: use the generics.css for when you have the requirement on all devices, and the sm.css for specific mobile rules (ex. .sm-display--block) and md.css for specific CSS rules (ex..md-display--flex).
• Mobile, tablet, and desktop: use the generics.css for when you have the requirement on all devices, and the sm.css for mobile rules (ex. .sm-display--block), md.css for tablet rules (ex. .md-display--flex), and lg.css for desktop all desktop rules.
• Mobile, tablet, desktop, and widescreen: use the generics.css for when you have the requirement on all devices, and the sm.css for mobile rules (ex. .sm-display--block), md.css for tablet rules (ex. .md-display--flex), lg.css for desktop rules (ex. .lg-display--flex), and xl.css for widescreen rules (ex. .xl-display--flex).

Breakpoint scales

The framework supports several breakpoints. From start, breakpoints only work if you specify the modifier --sm,--md, --lg, --xl, or --xxl. Unless you are usign these, then you will have true effect when resizing the screen. Otherwise, you will be applying mostly generic classes.

Most projects will only need the generics.css file along with the sm.css and md.css files. But if you need more breakpoints, you can add the files you need.

If you only need one design, you don't need to use breakpoints, everything it is supported by the generics.css rules. The generic rules work accross all the breakpoints. The rules are breakpoint agnostic. An example rule is:

Find out which breakpoint you're watching

The BreakpointIndicator component (React only) is really useful when you are building grids and layouts or working in anything else. It will display the current breakpoint you are watching and tell you the exact modifier: --sm, --md, --lg, --xl, or --xxl.

export default function Home(props) {
  return (
    <>
      <BreakpointIndicator />
    </>
    );
}