https://github.com/raminmammadzada/page-with-7-1-css-architecture

Landing webpage project with advanced 7-1 CSS Architecture.
https://github.com/raminmammadzada/page-with-7-1-css-architecture

7-1architecture 7-1pattern scss scss-framework scss-mixins scss-styles

Last synced: 12 days ago
JSON representation

Landing webpage project with advanced 7-1 CSS Architecture.

• Host: GitHub
• URL: https://github.com/raminmammadzada/page-with-7-1-css-architecture
• Owner: RaminMammadzada
• Created: 2021-12-23T18:21:00.000Z (almost 3 years ago)
• Default Branch: develop
• Last Pushed: 2021-12-27T08:59:28.000Z (almost 3 years ago)
• Last Synced: 2024-12-07T17:41:46.286Z (16 days ago)
• Topics: 7-1architecture, 7-1pattern, scss, scss-framework, scss-mixins, scss-styles
• Language: CSS
• Homepage:
• Size: 30.7 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Landing Webpage with advanced 7-1 CSS Architecture.

The detailed readme will be written soon.

#### Responsiveness: Basic responsiveness design principles

  - fluid layouts

    - To allow webpage to adapt to the current viewport with ( or even height )

    - Use % ( or vh / vw) unit instead of px for elements that should adapt to viewport (usually layout)

    - Use max-width instead of width

  - responsive units

    - Use rem unit instead of px for most lengths

    - To make it easy to scale the entire layout down (or up) automatically

  - flexible images

    - By default, images don't scale automatically as we change the viewport, so we need to fix that

    - Always use % for image dimensions, together with the max-width property

  - media queries

    -  To change CSS styles on certain viewport widths (called breakpoints)

#### Layout types:

  - Float layouts:

    - The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated.

  - Flexbox:

    - Modern way of laying out elements in a 1-dimensional row using floats. Perfect for component layouts.

  - CSS Grid:

    - For layout out element in a fully-fledged 2-dimensional grid. Perfect for page layouts and complex components.