https://github.com/darekf77/static-columns

Define columns with static width with Angular2 and FlexBox
https://github.com/darekf77/static-columns

angular-library pwa-demo

Last synced: 12 days ago
JSON representation

Define columns with static width with Angular2 and FlexBox

• Host: GitHub
• URL: https://github.com/darekf77/static-columns
• Owner: darekf77
• License: other
• Created: 2016-08-04T09:29:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2025-04-09T23:17:02.000Z (16 days ago)
• Last Synced: 2025-04-10T00:19:33.889Z (16 days ago)
• Topics: angular-library, pwa-demo
• Language: TypeScript
• Homepage: https://darekf77.github.io/static-columns
• Size: 17.1 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-angular - static-columns - Define columns with static width with Angular and FlexBox. (Table of contents / Third Party Components)
• awesome-angular - static-columns - Define columns with static width with Angular and FlexBox. (Table of contents / Third Party Components)
• trackawesomelist - static-columns (⭐0) - Define columns with static width with Angular and FlexBox. (Recently Updated / [Apr 12, 2025](/content/2025/04/12/README.md))

README

        

# STATIC-COLUMNS - effortless Angular2+ layouts

# forget about flex box complicated rules !

With this simple library 

**angular / html columns with static width**

mixed with

 

**columns with responsive width**

 

are not a problem anymore!

---

### How to install:

```

    npm install static-columns --save

```

### Import it:

```ts

import { StaticColumnsModule } form "static-columns/browser"

```

### Put module inside angular imports:

```ts

@NgModule(

 // ... 

  imports: [StaticColumnsModule]

  // ... 

)

class MyExampleModule {

 // ... 

}

```

# Examples

	

 ## Basic usage:

```html

   

    something

  

                          

      ZAKRES

  

                          

      

      

      

  

```

![Modules marked](screen.png)

## Hide/show column in mobile view:

```html

  

      I am not visible when screen < 600px

  

                          

      I am visible only when screen < 600px

  

```

## Hide/show column in tablet view:

```html

  

      I am not visible when screen > 600px and < 840 px

  

                          

      I am visible only when screen > 600px and < 840 px

  

```

## Hide/show column in desktop view:

```html

  

      I am not visible when screen > 840 px

  

                          

      I am visible only when screen > 840 px

  

```