बिल्कुल सही सीएसएस फ्रेमवर्क। Maxmertkit विजेट प्रबंधक - अपनी रूपरेखा बनाएँ

शुभ दोपहर
जैसा कि कुछ समय पहले वादा किया गया था, मैंने बीटा मैक्सिमकिट विजेट मैनेजर जारी किया। मेरे पास लंबे समय से एनपीएम या मणि है, लेकिन सीएसएस के लिए। मैंने json फ़ाइल में कई निर्भरताएँ जोड़ीं, कमांड टाइप किया और सब कुछ इंस्टॉल हो गया। यह तेज और सुविधाजनक है। मुझे अच्छे समाधान नहीं मिले, इसलिए मुझे खुद को महसूस करने का समय है। जब तक मैंने शुरू किया, लेखों के लिंक यह सब कैसे शुरू हुए - पहले और दूसरे लेख। आप पढ़ नहीं सकते, संक्षेप में मैं यहां सब कुछ बताऊंगा। आप तुरंत पोर्टल पर जा सकते हैं और पता कर सकते हैं कि क्या है, साथ ही साथ वीडियो देखें - www.maxmertkit.com ।

लगभग सब कुछ जो मैं नीचे वर्णन करूंगा, इस वीडियो में है। मैं ध्वनि की गुणवत्ता के लिए माफी माँगता हूँ, एक सामान्य माइक्रोफोन खोजने की कोशिश करता हूँ।

आवश्यकताओं

किसी भी परियोजना को लागू करने से पहले, आपको उन बुनियादी आवश्यकताओं को निर्धारित करना होगा जो इस परियोजना को पूरा करती हैं।

• नाम स्थान । ढांचे के सभी वर्गों के लिए।
  
  • - <विजेट -नाम > - उदाहरण के लिए, विजेट का नाम, -btn, -tooltip
    
  • - <विषय-नाम> - - विजेट के लिए विषय का नाम, उदाहरण के लिए -primary-, -error-, -orange-
    
  • _ < size_name > - आकार, उदाहरण के लिए _tiny, _small, _huge, _divine
    
  • _ <modifier-name> _ - संशोधक, उदाहरण के लिए _top_, _active_, _hover_, _unickick__
    
  
  
• प्रतिरूपकता । प्रतिरूपकता से मेरा क्या अभिप्राय है? एक विजेट -btn बटन है और इसे -group विजेट के भाग के रूप में उपयोग किया जाता है। सबसे पहले, -group समूह के लिए एक विजेट बनाते समय, आप -btn विजेट पर निर्भरता निर्दिष्ट कर सकते हैं और इसे फिर से वर्णन नहीं कर सकते हैं (यह देशी सीएसएस के साथ हासिल करना आसान है)। दूसरे, अगर मैं -tor- विषय के साथ -btn विजेट का उपयोग करता हूं , तो मैं इस विषय को एक समूह के हिस्से के रूप में उपयोग नहीं कर सकता। और इसके विपरीत, एक कस्टम थीम को एक समूह में लागू करने से, मेरा बटन नहीं बदलना चाहिए। यही है, विगेट्स को एक दूसरे से पूरी तरह से स्वतंत्र होना चाहिए। सीएसएस के लिए, इसे लागू करना काफी कठिन है, लेकिन सुविधाजनक और व्यावहारिक है।
  
• विषय पर कब्जा । जब मैं किसी थीम को पैरेंट विजेट पर लागू करता हूं, तो चाइल्ड विजेट थीम को इनहेरिट करना होगा। उदाहरण के लिए, हम विषय-समूह को समूह में डालते हैं , और समूह के भीतर के सभी तत्वों को -रोर को रंगों को बदलना चाहिए। यह बहुत सुविधाजनक है।
  

इन सभी आवश्यकताओं को mwm में लागू किया गया है - मैक्सिमकिट विजेट प्रबंधक। यह नोड के लिए npm की तरह काम करता है। Rs या रेल के लिए मणि की तरह। इसका कार्य विगेट्स, थीम, संशोधक और आपकी ज़रूरत के एनिमेशन डाउनलोड करना है, और फिर उन्हें संकलन के लिए तैयार करना है। पहला कदम mwm स्थापित करना है। यह विश्व स्तर पर करने की आवश्यकता है, इसलिए अनावश्यक प्रश्नों से बचने के लिए मैं sudo के साथ कमांड लाता हूं:

sudo npm install -g mwm 

स्थापना के बाद, सुनिश्चित करें कि सहायता कॉल टाइप करके mwm को सही ढंग से स्थापित किया गया है:

 mwm -h 

