Startify-stylesはウェブサイトを作成するために必要なリソースがひととおり揃った静的コーディングの開発環境で使うデザインアセットです。デザインから静的コーディングまでを行う過程で使用するデザインテンプレートデータや、そのテンプレートの対応したSassファイル(.scssおよび.sass形式))を使用することができ、DartSassのAPIを使ったコンパイルも可能で、効率よくデザインシステムを導入することができます。また、Sassファイルは下記の開発環境と組み合わせることで、PugやEJSなどのテンプレートエンジン、JavaScript(TypeScript)や各種フレームワークを併用したフロントエンド開発が可能となります。
- Startify4:Vue.js + React + Viteベースのコーディング環境
- Startify3:React + webpackベースのコーディング環境
- Startify2:Vue.js + webpackベースのコーディング環境
- Startify-dev:Docker + Laravelのアプリケーション開発環境
- Startify:Vue.js + Gulpベースのコーディング環境(現在、更新停止中)
Startify-stylesで主にできることは以下になります。
- Figmaに対応したデザインガイドライン付きページデザインテンプレート
- Sass(SCSS記法・SASS記法)のコンパイル
- デザインテンプレートのフォーマットに合わせたSass・CSS変数およびmixinの使用
- ソースコードのマッピングファイルの生成
- CSSファイルのminify化
Dart SDK >=2.10.0 <3.0.0
Dart Sass >= 1.50.0
$ /usr/bin/ruby -e "$(curl -fsSL https://github.com/raw/Homebrew/install/master/install)"
$ brew tap dart-lang/dart
プロジェクトディレクトリにフォルダー内のファイル一式を入れて、pubspec.yamlがあるディレクトリまで移動し、必要なパッケージをインストールします。
$ dart pub get
$ dart compile.dart INPUT_FILE_PATH OUTPUT_FILE_PATH
- Sassファイルの変数はFigmaのテンプレートのデザインガイドに合わせています。
- Sassのファイルおよびディレクトリの構成はFLOCSSに基づいて設計しています。
- プロジェクト内で使用しているclass名はBEMの命名規則を緩やかに沿った設計になっています。
- Dartコマンドでのコンパイル処理はデフォルトで圧縮されたファイルが出力される設定になっています。
- コンパイル後のファイル名および出力先は、デフォルトでcssディレクトリ配下にmain.min.cssのファイル名で生成されます。
Ogawa Shinya
Startify-styles is under MIT license.