Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kawasima/jagrid

Japanese-styled grid framework.
https://github.com/kawasima/jagrid

clojure css excel javascript

Last synced: 1 day ago
JSON representation

Japanese-styled grid framework.

Host: GitHub
URL: https://github.com/kawasima/jagrid
Owner: kawasima
License: other
Created: 2014-04-16T09:42:15.000Z (almost 11 years ago)
Default Branch: master
Last Pushed: 2018-05-09T07:13:15.000Z (over 6 years ago)
Last Synced: 2023-11-07T15:19:03.886Z (about 1 year ago)
Topics: clojure, css, excel, javascript
Language: Clojure
Size: 392 KB
Stars: 277
Watchers: 10
Forks: 6
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

jagrid
=======

A CSS framework for Japanese-styled grid sheet.

## 日本向けのグリッドスタイル

Excel方眼紙業務のWeb移行においては、Bootstrapのような12カラムグリッドスタイルでは、
グリッドが足りません。
そこでExcel方眼紙と同じようにレイアウティングできるCSSフレームワークがjagridです。

![sales-report](https://farm8.staticflickr.com/7215/13942407502_b513163fcf.jpg)

## 使い方

```html

```

jagridのスタイルシートとJavascriptファイルを読みこんでください。

## 動作環境

* Chrome
* Firefox
* IE9+

## Overview

### シートの作り方

任意の要素に`jagrid`クラスを定義すると、その中を方眼紙として使えるようになります。

```html

```

### 狙った位置に要素を書き込む

シートの中では、絶対位置を`data-x`および`data-y`属性を使って指定できます。
ここでは、ピクセル単位ではなく、方眼紙のマス目単位であることに喜びを感じてください。

![hello](https://farm8.staticflickr.com/7207/13965476593_0f84a05a00.jpg)

```html

こんにちは、Excel方眼紙

```

### 表組み

シートの中に、まるでExcel方眼紙のように柔軟に表組みを書くことができます。

![table](https://farm3.staticflickr.com/2902/13942308062_ebc5aa18ef.jpg)

```html

ID
NAME

51
イチロー

```

列幅はこれもマス目の単位であるため、data-width属性を使って指定します。rowspan属性はふつうのtdダグと同じように使用できます。

### リスト

マス目インデントを使った、箇条書きもHTMLのリストでふつうに表現できます。

![list](https://farm8.staticflickr.com/7025/13965476453_a30eddce47.jpg)

```html

りんご

ばなな

いちご

りんご

ばなな

いちご

```

## ビルドの仕方

```
% lein run
```

で、cssの下に`jagrid.css`が生成されます。

## ライセンス