完璧なcssフレームワーク。 Maxmertkitウィジェットマネージャー-独自のフレームワークを構築する

こんにちは

しばらく前に約束したように、ベータ版のmaxmertkitウィジェットマネージャーをリリースしました。 私は長い間、npmまたはgemを望んでいましたが、CSSが必要でした。 jsonファイルにいくつかの依存関係を追加し、コマンドを入力すると、すべてがインストールされました。 速くて便利です。 良い解決策を見つけられなかったので、自分で実現する時が来ました。 私が始めるまで、それがどのように始まったかについての記事へのリンク- 最初と2番目の記事。 あなたは読むことができません、簡単に私はここですべてを語り直します。 すぐにポータルにアクセスして内容を確認し、 www.maxmertkit.comのビデオをご覧ください 。



以下で説明するほぼすべてがこのビデオにあります。 私は音質に謝罪し、通常のマイクを見つけようとします。

必要条件

プロジェクトを実装する前に、このプロジェクトが満たさなければならない基本的な要件を決定する必要があります。

• 名前空間 フレームワークのすべてのクラス。
  
  
  • -<widget -name > - ウィジェットの名前。たとえば、-table、-btn、-tooltip
    
    
  • -<トピック名>--ウィジェットのテーマの名前。たとえば、-primary-、-error-、-orange-
    
    
  • _ < size_name > -サイズ、たとえば_tiny、_small、_huge、_divine
    
    
  • _ <修飾子名> _-修飾子、たとえば_top _ 、 _ active _ 、 _ hover _ 、 _ unclickable_
    
    
  
  
  
• モジュール性 。 モジュール性とはどういう意味ですか？ ウィジェット-btnボタンがあり、これは-groupウィジェットの一部として使用されます。 まず、 -groupグループのウィジェットを作成するときに、 -btnウィジェットへの依存関係を指定し、それを再度記述しないようにすることができます（これはネイティブcssで簡単に実現できます）。 第二に、 -error-テーマで-btnウィジェットを使用する場合、このテーマをグループの一部として使用できません。 逆に、カスタムテーマをグループに適用しても、ボタンは変更されません。 つまり、ウィジェットは互いに完全に独立している必要があります。 CSSの場合、これは実装が非常に困難ですが、便利で実用的です。
  
  
• テーマをキャプチャします。 テーマを親ウィジェットに適用する場合、子ウィジェットはテーマを継承する必要があります。 たとえば、グループにテーマ-error-を配置すると、グループ内のすべての要素の色が-error-に変更されます 。 とても便利です。
  
  

これらの要件はすべて、 mwm -maxmertkitウィジェットマネージャーに実装されています。 node.jsではnpmのように、Ruby on Railsではgemのように動作します。 そのタスクは、必要なウィジェット、テーマ、修飾子、およびアニメーションをダウンロードし、それらをコンパイル用に構成することです。 最初のステップは、mwmをインストールすることです。 これはグローバルに行う必要があるため、不必要な質問を避けるために、sudoでコマンドを使用します。

sudo npm install -g mwm
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インストール後、ヘルプコールを入力してmwmが正しくインストールされていることを確認します。

 mwm -h
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コマンドのリストが表示される場合、すべてが順調です。

