Flexible Customization Options

Layouts Customization

Customize and extend Atomix layout components to match your unique requirements. From quick CSS variable tweaks to complete custom implementations, we provide multiple levels of customization.

Grid System Masonry Grid

Customization Levels

Atomix Layouts are built with customization in mind, offering multiple levels of configuration from basic theming with CSS custom properties to advanced SCSS configuration and creating completely custom layout patterns.

CSS Custom Properties

Runtime theming and quick adjustments without rebuilding

✓No build step required
✓Dynamic theme switching
✓Browser DevTools support
✓Override at component level

SCSS Variables

Build-time configuration for deep customization

✓Compile-time optimization
✓Full system customization
✓Generate custom themes
✓Performance optimized

Component Props

Dynamic behavior and styling per component instance

✓Per-instance customization
✓Type-safe configuration
✓Runtime flexibility
✓Component-level control

Custom Components

Extend and create new layout patterns

✓Full component extension
✓Create new patterns
✓Reuse Atomix foundation
✓Complete flexibility

CSS Custom Properties

Use CSS custom properties for runtime theming and quick adjustments. These properties can be overridden at any level in your component tree.

Grid System Properties

Customize the grid system using CSS custom properties. These can be set globally or scoped to specific components.

Grid System CSS VariablesCSS

:root {
  /* Container widths */
  --atomix-container-sm: 540px;
  --atomix-container-md: 720px;
  --atomix-container-lg: 960px;
  --atomix-container-xl: 1140px;
  --atomix-container-xxl: 1320px;
  
  /* Container padding */
  --atomix-container-padding-x: 0.75rem;
  --atomix-container-padding-x-sm: 1rem;
  --atomix-container-padding-x-md: 1.5rem;
  
  /* Grid gutters */
  --atomix-grid-gutter-width: 1.5rem;
  --atomix-grid-gutter-width-sm: 1rem;
  --atomix-grid-gutter-width-lg: 2rem;
  
  /* Grid columns */
  --atomix-grid-columns: 12;
}

21 lines544 characters

Masonry Grid Properties

Customize masonry grid spacing and animations using CSS custom properties.

Masonry Grid CSS VariablesCSS

:root {
  /* Masonry gaps */
  --atomix-masonry-gap: 1rem;
  --atomix-masonry-gap-sm: 0.75rem;
  --atomix-masonry-gap-lg: 1.5rem;
  
  /* Masonry animations */
  --atomix-masonry-transition: transform 0.3s ease;
}

9 lines213 characters

SCSS Variables

For build-time customization, use SCSS variables to configure the entire layout system before compilation.

Build-Time Configuration

Override SCSS variables before importing Atomix to customize the entire system at build time. This approach provides maximum performance and allows for complete system customization.

SCSS Variable OverrideSCSS

// Override before importing Atomix
$grid-columns: 16;
$grid-gutter-width: 2rem;
$container-max-widths: (
  sm: 540px,
  md: 740px,
  lg: 980px,
  xl: 1180px,
  xxl: 1360px
);

// Import Atomix with your customizations
@use 'atomix/styles' as *;

13 lines245 characters

Component Props

Customize individual components dynamically using props. This approach provides per-instance control and type safety.

Container & Row

Customize container and row components with props for dynamic behavior.

Container & Row PropsTSX

import { Container, Row, GridCol } from '@shohojdhara/atomix';

<Container 
  fluid={false} 
  maxWidth="lg"
  className="custom-container"
>
  <Row 
    gutter={'lg'}
    justify="center"
    align="middle"
  >
    <GridCol span={6}>
      Custom column
    </GridCol>
  </Row>
</Container>

17 lines291 characters

GridCol Options

GridCol supports responsive breakpoints, offsets, ordering, and alignment.

GridCol PropsTSX

import { Row, GridCol } from '@shohojdhara/atomix';

<Row>
  <GridCol 
    xs={12} 
    sm={6} 
    md={4} 
    lg={3}
    offset={2}
    order={1}
    align="center"
  >
    Responsive column with options
  </GridCol>
</Row>

15 lines225 characters

Custom Components

Extend Atomix components or create completely custom layout patterns while leveraging the Atomix foundation.

Extending Components

Create custom layout components by extending Atomix components. This approach allows you to build on top of Atomix while maintaining full control over styling and behavior.

Custom Component ExtensionTSX

import styled from 'styled-components';
import { Container, Row, GridCol } from '@shohojdhara/atomix';

