New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

atomic-layout

Package Overview
Dependencies
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

atomic-layout - npm Package Compare versions

Comparing version

0.1.1
to
0.2.0

25

package.json
{
"name": "atomic-layout",
"version": "0.1.1",
"description":
"A single component to distribute the spacial relation in your layouts using CSS Grid",
"version": "0.2.0",
"description": "A single component to distribute the spacial relation in your layouts using CSS Grid",
"main": "./index.js",
"scripts": {
"dev": "webpack --watch",
"start": "start-storybook -p 6006",
"build": "NODE_ENV=production webpack",
"test": "BABEL_ENV=test jest",
"storybook": "start-storybook -p 6006",
"prettify": "node_modules/.bin/prettier 'src/**/*.js' --write",

@@ -16,3 +15,6 @@ "prepublishOnly": "npm run build",

},
"pre-push": ["prettify", "test"],
"pre-push": [
"prettify",
"test"
],
"repository": {

@@ -37,3 +39,3 @@ "type": "git",

"babel-loader": "^7.1.4",
"babel-plugin-external-helpers": "^6.22.0",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-export-extensions": "^6.22.0",

@@ -50,15 +52,10 @@ "babel-preset-env": "^1.6.1",

"react-dom": "^16.3.2",
"rollup": "^0.58.2",
"rollup-plugin-babel": "^3.0.4",
"rollup-plugin-babel-minify": "^4.0.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-visualizer": "^0.6.0",
"storybook": "^1.0.0",
"styled-components": "^3.2.6",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.13.1"
},
"dependencies": {
"ramda": "^0.25.0"
"react-responsive": "^4.1.0"
}
}

66

README.md

@@ -1,17 +0,19 @@

A single component to distribute the spacial relation in your layouts.
# atomic-layout
## Motivation
Atomic layout is an implementational paradigm that delegates distribution of spacial relation between composites to the dedicated layer.
[Atomic design](http://bradfrost.com/blog/post/atomic-web-design) is outstanding. If this is the first time you hear about it, go check it out and don't forget to show it to your designer as well.
This library is a representative of that paradigm. **It's a single React component to declare spacial relation between any composites**. Inspired by and encourages [Atomic design](http://bradfrost.com/blog/post/atomic-web-design).
Implementation of atom components is quite straightforward, but when it comes to composing the molecules how do you handle the relation between the atoms? Most likely, you are writing some extra CSS to change the position or add spacing to the atoms, which are under a specific molecule. Not only that makes you write more CSS, but it also contradicts the idea of an atom being independant, reusable, predictable.
## Why?
**_What if there was a single layer above the atoms that could distribute the spacial relation between them without actually affecting them?_** And wouldn't it be great if that layer could be applied not only to the atoms, but also to molecules, templates, layouts?
Now, when you compose molecules out of atoms you add spacial properties to the atoms directly. Not only that makes you write more CSS, that contradicts the core principle of an atom being simple, reusable, predictable.
Well, this is what `atomic-layout` is about.
Atomic layout introduces a higher layer that distributes spacial relation between **any** composites (atoms, molecules, organisms) without mutating their behavior.
## How does this work?
## How does it work?
We are using a jaw-droppingly powerful (and standardized) [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and combining it with the simplicity and flexibility of [React](https://reactjs.org/). You can depict this library like an easier way to declare and maintain CSS Grid in your React application.
It's a flexible abstraction above [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) written in [React](https://reactjs.org/), powered by [styled-components](https://github.com/styled-components/styled-components).
You're probably thinking it's some sort of experimental hack. Well, in fact Atomic layout is built on technologies which have been around _for years_. It's stable, it's standardized, it's production-ready.
## Getting started

@@ -21,5 +23,5 @@

import React from 'react'
import Layout from 'atomic-layout'
import { Layout } from 'atomic-layout'
// declare template areas ("grid-template-areas")
// declare template areas
const templateMobile = `

@@ -31,3 +33,3 @@ 'thumbnail'

// including for different screen sizes
// don't forget about responsive
const templateDesktop = `

@@ -38,24 +40,22 @@ 'thumbnail heading'

export default class Card extends React.Component {
render() {
return (
<Layout template={templateMobile} templateSmUp={templateDesktop}>
{/* Get React components based on your grid areas */}
{({ Thumbnail, Heading, Subheading }) => (
<React.Fragment>
<Thumbnail>
<img src="foo.png" />
</Thumbnail>
<Heading>
<h4>Juicy fruits</h4>
</Heading>
<Subheading>
<p>Healthy mind in a healthy body.</p>
</Subheading>
</React.Fragment>
)}
</Layout>
)
}
}
const Card = () => (
<Layout template={templateMobile} templateSm={templateDesktop}>
{/* Get React components based on your grid areas */}
{({ Thumbnail, Heading, Subheading }) => (
<React.Fragment>
<Thumbnail>
<img src="foo.png" />
</Thumbnail>
<Heading>
<h4>Juicy fruits</h4>
</Heading>
<Subheading>
<p>Healthy mind in a healthy body.</p>
</Subheading>
</React.Fragment>
)}
</Layout>
)
export default Card
```

@@ -62,0 +62,0 @@ 

.storybook/addons.js
.storybook/config.js
.vscode/settings.json
docs/props.md
stories/index.js
stories/Playground/index.jsx
webpack.config.js
index.js

Sorry, the diff of this file is too big to display