यदि आदेशों की एक सूची दिखाई देती है, तो सब कुछ क्रम में है।
मैक्समार्टकिट को इनिशियलाइज़ करने के लिए, आइए अपने प्रोजेक्ट के रूट पर जाएं (यह रूट है, आपकी शैलियों वाला फ़ोल्डर नहीं)। यहां हम एक कॉन्फ़िगरेशन फ़ाइल बना सकते हैं जो आपकी शैलियों के साथ फ़ोल्डर के लिए मार्ग बताती है। फ़ाइल का नाम: .mwmc अब तक, mwm केवल एक क्षेत्र का समर्थन करता है:

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

उदाहरण के लिए, यदि जड़ के सापेक्ष मेरी शैली सार्वजनिक / स्टाइलशीट में हैं , तो

 { "directory": "public/stylesheets" } 

यदि आपने एक कॉन्फ़िगरेशन फ़ाइल बनाई है, तो अपने प्रोजेक्ट की जड़ से mwm चलाएं, यदि नहीं, तो शैलियों फ़ोल्डर में जाएं।
इसके बाद, आपको निम्नलिखित कमांड के साथ मैक्सिमर्किट को इनिशियलाइज़ करना होगा:

 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" } } 

संस्करण ०.०.९ के बजाय, आप निर्दिष्ट कर सकते हैं * यदि आप इस विजेट का नवीनतम उपलब्ध संस्करण चाहते हैं। टर्मिनल में सहेजें और टाइप करें

 mwm install 

मैंने sass फ़ाइलों को संकलित करने के लिए mwm नहीं सिखाया, इसलिए आपको _index.sass को स्वयं संकलित करने की आवश्यकता है। ऐसा करने के लिए, आप एक नई टर्मिनल विंडो खोल सकते हैं, प्रोजेक्ट के स्टाइल (रूट नहीं) के साथ फ़ोल्डर पर जाएं और टाइप करें

 sass -w _index.sass:index.css 

आप इस टर्मिनल विंडो को छोड़ सकते हैं, अब sass फ़ाइल संरचना में बदलावों की निगरानी करेगा और यदि आवश्यक हो तो परियोजना को फिर से शुरू कर सकता है (इसलिए यह बहुत अच्छी तरह से ट्रैक नहीं करता है, इसलिए mwm mwm install होने के बाद mwm install _index.sass खोलने और इसे सहेजने की सलाह देता mwm install ताकि संकलन को पता चले कि परियोजना को फिर से तैयार करने की आवश्यकता है)। विजेट -btn बटन स्थापित है। आप इसे html कोड में उपयोग कर सकते हैं। यह समझने के लिए कि, विजेट अनुभाग में www.maxmert.com पर जाना और प्रलेखन पढ़ना स्वागत है। हमारे मामले में, यह

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

ठीक है, लेकिन इस विजेट के लिए एक विशिष्ट विषय कैसे सेट करें? हमें फिर से 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 फ्लैग का मतलब है कि हम विजेट को इनिशियलाइज़ कर रहे हैं, प्रोजेक्ट नहीं। एमडब्ल्यूएम आवश्यक फाइलें बनाता है, आम तौर पर परियोजना फाइलों के समान। 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} 

% का उपयोग यहां करने के लिए एक वर्ग को सीएसएस में जोड़ने के लिए नहीं किया जाता है यदि यह विजेट दूसरे विजेट की निर्भरता है (यह एक विस्तार-केवल चयनकर्ता है)। मैं आपको इसके बारे में यहां पढ़ने की सलाह देता हूं।

गतिशील आयाम

 $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 