// Extend Container with custom styling
const CustomLayout = styled(Container)`
  max-width: 1400px;
  padding: 0 2rem;
  
  ${Row} {
    margin: 0 -1.5rem;
  }
  
  ${GridCol} {
    padding: 0 1.5rem;
  }
`;

// Usage
function MyPage() {
  return (
    <CustomLayout>
      <Row>
        <GridCol md={6}>Content</GridCol>
        <GridCol md={6}>Content</GridCol>
      </Row>
    </CustomLayout>
  );
}

28 lines508 characters

CSS Modules Approach

Alternatively, use CSS Modules to style Atomix components with custom classes.

CSS Modules CustomizationTSX

import { Container, Row, GridCol } from '@shohojdhara/atomix';
import styles from './CustomLayout.module.scss';

function CustomLayout() {
  return (
    <Container className={styles.customContainer}>
      <Row className={styles.customRow}>
        <GridCol md={6} className={styles.customCol}>
          Content
        </GridCol>
        <GridCol md={6} className={styles.customCol}>
          Content
        </GridCol>
      </Row>
    </Container>
  );
}

// CustomLayout.module.scss
.customContainer {
  max-width: 1400px;
  padding: 0 2rem;
}

.customRow {
  margin: 0 -1.5rem;
}

.customCol {
  padding: 0 1.5rem;
}

31 lines624 characters

Best Practices

Follow these guidelines to get the most out of Atomix layout customization

Start with CSS Variables

Use CSS custom properties for quick adjustments and runtime theming. They're the easiest way to customize without rebuilding.

Use SCSS for System-Wide Changes

When you need to change the entire system (like column count or breakpoints), use SCSS variables at build time.

Props for Instance-Level Control

Use component props when you need different configurations for different instances of the same component.

Extend for Complex Patterns

Create custom components when you need completely new layout patterns or complex styling requirements.

Flexible Customization Options

Layouts Customization

Customize and extend Atomix layout components to match your unique requirements. From quick CSS variable tweaks to complete custom implementations, we provide multiple levels of customization.

Grid System Masonry Grid

Customization Levels

CSS Custom Properties

Runtime theming and quick adjustments without rebuilding

✓No build step required
✓Dynamic theme switching
✓Browser DevTools support
✓Override at component level

SCSS Variables

Build-time configuration for deep customization

✓Compile-time optimization
✓Full system customization
✓Generate custom themes
✓Performance optimized

Component Props

Dynamic behavior and styling per component instance

✓Per-instance customization
✓Type-safe configuration
✓Runtime flexibility
✓Component-level control

Custom Components

Extend and create new layout patterns

✓Full component extension
✓Create new patterns
✓Reuse Atomix foundation
✓Complete flexibility

CSS Custom Properties

Use CSS custom properties for runtime theming and quick adjustments. These properties can be overridden at any level in your component tree.

Grid System Properties

Customize the grid system using CSS custom properties. These can be set globally or scoped to specific components.

Grid System CSS VariablesCSS

:root {
  /* Container widths */
  --atomix-container-sm: 540px;
  --atomix-container-md: 720px;
  --atomix-container-lg: 960px;
  --atomix-container-xl: 1140px;
  --atomix-container-xxl: 1320px;
  
  /* Container padding */
  --atomix-container-padding-x: 0.75rem;
  --atomix-container-padding-x-sm: 1rem;
  --atomix-container-padding-x-md: 1.5rem;
  
  /* Grid gutters */
  --atomix-grid-gutter-width: 1.5rem;
  --atomix-grid-gutter-width-sm: 1rem;
  --atomix-grid-gutter-width-lg: 2rem;
  
  /* Grid columns */
  --atomix-grid-columns: 12;
}

21 lines544 characters

Masonry Grid Properties

Customize masonry grid spacing and animations using CSS custom properties.

Masonry Grid CSS VariablesCSS

:root {
  /* Masonry gaps */
  --atomix-masonry-gap: 1rem;
  --atomix-masonry-gap-sm: 0.75rem;
  --atomix-masonry-gap-lg: 1.5rem;
  
  /* Masonry animations */
  --atomix-masonry-transition: transform 0.3s ease;
}

9 lines213 characters

SCSS Variables

For build-time customization, use SCSS variables to configure the entire layout system before compilation.

Build-Time Configuration

Override SCSS variables before importing Atomix to customize the entire system at build time. This approach provides maximum performance and allows for complete system customization.

SCSS Variable OverrideSCSS

