https://github.com/nottimtam/flow.scss

Tiny SCSS framework for flexbox based layout structuring.
https://github.com/nottimtam/flow.scss

css flexbox framework front-end mobile-first sass scss ui ux web

Last synced: 3 months ago
JSON representation

Tiny SCSS framework for flexbox based layout structuring.

• Host: GitHub
• URL: https://github.com/nottimtam/flow.scss
• Owner: NotTimTam
• License: cc0-1.0
• Created: 2023-02-10T02:42:40.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-22T21:06:33.000Z (5 months ago)
• Last Synced: 2024-09-23T01:20:10.825Z (4 months ago)
• Topics: css, flexbox, framework, front-end, mobile-first, sass, scss, ui, ux, web
• Language: SCSS
• Homepage: https://www.npmjs.com/package/flow.scss
• Size: 52.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# flow.scss

```scss

$acronym: "Flexible Layout Optimization With SCSS";

```

Read the [documentation! 🎉](https://github.com/NotTimTam/flow.scss/wiki)

`flow.scss` is a **simple**, yet effective SCSS framework for your front-end design needs. It provides a quick and efficient way to generate layouts for your website.

`flow.scss` **utilizes flexbox**-based layouts in a mobile-first approach to web development.

`flow.scss` is built for **customization**. A single `vars.scss` file contains every variable used to build the styles. It is recommended to modify this file to match your website's design, but it already includes all the necessary base values to create stunning websites.

-   To take advantage of this feature. Download the entire `flow.scss` library directly into your project's `styles` folder or fork the repository.

`flow.scss` is designed to integrate **seamlessly** into your existing projects, without causing any style conflicts or the need for debugging.

## More info

### Missing features?

**The goal** of this library is to be comprehensive and take as much of the heavy lifting off of front-end designers as possible. If there are features that don't work as expected, or are missing altogether, please [create a new issue](https://github.com/NotTimTam/flow.scss/issues) to let me know.

### Want to help out?

High-quality, documented **pull requests** are welcome. Please note that the code in this repository is under a [CC0 1.0 Universal](https://github.com/NotTimTam/flow.scss/blob/main/LICENSE) license.

## Examples

```jsx

// Next.js

import "flow.scss";

export default function Home({ Component, pageProps }) {

	return (

		

			

				
Hello, world!

			

		

	);

}

```


```scss

// Incorporate into your own SCSS files directly for access to mixins and variables.

@use "flow.scss" as *;

main.page {

	@include flex-column;

	gap: $gap;

	padding: $padding * 2 $padding;

}

```

```html

	

		

	

	

		

			

				
Hello, world!

			

		

	


```