बोरीबन नीट

Question

के साथ बाहरी बाहरी कंटेनर आकार मैं बोर्बोन नीट के साथ काम करना सीख रहा हूं और मैंने हमेशा बूटस्ट्रैप की ग्रिड प्रणाली के साथ काम किया है। मैं बोर्नबोन नीट की मूल बातें सीखने के लिए this Bootstrap grid page को फिर से बनाने की कोशिश कर रहा हूं।

सेटिंग्स मैं उपयोग कर रहे हैं:

// Bourbon Neat Grid Settings 
$column: 70px; 
$gutter: 30px; 
$grid-columns: 12; 
$max-width: em(1170); 
$visual-grid: true; 

मैं अपने breakpoints और उनके लिए new breakpoint समारोह है, जिसमें मैं भी स्तंभों की संख्या को बदल सकते हैं के साथ सेट।

लेकिन जो मैं बदलना चाहता हूं वह कंटेनर आकार है। बूटस्ट्रैप में, कंटेनर की अधिकतम-चौड़ाई इस तरह बदलता रहता है:

@media> 1200px: अधिकतम-चौड़ाई: 1170px;

@media> 992px: अधिकतम-चौड़ाई 970 पीएक्स;

@media> 768px: अधिकतम चौड़ाई: 750 पीएक्स;

हालांकि बोर्बोन नीट में, अधिकतम चौड़ाई एक चर के साथ एक बार सेट की जाती है। मैं वर्तमान में इसे max-width: em(1170); पर सेट कर चुका हूं मैं इस कंटेनर आकार को अलग कैसे कर सकता हूं? मैं बूटस्ट्रैप 3 के बजाय बोर्बोन नीट के साथ एक ही उदाहरण पृष्ठ कैसे प्राप्त कर सकता हूं? मुझे पता है कि Susy में आप set the container width

Answer 1

कुछ निम्नलिखित की तरह काम कर सकते हैं: इस प्रकार

$large-screen: new-breakpoint(max-width 1200px 12); 
$medium-screen: new-breakpoint(max-width 992px 12); 
$small-screen: new-breakpoint(max-width 768px 6); 

@mixin bootstrap-container { 
    @include outer-container; 
    @include media($large-screen) { max-width: 1170px; } 
    @include media($medium-screen) { max-width: 970px; } 
    @include media($small-screen) { max-width: 750px; } 
} 

तो बस mixin का उपयोग करें:

#foo { 
    @include bootstrap-container; 
} 

मैं आपकी प्रतिक्रियाओं का इंतज़ार इच्छुक हूँ।

Answer 2

आप अपने सेटअप में कुछ सीएसएस/एससीएसएस ओवरराइड के साथ ऐसा कर सकते हैं।

चलें मान आप अपने एससीएसएस फ़ाइल में इस किया है, के रूप में Bourbon साफ में मानक है:

$max-width: 1000px; 

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

.outer-container{ 
    @include outer-container; 
} 

वर्तमान में कुछ भी आप बाहरी कंटेनर के साथ रैप एक अधिकतम चौड़ाई 1000 पिक्सेल (या अपने उदाहरण में 1170em) होगा।

विभिन्न स्क्रीन आकार/मीडिया प्रश्नों पर कंटेनर की अधिकतम-चौड़ाई को बदलने के लिए, आप इन पंक्तियों के बाद मीडिया प्रश्नों को शामिल कर सकते हैं जो आपकी मूल घोषणा को छोड़ देते हैं उदा।

.outer-container{ 
    max-width: 800px; 
    @media all and (min-width: 750px){ 
    max-width:1500px; 
    } 
} 

इस उदाहरण अधिकतम-चौड़ाई 800px विस्तृत किया जा रहा है, जब तक कि स्क्रीन आकार है तो बड़ा 749px जिस स्थिति में अधिकतम-चौड़ाई 1500px हो जाएगा खत्म होगा।

यह एक सरल साइड है जो थोड़ा हैकिश महसूस करता है, लेकिन काम पूरा करना चाहिए और आप सेटअप के बाद इसके बारे में चिंता न करें। यदि बोर्बोन नीट के पास ऐसा करने का एक उचित तरीका है तो मैंने इसे नहीं देखा है।

Answer 3

मुझे लगता है कि यह आपके प्रश्न का उत्तर देगा:

आप _grid-settings.scss में $max-width चर मान बदल कर आधार कड़वाहट स्टाइलशीट, जो _bitters.scss है कि शैली पत्रक आयात कर सकते हैं।

यदि आप _grid-settings.scss आयात किए बिना $max-width का मान बदलते हैं तो आपको outer-container चौड़ाई में कोई परिवर्तन नहीं दिखाई देगा।

Answer 4

