# jade-atomic

> atomic design for jade

Latest version **1.0.3** (published 2016-03-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install jade-atomic
pnpm add jade-atomic
yarn add jade-atomic
bun add jade-atomic
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2016-03-22 |
| First published | 2016-03-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | juanpablocs21@gmail.com |
| Maintainers | juanpablocs |
| Keywords | jade-atomic, atomic design, jade atomic design |

## Links

- npm: https://www.npmjs.com/package/jade-atomic
- Repository: https://github.com/juanpablocs/jade-atomic
- Homepage: https://github.com/juanpablocs/jade-atomic#readme
- Issues: https://github.com/juanpablocs/jade-atomic/issues
- npm.io page: https://npm.io/package/jade-atomic

## Dependencies (1)

- [jade](https://npm.io/package/jade.md) ^1.11.0

## Recent versions

- 1.0.3 (latest) — 2016-03-22
- 1.0.2 — 2016-03-21
- 1.0.1 — 2016-03-21
- 1.0.0 — 2016-03-21

## README

# Jade Atomic Design
jade-atomic es una extension para jade que nos permite incluir de manera dinamica componentes bajo el concepto de diseño atomico.

## install
```
npm install --save-dev jade-atomic
```

##example for jade
```js
//module: home
// index from: ./home/index.jade
doctype html
html(lang="en")
  head
    //add molecule from: ./all/molecules/jade/head.jade
    +molecule all/head

  body
    //add organism from: ./home/organisms/jade/header.jade
    +organism header

    .main
      .sideleft
        //add organism from: ./home/organisms/jade/sideleft.jade
        +organism sideleft
    
      .content
        // add organism from: ./home/organisms/jade/posts.jade
        +organism posts
        //add molecule from: ./home/molecules/jade/comments.jade
        +molecule comments
    
    //add organism from: ./all/organisms/jade/footer.jade
    +organism all/footer
```
##usage for gulp
```js
var gulpJade = require('gulp-jade');
var jadeAtomic = require('jade-atomic');

gulp.task('jade-html',function(){
  return gulp.src('./home/*.jade')
    .pipe(gulpJade({
      jade:jadeAtomic({
        basePath:__dirname,
        fileStructure:'/[module]/[atomic]s/jade/[file].jade'
      }),
      pretty:true
    }))
    .pipe(gulp.dest('./public/')); 
});
```

##usage
```js
var jade = require('jade');
var jadeAtomic = require('jade-atomic');

//setting for jadeAtomic
jadeAtomic({
  jade:jade,
  basePath:__dirname,
  fileStructure:'/[module]/[atomic]s/jade/[file].jade'
});

//little example
var compiled = jade.compileFile(__dirname + '/home/index.jade');

console.log("it works!", compiled());
```

---
_Source: https://npm.io/package/jade-atomic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._