maxmertkitを初期化するには、プロジェクトのルートに行きましょう（スタイルのあるフォルダーではなく、ルートです）。 ここで、mwmにスタイルのあるフォルダーへのパスを伝える構成ファイルを作成できます。 ファイル名： .mwmc これまでのところ、mwmは1つのフィールドのみをサポートしています。

 { "directory": "path-to-your-stylesheets-from-projects-root" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

たとえば、ルートに関連するスタイルがpublic / stylesheetsにある場合、

 { "directory": "public/stylesheets" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

構成ファイルを作成した場合は、プロジェクトのルートからmwmを実行し、そうでない場合は、stylesフォルダーに移動します。

次に、次のコマンドでmaxmertkitを初期化する必要があります。

 mwm init
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Mwmは、名前、タグ、その他のナンセンス（ウィジェット/テーマ/アニメーションを作成して公開する場合は記入する必要があります）について尋ね、コンパイルに必要なファイルを作成します。

• _imports.sass-接続されているすべてのウィジェット、テーマ、修飾子、アニメーションのリストが含まれます。
• _params.sass-プロジェクトのコンパイルに必要なパラメーターが含まれています
• _vars.sass- 依存ウィジェットで使用される変数
• _myvars.sass-現在のウィジェットで使用される変数
• _index.sass-スタイルを記述できるファイル。インポートはそのままにしてください
• maxmertkit.json-プロジェクト構成ファイル

_index.sassとmaxmertkit.jsonを除くこれらのファイルはすべて、変更したり、変更したりする必要はありませんが、理想的には、それらの存在を知っている必要はありません。

btnウィジェットをインストールしてみましょう。 これを行うには、 maxmertkit.jsonに 依存フィールドを追加します 。

 { "type": "project", "name": "test", ... "dependences": { "btn": "0.0.9" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このウィジェットの最新バージョンが必要な場合は、バージョン0.0.9の代わりに*を指定できます。 ターミナルに保存して入力する

 mwm install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私はmwmにsassファイルをコンパイルすることを教えなかったので、 _index.sassを自分でコンパイルする必要があります。 これを行うには、新しいターミナルウィンドウを開き、プロジェクトのスタイル（ルートではなく）を持つフォルダーに移動して、次のように入力します。

 sass -w _index.sass:index.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この端末ウィンドウを離れることができます.sassはファイル構造の変更を監視し、必要に応じてプロジェクトを再コンパイルします（追跡がうまく行われないため、 mwm install



後、 _index.sassを開いて保存し、コンパイラがプロジェクトを再コンパイルする必要があることを認識できるようにします）。 ウィジェットの-btnボタンがインストールされます。 HTMLコードで使用できます。 方法を理解するには、 ウィジェットセクションのwww.maxmert.comにアクセスし、ドキュメントを読んでください。 私たちの場合、これ

 <a class="-btn"></a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OK、しかしこのウィジェットに特定のテーマを設定する方法は？ maxmertkit.jsonを再度変更する必要があります。

 { ... "dependences": { "btn": { "version": "0.0.9", "themes": { "error": "*", "orange": "*" } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてもう一度ダイヤルする

 mwm install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-btnウィジェットを使用すると、 -error-および-orange-テーマを使用できます。

 <a class="-btn -error-">Error button</a> <a class="-btn -orange-">Orange button</a> <a class="-btn">Default button</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、プロジェクトでmwmを使用するために必要なのはそれだけです。

maxmertkit.jsonファイルの例を示します

 { "type": "widget", "name": "group", "version": "0.0.4", "description": "Standart group", "repository": "", "author": "maxmert", "themeUse": true, "tags": "button, buttons, group, input, label, appendix", "license": "BSD", "dependences": { "bourbon": "3.1.8", "object": "0.0.0", "btn": { "version": "0.0.9", "themes": { "primary": "*", "error": "*", "orange": "*" } }, "forms": "0.0.5", "caret": "0.0.4" }, "themes": { "default": "*", "disabled": "*", "primary": "*" }, "modifiers": { "tiny": "0.0.0", "small": "0.0.0", "minor": "0.0.0", "normal": "0.0.0", "major": "0.0.0", "big": "0.0.0", "huge": "0.0.0", "giant": "0.0.0", "divine": "0.0.0", "active": "*", "hover": "*", "unclickable": "*", "loading": "*", "unstyled": "*" }, "animation": { "loading": "0.0.2" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポータルを使用する

maxmertkit.comにサインアップすると、次のオプションが利用できるようになります（個人データは一切使用しません、約束します）。

• プロジェクトをサイトで直接収集し、アーカイブ内のスタイルをダウンロードできます。
• 必要なウィジェット/テーマ/修飾子/アニメーションのセットを、遅延コンパイルまたはダウンロード用のプリセットに保存できます。
• お気に入りに保存して、長時間検索する必要がないように（検索は可能）、または単にこのウィジェットが気に入ったことを通知できます。
• 独自のウィジェット、テーマ（テーマ-サイト上で、非常に高速でクール）、修飾子、アニメーションを作成して公開できます。

ウィジェットのすべてのドキュメントは、サイトで登録なしで入手できます。

ウィジェット作成

ウィジェットを作成して公開するとします。 最初に行う必要があるのは、 maxmertkit.comに登録し、プロファイルにログインして（サイドバーのプロファイル画像をクリックして）、開発者パスワードを作成することです。 ウィジェットを公開するときに必要になります。

その後、ウィジェットを偽造するフォルダーを作成し、そこに移動して入力します

 mwm init -w
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-wフラグは、プロジェクトではなくウィジェットを初期化することを意味します。 Mwmは、一般にプロジェクトファイルに似た必要なファイルを作成します。 maxmertkit.jsonファイルに、新しいウィジェットが使用する依存関係、修飾子、およびアニメーションを追加します（上記のプロジェクトと同様）。 募集します

 mwm install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして

 sass -w _index.sass:index.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

_index.sassウィジェットのメインファイルの編集に進みます。

_index.sassを編集

_index.sass-ウィジェットのメインファイル。ウィジェットに必要なすべてのスタイルが含まれています。 最初は次のようなものです。

 @import "imports" @import "params" @import "myvars" @import "vars" %#{$test} @extend %object // Set _minor to default size $sizes: null!default @if $sizes @each $size in $sizes $sz: #{nth($size, 1)} @if $sz != _minor &.#{nth($size, 1)} font-size: nth($size,2) padding: nth($size,2)/3 nth($size,2)/2 @else font-size: nth($size,2) padding: nth($size,2)/3 nth($size,2)/2 // Modifiers // Themes $themes: null!default @if $themes @each $theme in $themes $index: 1 @if length( $themes ) != 1 $index: index( $themes, $theme ) $imp: "" @if $theme == "-disabled-" $imp: !important @if $theme != "default" &.#{$theme} color: nth( $color-invert, $index ) border-color: nth( $border-color-lighten, $index ) &:hover border-color: nth( $border-color-darken, $index )#{$imp} @else color: nth( $color-invert, $index ) border-color: nth( $border-color-lighten, $index ) &:hover border-color: nth( $border-color-darken, $index )#{$imp} @if $dependent == null .#{$test} @extend %#{$test}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

$ testの代わりにウィジェットの名前があります。たとえば、初期化中にウィジェットがsuperbuttonと呼ばれると言った場合、$ testの代わりに$ superbuttonがあります。 しかし、さらにウィジェットはテストと呼ばれると考えます。

コードを分析しましょう。

 %#{$test}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで％は、このウィジェットが別のウィジェットの依存関係である場合（これは拡張のみのセレクターです）、CSSにクラスを追加しないために使用されます。 ここでそれについて読むことをお勧めします。

動的寸法

 $sizes: null!default @if $sizes @each $size in $sizes $sz: #{nth($size, 1)} @if $sz != _minor &.#{nth($size, 1)} font-size: nth($size,2) padding: nth($size,2)/3 nth($size,2)/2 @else font-size: nth($size,2) padding: nth($size,2)/3 nth($size,2)/2
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

将来のウィジェットのサイズが異なる場合、依存関係にサイズウィジェットを含めることを忘れずに、このループでウィジェットのプロパティを決定する必要があります。 この場合、各サイズ（ サイズウィジェットを参照）に対してfont-sizeとpaddingを定義します 。 もちろん、 nth（$ size、2）を値に含めることにより、他のパラメーターを定義できます。 ここで、 nth（$ size、2）は、各サイズに対応するpxの特定の値です。 お好みに変換できます。 お気づきかもしれませんが、コードはここに複製されています。 しかし、これは@elseの後のデフォルトサイズを決定するために必要です（コードを複製することはできませんが、たとえば、いくつかの事前定義された値を設定します）。

動的テーマ

次に、トピックを追加する方法を検討します。

  $themes: null!default @if $themes //     @each $theme in $themes //  sass    ,   ,     $index: 1 @if length( $themes ) != 1 $index: index( $themes, $theme ) //  -disabled-   ,    !important,     $imp: "" @if $theme == "-disabled-" $imp: !important //    default,    @if $theme != "default" &.#{$theme} //        //    –       color: nth( $color-invert, $index ) border-color: nth( $border-color-lighten, $index ) //  ,      :hover, :active //   ,  .#{$mod-active}      _active_ &:hover border-color: nth( $border-color-darken, $index )#{$imp} &.#{$mod-active} background-color: nth( $background-color, $index )#{$imp} //             @else color: nth( $color-invert, $index ) border-color: nth( $border-color-lighten, $index ) &:hover border-color: nth( $border-color-darken, $index )#{$imp} &.#{$mod-active} background-color: nth( $background-color, $index )#{$imp}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソースでコメントを付けようとしましたが、 nth（$ background-color、$ index）＃{$ imp}では、 背景色を各トピックに存在するリストの名前に変更するだけでよいことに注意してください。たとえば、ここ-error theme 。 これは、たとえば、 color 、 color-invert-darken 、 background-color-invert-darkenerなどです。 この構造により、テーマはウィジェットに自動的に適用されます。 いくつかのトピックを含めて、それらをテストしてみてください。

 @if $dependent == null .#{$test} @extend %#{$test}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウィジェットが依存関係にあるかどうかを確認してください。 その場合、クラスセレクタを作成する必要はありませんが、クラスセレクタから継承できます。 そうでない場合は、クラスセレクターを作成します。

テストとドキュメント

テストに移りましょう。 公開するには、 test.htmlファイルを作成し、コンパイル済みのindex.cssをその中に含めて、すべてが正しくコンパイルされて動作するかどうかを確認する必要があります。 ポータルでは、ドキュメントの後にtest.htmlがiframeに表示されます。 maxmertkit.jsonでこのウィジェットのgithubリポジトリを指定した場合、そこからREADME.mdファイルが取得されます。 ウィジェットにgithubリポジトリがない場合、その使用に関する推奨事項を記載したREADME.mdファイルを作成します。 もちろん、それなしでもできますが、どういうわけか悪いです。 すべてがテストされ、書かれ、準備ができたら、入力するだけです

 mwm publish
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

mwmという名前はmaxmertkit.jsonファイルの作成者フィールドから取得しますが、パスワードを入力するように求められることに注意してください。 さらに、mwmの指示に従うことができます。 ウィジェットが公開されました。 unpublish



コマンドは存在しますが、テスト目的のため、サーバーはそれを無視します（すぐにmwmから完全に消えます）。 間違えたことに突然気付いた場合は、修正し、 maxmertkit.jsonのバージョンをアップグレードして、ウィジェットを再度公開する必要があります。 Mwmはバージョニングをうまくサポートしているため、誰かが古いバージョンのウィジェットを既に使用している場合、何も壊れません。

テーマを作成する

テーマはサイトで直接作成できます。 速くて便利です。 いずれかのソーシャルネットワークを使用してログインすると、 テーマメニューの前に+が表示され、クリックするとテーマを追加するためのページに移動します。 名前と原色（メインと反転）を入力するだけで十分です。 残りのフィールドは空のままにすることができ、自動的に計算されます（これらのフィールドのプレースホルダーを参照）。

課題

mwmの場合-https ://github.com/maxmert/mwm/issues

ウィジェット、テーマ、修飾子、アニメーションの場合（sassおよびcssの場合）-https ://github.com/maxmert/maxmertkit/issues

英語またはロシア語に関する私の問題（テキストの編集をお願いします）はhabrahabrまたはme@maxmert.comのPMにあります。

競争

友人の皆さん、既成のUIをメールvetrenko.maxim@gmail.com （トピックhabrahabr-UIを指定してください）に送信して、maxmertkitに実装されているのを確認してください。 可能な限り、最も魅力的なものから始めて、それらを追加します。 それは素晴らしいことです！ jpg（この場合、実装を開始するときに、psdを要求する可能性が高い）またはすぐにpsdを送信できます。 投稿を更新して、近い将来に表示される内容を確認できるようにします。



PS ：友人たち、私は外国のブログで配布するために英語の記事を書くのを手伝います。 事実、英語で私はロシア語で書いています。 ほとんどの場合、このような有能な記事のテキストをメインページに掲載し、記事の著者であることを示します。 そして、残念ながら、関連するトピックのある外国のブログにアカウントを持っていないので、私はこれについて助けを求めます。