// Override before importing Atomix
$grid-columns: 16;
$grid-gutter-width: 2rem;
$container-max-widths: (
  sm: 540px,
  md: 740px,
  lg: 980px,
  xl: 1180px,
  xxl: 1360px
);

// Import Atomix with your customizations
@use 'atomix/styles' as *;

13 lines245 characters

Component Props

Customize individual components dynamically using props. This approach provides per-instance control and type safety.

Container & Row

Customize container and row components with props for dynamic behavior.

Container & Row PropsTSX

import { Container, Row, GridCol } from '@shohojdhara/atomix';

<Container 
  fluid={false} 
  maxWidth="lg"
  className="custom-container"
>
  <Row 
    gutter={'lg'}
    justify="center"
    align="middle"
  >
    <GridCol span={6}>
      Custom column
    </GridCol>
  </Row>
</Container>

17 lines291 characters

GridCol Options

GridCol supports responsive breakpoints, offsets, ordering, and alignment.

GridCol PropsTSX

import { Row, GridCol } from '@shohojdhara/atomix';

<Row>
  <GridCol 
    xs={12} 
    sm={6} 
    md={4} 
    lg={3}
    offset={2}
    order={1}
    align="center"
  >
    Responsive column with options
  </GridCol>
</Row>

15 lines225 characters

Custom Components

Extend Atomix components or create completely custom layout patterns while leveraging the Atomix foundation.

Extending Components

Create custom layout components by extending Atomix components. This approach allows you to build on top of Atomix while maintaining full control over styling and behavior.

Custom Component ExtensionTSX

import styled from 'styled-components';
import { Container, Row, GridCol } from '@shohojdhara/atomix';

// Extend Container with custom styling
const CustomLayout = styled(Container)`
  max-width: 1400px;
  padding: 0 2rem;
  
  ${Row} {
    margin: 0 -1.5rem;
  }
  
  ${GridCol} {
    padding: 0 1.5rem;
  }
`;

// Usage
function MyPage() {
  return (
    <CustomLayout>
      <Row>
        <GridCol md={6}>Content</GridCol>
        <GridCol md={6}>Content</GridCol>
      </Row>
    </CustomLayout>
  );
}

28 lines508 characters

CSS Modules Approach

Alternatively, use CSS Modules to style Atomix components with custom classes.

CSS Modules CustomizationTSX

import { Container, Row, GridCol } from '@shohojdhara/atomix';
import styles from './CustomLayout.module.scss';

function CustomLayout() {
  return (
    <Container className={styles.customContainer}>
      <Row className={styles.customRow}>
        <GridCol md={6} className={styles.customCol}>
          Content
        </GridCol>
        <GridCol md={6} className={styles.customCol}>
          Content
        </GridCol>
      </Row>
    </Container>
  );
}

// CustomLayout.module.scss
.customContainer {
  max-width: 1400px;
  padding: 0 2rem;
}

.customRow {
  margin: 0 -1.5rem;
}

.customCol {
  padding: 0 1.5rem;
}

31 lines624 characters

Best Practices

Follow these guidelines to get the most out of Atomix layout customization

Start with CSS Variables

Use CSS custom properties for quick adjustments and runtime theming. They're the easiest way to customize without rebuilding.

Use SCSS for System-Wide Changes

When you need to change the entire system (like column count or breakpoints), use SCSS variables at build time.

Props for Instance-Level Control

Use component props when you need different configurations for different instances of the same component.

Extend for Complex Patterns

Create custom components when you need completely new layout patterns or complex styling requirements.

Getting Started

Documentation

Resources

Community

Layouts Customization

Customization Levels

CSS Custom Properties

SCSS Variables

Component Props

Custom Components

CSS Custom Properties

Grid System Properties

Masonry Grid Properties

SCSS Variables

Build-Time Configuration

Component Props

Container & Row

GridCol Options

Custom Components

Extending Components

CSS Modules Approach

Best Practices

Start with CSS Variables

Use SCSS for System-Wide Changes

Props for Instance-Level Control

Extend for Complex Patterns

Layouts Customization

Customization Levels

CSS Custom Properties

SCSS Variables

Component Props

Custom Components

CSS Custom Properties

Grid System Properties

Masonry Grid Properties

SCSS Variables

Build-Time Configuration

Component Props

Container & Row

GridCol Options

Custom Components

Extending Components

CSS Modules Approach

Best Practices

Start with CSS Variables

Use SCSS for System-Wide Changes

Props for Instance-Level Control

Extend for Complex Patterns