यदि हमारे भविष्य के विजेट के अलग-अलग आकार होंगे, तो आपको निर्भरता में आकार विजेट को शामिल करने और इस लूप में हमारे विजेट के गुणों को निर्धारित करने के लिए याद रखना चाहिए। इस मामले में, प्रत्येक आकार के लिए ( आकार विजेट देखें) हम फ़ॉन्ट-आकार और पैडिंग को परिभाषित करते हैं। बेशक, आप मूल्य में nth ($ आकार, 2) को शामिल करके अन्य मापदंडों को परिभाषित कर सकते हैं। यहाँ nth ($ आकार, 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 ($ बैकग्राउंड-कलर, $ इंडेक्स) # {$ imp} में आपको केवल प्रत्येक विषय में मौजूद सूची से बैकग्राउंड-कलर को नाम में बदलना होगा, उदाहरण के लिए, यहाँ - एरर थीम । यह, उदाहरण के लिए, रंग , रंग -इनवर्ट-डार्कन , पृष्ठभूमि-रंग-इनवर्टर-डार्कनर और अन्य। इस संरचना के साथ, थीम स्वचालित रूप से आपके विजेट पर लागू हो जाएगी। उन पर निर्भर करते हुए और उनमें से कुछ विषयों को शामिल करने का प्रयास करें।

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

जांचें कि क्या आपका विजेट एक निर्भरता है। यदि ऐसा है, तो एक वर्ग चयनकर्ता बनाने की आवश्यकता नहीं है, लेकिन आप इससे विरासत में प्राप्त कर सकते हैं। यदि नहीं, तो एक वर्ग चयनकर्ता बनाएं।

परीक्षण और प्रलेखन

चलिए परीक्षणों पर चलते हैं। प्रकाशित करने के लिए, आपको सब कुछ संकलित और सही ढंग से काम करता है या नहीं यह जांचने के लिए आपको एक test.html फ़ाइल बनाने और उसमें संकलित index.css शामिल करने की आवश्यकता होगी। पोर्टल पर, आपका test.html प्रलेखन के बाद एक iframe में प्रदर्शित होगा। यदि आपने इस विजेट के github भंडार को maxmertkit.json में निर्दिष्ट किया है , तो वहां से README.md फ़ाइल ली जाएगी। यदि विजेट में गितुब रिपॉजिटरी नहीं है, तो इसके उपयोग के लिए सिफारिशों के साथ README.md फ़ाइल बनाएं। आप बेशक, इसके बिना कर सकते हैं, लेकिन किसी तरह यह खराब है। जब सब कुछ परीक्षण, लिखित और तैयार है, तो बस टाइप करें

 mwm publish 

याद रखें कि आपका नाम mwm , maxmertkit.json फ़ाइल, लेखक फ़ील्ड से लेगा, लेकिन आपसे पासवर्ड दर्ज करने के लिए कहा जाएगा। इसके अलावा आप mwm के निर्देशों का पालन कर सकते हैं। विजेट प्रकाशित। unpublish आदेश मौजूद है, लेकिन परीक्षण उद्देश्यों के लिए, इसलिए सर्वर इसे अनदेखा करेगा (यह जल्द ही पूरी तरह से mwm से गायब हो जाएगा)। यदि आपको अचानक एहसास हुआ कि आपने गलती की है, तो आपको इसे ठीक करना होगा, संस्करण को maxmertkit.json में अपग्रेड करना होगा और विजेट को फिर से प्रकाशित करना होगा। Mwm अच्छी तरह से संस्करण बनाने का समर्थन करता है, इसलिए यदि कोई आपके विजेट के पुराने संस्करण का उपयोग करता है, तो कुछ भी नहीं टूटेगा।

थीम बना रहे हैं

थीम सीधे साइट पर बनाई जा सकती है। यह तेज और सुविधाजनक है। सामाजिक नेटवर्क में से एक का उपयोग करके लॉग इन करें, थीम के सामने a + दिखाई देगा, जिस पर क्लिक करके आप थीम जोड़ने के लिए पेज पर जाएंगे। यह नाम और प्राथमिक रंगों में प्रवेश करने के लिए पर्याप्त है: मुख्य और उल्टा। शेष खेतों को खाली छोड़ दिया जा सकता है, उनकी गणना स्वचालित रूप से की जाएगी (इन क्षेत्रों के प्लेसहोल्डर देखें)।

मुद्दे

Mwm के लिए - https://github.com/maxmert/mwm/issues
विजेट, थीम, संशोधक और एनिमेशन (sass और css के लिए) - https://github.com/maxmert/maxmertkit/issues
अंग्रेजी या रूसी के साथ मेरी समस्याएं (मैं ग्रंथों को संपादित करने में आपकी सहायता करने के लिए विनती करता हूं) पीएम पर habrahabr या me@maxmert.com पर हैं ।

प्रतियोगिता

मैं आपसे पूछता हूं, दोस्तों, मुझे मेल किए हुए vetrenko.maxim@gmail.com पर तैयार यूआई भेजने के लिए (कृपया विषय habrahabr - UI को इंगित करें ताकि मैं नेविगेट कर सकूं) जिसे आप मैक्समार्टकिट में लागू देखना चाहते हैं। जहां तक ​​संभव हो, सबसे आकर्षक के साथ शुरू करना, मैं उन्हें जोड़ूंगा। यह बहुत अच्छा होगा! आप jpg भेज सकते हैं (इस मामले में, जब मैंने कार्यान्वयन शुरू किया, तो सबसे अधिक संभावना है कि मैं psd पूछूंगा) या तुरंत psd। मैं पोस्ट को अपडेट करूंगा ताकि यह देखा जा सके कि निकट भविष्य में क्या दिखाई देगा।

पुनश्च : दोस्तों, मैं विदेशी ब्लॉगों पर वितरण के लिए एक अंग्रेजी लेख लिखने के लिए मदद मांगता हूं। तथ्य यह है कि अंग्रेजी में मैं रूसी में लिखता हूं, सजा के लिए खेद है। सबसे अधिक संभावना है कि मैं इस तरह के एक सक्षम लेख के पाठ को मुख्य पृष्ठ पर ले जाऊंगा और आपको लेख के लेखक के रूप में इंगित करूंगा। और मैं, दुर्भाग्य से, प्रासंगिक विषयों के साथ विदेशी ब्लॉग पर खाते नहीं हैं, इसलिए मैं इसके साथ मदद करने के लिए कहता हूं।