A lightweight CSS Framework.

Developed with PostCSS

GET STARTEDnpmレポジトリまだ。

Environment-friendly

あなたのPostCSS開発環境にすぐ組み込めます。最低限必要なプラグインは、postcss-importとcssnextのみ。

Future syntax

学習コストの低い次世代のCSS構文ですぐにカスタマイズできます。

Easily layout

複雑さを排除したシンプルなFlexboxレイアウトでモバイルフレンドリーをすぐに構築。

Lightweight

Gzipで10KBの軽量サイズ。いらない機能があるなら、さらに小さくできます。

<div class="C">
  <div class="c">…</div>
  <div class="c">…</div>
</div>

Flexible layout

PonDeStyleには、CSSフレームワークによくある12列などの固定グリッドが存在しません。

Flexboxを用いた簡単な記述で、柔軟なレスポンシブデザインを簡単に導入することが可能です。

More components

ちょっとした静的サイト製作からWebアプリケーションまで、様々な用途に使えるコンポーネントを用意。
今後さらに増えると思いますが、いらないものは読み込まなければ良いだけなので、重くはなりません。

TEXT

Error: Please contact for support team.

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

@import 'PonDeStyle';

:root {
    —primary-color: purple;
}

.button—my {
    border-bottom-width: 2px;
}

@media (—tablet) {
    .my-grid {
        flex-direction: column;
    }
}

Coding! with! PostCSS!

スタイルに関わるすべてのことは、PostCSSで完結させましょう。

あなたのCSSに1行追加するだけでPonDeStyleを読み込むことができます。あとは好きなようにスタイルを追加して、stylelintで品質を保ちつつcssnanoでミニファイ。

npm scripts + postcss-cli でも gulp でも webpackでも、お好みのツールをお使いください。

さあ、はじめよう。

GET STARTED

GitHub

cssnext easily lightweight postcss