बोर्बॉन नीट फ्रेमवर्क

Question

के साथ पहले मोबाइल कैसे करें I डेस्कटॉप पर पहले लेआउट करने के लिए बोर्बोन साफ ​​करने का उपयोग कर रहा है जो ठीक काम करता है।

हालांकि, मैं मोबाइल से शुरू करने और अपना रास्ता तय करने के लिए मोबाइल मोबाइल संस्करण करना चाहता हूं। डिफ़ॉल्ट ग्रिड 12 कॉलम है और मोबाइल के लिए मैं आमतौर पर 4 का ग्रिड का उपयोग करता हूं। मैंने अपनी ग्रिड को 4 तक बदलने और 12 तक स्केल करने की कोशिश की लेकिन यह काम नहीं किया।

क्या मानक डेस्कटॉप लेआउट बनाने के अलावा पहले मोबाइल करने का कोई बेहतर तरीका है, फिर प्रत्येक सीएसएस चयनकर्ता में मोबाइल मीडिया क्वेरी डालना और मोबाइल संस्करण से शुरू करना और रास्ता बनाना?

Answer 1

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

उदाहरण के लिए:

@import "bourbon/bourbon"; 
@import "neat/neat"; 

$mobile: new-breakpoint(min-width 0px 4); 
$tablet: new-breakpoint(min-width 760px 8); 

.main { 
    background: grey; 

    @include media($mobile) { 
    @include span-columns(4); 
    background: white; 
    } 

    @include media($tablet) { 
    @include span-columns(8); 
    background: black; 
    color: white; 
    } 
} 

उदाहरण मुख्य रूप से एक सफेद पृष्ठभूमि है और 4 कॉलम से बाहर शामिल होंगे। जब व्यूपोर्ट कम से कम 760 पिक्सेल चौड़ाई है, तो उसे एक काला पृष्ठभूमि मिलेगी और 8 कॉलम अवधि होगी।

Answer 2

मैं केनेथ ऑर्मेन्डी द्वारा Chasers को बाहर कर दूंगा। यह थोड़ा omega-reset(xn) पिछले मीडिया-क्वेरी omega(xn) से "xn" पास करने में शामिल है। वह जिथब रेपो पर बहुत सारे दस्तावेज प्रदान करता है और आप इसे आसानी से बोवर या एनपीएम के साथ स्थापित कर सकते हैं।

Answer 3

जोर्न के उत्तर पर विस्तार करने के लिए ... आपको $grid-columns वैरिएबल को मोबाइल चौड़ाई संख्या में सेट करने की आवश्यकता है, क्योंकि डेस्कटॉप नंबर के विपरीत यह डिफ़ॉल्ट के रूप में सेट किया गया है।

@import "../neat/neat-helpers"; 

// Neat Overrides 
$column: golden-ratio(1em, 3); 
$gutter: golden-ratio(1em, 1); 
$grid-columns: 6; 
$max-width: em(1280); 


// Neat Breakpoints 
$mobile-large-screen: em(480); 
$tablet-small-screen: em(560); 
$medium-screen: em(640); 
$medium-large-screen: em(750); 
$large-screen: em(860); 
$x-large-screen: em(970); 
$xx-large-screen: em(1088); 
$super-large-screen: em(1280); 

$mobile-large-screen-up: new-breakpoint(min-width $mobile-large-screen 6); 
$tablet-small-screen-up: new-breakpoint(min-width $tablet-small-screen 6); 
$medium-screen-up: new-breakpoint(min-width $medium-screen 12); 
$medium-large-screen-up: new-breakpoint(min-width $medium-large-screen 12); 
$large-screen-up: new-breakpoint(min-width $large-screen 12); 
$x-large-screen-up: new-breakpoint(min-width $x-large-screen 12); 
$xx-large-screen-up: new-breakpoint(min-width $xx-large-screen 12); 
$super-large-screen-up: new-breakpoint(min-width $super-large-screen 12); 

आप देख सकते हैं मैं नए breakpoints का एक बहुत बनाया है और के रूप में करने का विरोध किया मैं मोबाइल चौड़ाई में 6 कॉलम का उपयोग कर रहा है: यह क्या _grid_settings.scss फाइल की तरह एक परियोजना के लिए मैं वर्तमान पर काम कर रहा हूँ लग रहा है मूल नीट सेटिंग्स में 4 (मेरे प्रोजेक्ट में जो कुछ भी चल रहा है उसके लिए जरूरी है)। आपको इन सेटिंग्स को अपनी परियोजना के लिए काम करने के लिए तैयार करना चाहिए। हालांकि टेकवे यह है कि मैं $grid-columns परिवर्तनीय ओवरराइड कर रहा हूं और फिर अपने नए ब्रेकपॉइंट्स बना रहा हूं। साथ ही, अपने _grid_setting.scss को पहले से आयात करना सुनिश्चित करें ...

@import "bourbon/bourbon"; 
@import "grid_settings"; 
@import "neat/neat";