आप visual-grid भी ठीक से प्रदर्शित करने के लिए (जैसे मैंने किया था) आप `साफ/ग्रिड/_visual-grid.scss फ़ाइल में visual-grid mixin करने के लिए अपने मीडिया के प्रश्नों में जोड़ सकते हैं की जरूरत है। कोर साफ फ़ाइलों को संपादित करने के लिए यह स्पष्ट रूप से आदर्श नहीं है, लेकिन मैं ऐसा करने का एक और तरीका नहीं सोच सका।

 @mixin grid-column-gradient($values...) { 
     background-image: -webkit-linear-gradient(left, $values); 
     background-image: -moz-linear-gradient(left, $values); 
     background-image: -ms-linear-gradient(left, $values); 
     background-image: -o-linear-gradient(left, $values); 
     background-image: unquote("linear-gradient(to left, #{$values})"); 
    } 

    @if $visual-grid == true or $visual-grid == yes { 
     body:before { 
     content: ''; 
     display: inline-block; 
     @include grid-column-gradient(gradient-stops($grid-columns)); 
     height: 100%; 
     left: 0; 
     margin: 0 auto; 
     max-width: $max-width; 
     opacity: $visual-grid-opacity; 
     position: fixed; 
     right: 0; 
     width: 100%; 
     pointer-events: none; 

     @if $visual-grid-index == back { 
      z-index: -1; 
     } 

     @else if $visual-grid-index == front { 
      z-index: 9999; 
     } 

     @each $breakpoint in $visual-grid-breakpoints { 
      @if $breakpoint { 
      @include media($breakpoint) { 
       @include grid-column-gradient(gradient-stops($grid-columns)); 
      } 
      } 
     } 

     // HACK to get visual grid to display our max-width at our media queries 
     @include media($large-screen) { max-width: 1170px; } 
     @include media($medium-screen) { max-width: 970px; } 
     @include media($small-screen) { max-width: 750px; } 
     } 

    } 

किसी और के समाधान

Answer 5

सुनने के लिए जब से मैं मैं Andrew Hacking's answer एक mixin bootstrap-container कहा जाता है का उपयोग करता है के बंद का निर्माण करना चाहते हैं टिप्पणी नहीं कर सकता जिज्ञासु। वूडुओकोड की टिप्पणी में कहा गया है कि यह विजुअल-ग्रिड के लिए काम नहीं करता है क्योंकि यह $ अधिकतम-चौड़ाई चर को स्पर्श नहीं करता है। काम करने के लिए आपको शरीर के लिए अधिकतम चौड़ाई निर्धारित करने के लिए कोड का एक टुकड़ा चाहिए: पहले। यह इस प्रकार काम करेगा:

@if ($visual-grid) { 
body:before { 
    @include bootstrap-container; 
} 
} 

एक बार ऐसा करने के बाद बाहरी कंटेनर चौड़ाई सेटिंग्स ग्रिड पर प्रभावी होती है।

Answer 6

वाह। यह एक भ्रमित विषय था। लेकिन सही ढंग से व्याख्या करने के लिए dasginganinja के लिए धन्यवाद। प्रश्न अधिकतम चौड़ाई वाली संपत्ति को बदलने के तरीके के बारे में नहीं था, लेकिन नीट के दृश्य ग्रिड को सही तरीके से प्रदर्शित करने के लिए नीट के $max-width चर को कैसे बदलें। दोसिंगानिंजा क्या कह रहा है, दोहराने के लिए, आप चर का उपयोग नहीं कर सकते हैं लेकिन आप body:before को लक्षित कर सकते हैं और अधिकतम 0 चौड़ाई वाली संपत्ति सेट कर सकते हैं जो आपके outer-container() चौड़ाई से मेल खाता है। MandsAtWork सही रास्ते पर था, लेकिन आप मूल फ़ाइलों को संपादित करने की आवश्यकता के बिना ऐसा कर सकते हैं। उदाहरण के लिए:

@import "bourbon"; 
@import "neat-helpers"; //IMPORTANT: ADD BEFORE GRID SETTINGS 

// Visual Grid 
$visual-grid: true; 
$visual-grid-color: #d4d4d4; 
$visual-grid-opacity: 0.3; 

// Initial Grid Settings 
$max-width: 100%; 
$grid-columns: 4; 

// Breakpoints 
$sm_val: 480px; 
$md_val: 640px; 
$lg_val: 800px; 
$xl_val: 1000px; 
$xxl_val: 1400px; 

$sm: new-breakpoint(min-width $sm_val 6); 
$md: new-breakpoint(min-width $md_val 7); 
$lg: new-breakpoint(min-width $lg_val 8); 
$xl: new-breakpoint(min-width $xl_val 9); 
$xxl: new-breakpoint(min-width $xxl_val 10); 

@import "neat"; //IMPORTANT: ADD AFTER GRID SETTINGS 

// Container 
@mixin container { 
    @include outer-container(100%); 

    @include media($sm) { 
     @include outer-container($sm_val); 
    } 

    @include media($md) { 
     @include outer-container($md_val); 
    } 

    @include media($lg) { 
     @include outer-container($lg_val); 
    } 

    @include media($xl) { 
     @include outer-container($xl_val); 
    } 

    @include media($xxl) { 
     @include outer-container($xxl_val); 
    } 
} 

@if ($visual-grid) { 
    body:before { 
     @include container; 
    } 
}