เฟรมเวิร์กเว็บเช่น Bootstrap หรือ HTML5 สำเร็จรูปมีอะไรให้นักออกแบบ (ไม่ใช่นักพัฒนา) หรือไม่?


27

หมายเหตุนี่เป็นเรื่องเกี่ยวกับการออกแบบมากกว่าการพัฒนา

ฉันสร้างเว็บไซต์ตั้งแต่เริ่มต้นด้วย CSS และ HTML ที่เขียนด้วยมืออย่างสมบูรณ์

ฉันรู้เกี่ยวกับเทมเพลต css ที่สร้างไว้ล่วงหน้าเช่นBootstrapหรือHTML5 Boilerplateเป็นระยะเวลาหนึ่ง ฉันได้ดูพวกเขาเมื่อไม่นานมานี้ แต่ไม่เคยใช้มันเพื่ออะไรเลย ฉันไม่มีปัญหาในการรีเซ็ต CSS หรือรวมถึงจาวาสคริปต์เมื่อจำเป็นหรือกำหนดค่าสำหรับวิวพอร์ต

เย็นวันนี้ฉันเขียนหน้า HTML5 / CSS พื้นฐาน ไม่มีอะไรที่ทำให้โลกสั่นสะเทือนในแง่ของการจัดวาง เพียงแค่กระโดดออกจากจุด หลังจากนั้นฉันตัดสินใจที่จะให้ Bootstrap วนด้วยเค้าโครงเดียวกัน มันเป็นมาตรฐานขนาด 960px, 3 คอลัมน์พร้อมหน้าภาพฮีโร่

หน้า

ขณะที่ฉันเปลี่ยน Bootstrap มันเกิดขึ้นกับฉันว่า 80% หรือมากกว่านั้นใช้เวลาในการเรียนรู้ว่าจะใช้คลาสหรือรหัสใดกับสิ่งใดจากนั้นจึงหาสิ่งนั้นใน CSS เพื่อปรับเปลี่ยน เป็นที่ชัดเจนว่า Bootstrap จะไม่ช่วยฉันได้ตลอดเวลา ในความเป็นจริง Bootstrap จะเพิ่มเวลาในการผลิตอย่างมากเนื่องจาก CSS ที่สร้างอุณหภูมิสูงเกินไป

* ( โดย "เทมเพลตมากเกินไป" ฉันหมายความว่ามี CSS จำนวนมากที่ฉันอาจจะไม่ใช้สำหรับเว็บไซต์ใด ๆ ก็ตามไม่ใช่ว่ามี CSS ที่ไม่จำเป็นทั้งหมด )

ฉันเข้าใจว่าถ้าฉันคุ้นเคยกับ Bootstrap ฉันจะคุ้นเคยกับชื่อคลาส / รหัสประจำตัวและตำแหน่งทั่วไปในสไตล์ชีต ดังนั้นฉันยินดีที่จะโค้งงอในเวลาที่ฉันกำลังตระหนักว่าบางส่วนเกิดจากความไม่คุ้นเคยของฉันเอง

อย่างไรก็ตามฉันไม่สามารถช่วย แต่สงสัยว่า Bootstrap และ ล เป็นเพียงไม้ค้ำที่ออกแบบโดยคนพิการโดยใช้ช้อนป้อนรหัสของตนเอง ดังนั้นการล็อคในฐานผู้บริโภคซึ่งจะต้องพึ่งพาโซลูชันของบุคคลที่สามอย่างสมบูรณ์และเป็นฟังก์ชันการทำงานสำหรับทุกสิ่งหรืออย่างน้อยก็ส่วนใหญ่ มันทำให้ฉันนึกถึงผู้ที่สามารถออกแบบเว็บไซต์ได้หากพวกเขาสามารถใช้ Dreamweaver ได้ และสวรรค์ห้ามหากพวกเขาไม่สามารถเข้าถึง Dreamweaver และจำเป็นต้องมีการเปลี่ยนแปลง

เมื่อฉันสร้างเว็บไซต์ฉันใช้ชื่อคลาสมาตรฐานและ ID ของฉันเอง ฉันจัดโครงสร้าง CSS ว่าเป็นวิธีที่ใช้งานง่ายสำหรับฉัน ฉันมีแม่แบบที่สร้างไว้ล่วงหน้าของตัวเองเพื่อตั้งค่าอย่างรวดเร็ว ดังนั้นเว็บไซต์ใดที่ฉันสร้างฉันสามารถแก้ไขได้อย่างรวดเร็ว ใช้ใด ๆ ของแพคเกจต้อนรับ-end ที่กำหนดไว้ล่วงหน้าก็หมายความว่าฉันต้องเรียนรู้ของพวกเขาตั้งชื่ออนุสัญญาและพวกเขาโครงสร้างมากกว่าอาศัยของตัวเอง

  • ทุกคนสามารถ extoll เมื่อฉันคุณธรรมที่ดีของระบบ templating เช่นเงินทุนหรือHTML5 Boilerplate ?
  • อะไรทำให้มีค่าสำหรับคุณ
  • คุณคุ้นเคยกับระบบที่คุณใช้เพื่อให้คุณนำทางได้อย่างง่ายดายหรือคุณยังต้องตามล่าหาสิ่งของ?
  • คุณสามารถสร้างเว็บไซต์โดยไม่มีพวกเขาถ้าคุณต้อง?

2
+1 คำถามที่ดีฉันอยากรู้อยากเห็นเกี่ยวกับเรื่องนี้ด้วยตัวเอง แต่ไม่มีที่ไหนใกล้เคียงกับจำนวนประสบการณ์ที่คุณทำ ดังนั้นฉันจึงเข้าใกล้มันเมื่อมีคนเริ่มอยากรู้ถึงข้อดีของมือใหม่ เมื่อคุณอ้างอิง Dreamweaver คุณกำลังพูดถึงการเข้ารหัสหรือวิธี WYSIWYG ของการใช้งานหรือไม่ ฉันใช้ Dreamweaver แต่มีเพียงเครื่องมือแก้ไขโค้ดและไม่มีอะไรอัตโนมัติหากฉันสามารถช่วยได้
brnnnrsmssn

ฉันหมายถึงคนส่วนใหญ่ที่ใช้มุมมองออกแบบของ DW รหัสคือรหัสและไม่สำคัญว่าเป็นสิ่งที่คุณใช้ ถึงแม้จะมีการตลาด แต่ DW ก็ยังคงเขียนรหัสซ้ำในประสบการณ์ของฉัน
Scott

1
ฟีเจอร์ Killer หนึ่งเดียวเท่านั้นที่ Dreamweaver มีคือความสามารถในการเลือกจำนวนไฟล์ภายในเครื่องโดยการสุ่มความลึกของต้นไม้แบบสุ่มโดยพลการและอัปโหลดไปยังไซต์ระยะไกล ฉันดูมานานและบ่อยครั้งสำหรับโปรแกรม FTP ที่มี Treeview ที่มีไฟล์และไดเรกทอรีรวมอยู่ด้วยซึ่งทำสิ่งนี้
horatio

1
@horatio ส่งบน Mac ไม่สามารถพูดเกี่ยวกับ Windows
Scott

@horatio Filezillaเป็นสิ่งที่ฉันแนะนำสำหรับ FTP มุมมองแบบต้นไม้และไฟล์ลากและวางแบบง่าย ๆ ไปยังและจากเซิร์ฟเวอร์
John

คำตอบ:


6

ฉันค้นคว้าโครงร่างหลายครั้งเมื่อเดือนที่แล้ว ฉันไม่ได้พุ่งจริงในใด ๆ ของการแก้ปัญหา แต่คู่ของทางเลือกกรอบที่อยู่ในตัวเลือกของฉันเป็นมูลนิธิ , ตรัสรู้และYAMLและฐาน

สิ่งที่ดีเกี่ยวกับสิ่งเหล่านี้คือพวกเขาไม่มีลักษณะ 'Bootstrap' และดูเหมือนจะกระตุ้นให้นักออกแบบทำงาน (การออกแบบ) ในขณะที่พวกเขาดูแลการตอบสนอง

นี่คือรายการใหญ่ของกรอบและข้อมูลเพิ่มเติมในเรื่องนี้บทความ

ดังที่ได้กล่าวมาแล้วฉันได้ทำวิจัยในตำนานแล้ว แต่ยังไม่ได้เริ่มทดสอบพวกเขาดังนั้นความคิดเห็นใด ๆ ที่สนับสนุนกรอบใด ๆ จะเป็นประโยชน์


สองสามเดือนต่อไป - ฉันสร้าง 'กรอบงาน' ของตัวเองขึ้นมาจริง ๆ (มันเป็นเพียงไฟล์ css ที่มีคุณสมบัติเลย์เอาต์ทั่วไป) ฉันเริ่มด้วย Base (ลิงค์ด้านบน) แต่เพิ่มการปรับแต่งมากมาย สิ่งที่ดีเกี่ยวกับฐานคือมันง่ายมากที่จะคิดออกและอ้างถึงการเริ่มต้นที่มั่นคง
John

11

ข้อดีมีแนวโน้มที่จะเป็นหลัก:

  • การสร้างต้นแบบอย่างรวดเร็ว (เช่นความเร็ว)
  • Built-in Cross browser ที่สอดคล้องกัน

หากคุณต้องการสร้างกริดและกริดที่คุณต้องการสร้างให้เหมาะกับเฟรมเวิร์ก CSS ที่สร้างไว้ล่วงหน้าตรรกะก็คือคุณต้องอยู่ที่นั่นครึ่งหนึ่งด้วยการใช้เฟรมเวิร์ก

จากทั้งหมดที่กล่าวมาฉันมักจะเห็นด้วยกับคุณ เฟรมเวิร์ก CSS, IMHO นั้นเปรียบเสมือนเทมเพลตการออกแบบภาพในกรณีที่พวกเขาตอบสนอง 90% ของวัตถุประสงค์ของคุณพวกเขายอดเยี่ยม แต่ถ้าพวกเขาทำไม่ได้แสดงว่าคุณใช้เวลามากขึ้นและพยายามปรับเปลี่ยนค่าเริ่มต้น รอยขีดข่วนของคุณเอง froms

ภาคผนวก:

ฉันควรเพิ่มประโยชน์ที่เป็นไปได้อีกหนึ่งอย่าง:

  • มันเป็นระบบเอกสาร

ในสภาพแวดล้อมแบบองค์กรที่คุณอาจมีนักพัฒนาส่วนหน้าหลายคนและโครงการอาจขยายไปหลายปีกับทีมนักพัฒนาส่วนหน้าหลายทีมการมีกรอบงานนำเสนอที่เป็นเอกสารพื้นฐานสามารถช่วยได้

นั่นไม่ได้หมายความว่าคุณไม่สามารถจัดทำกรอบการทำงานที่บ้านของคุณเองได้ แต่เป็นเพียงแค่เอกสารที่มักไม่ให้ความสำคัญ


11

ฉันคุ้นเคยกับ HTML5 Boilerplate แต่ฉันคุ้นเคยกับ Bootstrap มากขึ้นดังนั้นฉันจะพูดถึงสิ่งนั้น โปรดจำไว้ว่าทั้งสองจะมุ่งเน้นไปที่งานที่แตกต่างกันสองแบบ (H5BP เป็นแม่แบบที่ปรับให้เป็นมาตรฐานที่ตอบสนอง Bootstrap คือชุดของวิดเจ็ต HTML / CSS / JS และตารางตอบสนอง) ในความเป็นจริงพวกเขาสามารถใช้ร่วมกันได้

อย่างไรก็ตามฉันไม่สามารถช่วย แต่สงสัยว่า Bootstrap และ ล เป็นเพียงไม้ค้ำที่ออกแบบโดยคนพิการโดยใช้ช้อนป้อนรหัสของตนเอง ดังนั้นการล็อคในฐานผู้บริโภคซึ่งจะต้องพึ่งพาโซลูชันของบุคคลที่สามอย่างสมบูรณ์และเป็นฟังก์ชันการทำงานสำหรับทุกสิ่งหรืออย่างน้อยก็ส่วนใหญ่ มันทำให้ฉันนึกถึงผู้ที่สามารถออกแบบเว็บไซต์ได้หากพวกเขาสามารถใช้ Dreamweaver ได้ และสวรรค์ห้ามหากพวกเขาไม่สามารถเข้าถึง Dreamweaver และจำเป็นต้องมีการเปลี่ยนแปลง

การเปรียบเทียบล้มเหลวที่นี่เนื่องจากคุณสามารถเข้าถึงแหล่ง Bootstrap ได้อย่างสมบูรณ์ หากคุณไม่ชอบสิ่งที่ทำงานคุณสามารถเปลี่ยนได้ สำหรับฉันมันเป็นสิ่งที่ตรงกันข้ามกับไม้ค้ำ - คุณสามารถใช้ซอร์สโค้ดเพื่อเรียนรู้เทคนิค css

ฉันไม่เห็นด้วยว่า "การออกแบบเว็บไซต์" จะต้องใกล้เคียงกับโลหะมากไปกว่าที่ฉันเชื่อว่า C coders ต้องมีความรู้ภาษาแอสเซมบลีอย่างใกล้ชิด แม้ว่าการเปรียบเทียบนั้นจะไม่ราบรื่นนักเนื่องจากการปรับ HTML / CSS เป็นเพียงเรื่องของการขยายตัวเลือกและเพิ่มสิ่งที่คุณต้องการ

ทุกคนสามารถชื่นชมกับคุณธรรมที่ยอดเยี่ยมของระบบเทมเพลตเช่น Bootstrap หรือ HTML5 Boilerplate ได้หรือไม่?

คุณสมบัตินักฆ่าของ Bootstrap สำหรับฉันเป็นรูปแบบวิดเจ็ตและส่วนประกอบ Javascript ที่สอดคล้องกันและใช้งานง่าย ต้องการลิงค์เพื่อให้ดูเหมือนปุ่มหรือไม่? เพิ่มคลาส '.btn' ต้องการโต๊ะไหม เพิ่มคลาส '.table' ต้องการองค์ประกอบการนำทางหรือไม่ ตั้งค่ารายการที่ไม่เรียงลำดับแล้วเพิ่มคลาสการนำทาง

รายการแบบเลื่อนลงป๊อปอัปการแจ้งเตือน ฯลฯ จะถูกเพิ่มไปยังองค์ประกอบที่มีคุณลักษณะข้อมูลได้อย่างง่ายดาย Bootstrap มีชุดไอคอนที่ดูดีมากซึ่งสามารถรวมเข้ากับวิดเจ็ตได้อย่างง่ายดาย

อะไรทำให้มีค่าสำหรับคุณ

  • สามารถสร้างเว็บไซต์ต้นแบบได้อย่างรวดเร็ว
  • การดีบักข้ามเบราว์เซอร์และ css ข้ามแพลตฟอร์มได้ทำเพื่อฉัน
  • ปรับแต่ง CSS ได้อย่างง่ายดายด้วยตัวแปรที่หลากหลายให้เลือกเพื่อให้ฉันสามารถทดลองและวางเลย์เอาต์ต้นแบบได้อย่างรวดเร็ว
  • วิดเจ็ตการนำทางมาตรฐาน
  • ซอร์สโค้ดเปิดและฟรีฉันสามารถทำให้มือของฉันสกปรกและปรับแต่งน้อยถ้าฉันต้องการมิกซ์อินใหม่หรือเปลี่ยนพฤติกรรมในแบบที่ฉันต้องการ

คุณคุ้นเคยกับระบบที่คุณใช้เพื่อให้คุณนำทางได้อย่างง่ายดายหรือคุณยังต้องตามล่าหาสิ่งของ?

หนึ่งในคุณสมบัติที่ใหญ่ที่สุดของเงินทุนเป็นของเอกสารที่ดีเยี่ยม ฉันสามารถนำทางได้อย่างง่ายดายและ css selectors นั้นใช้งานง่ายและจดจำได้ง่าย

คุณสามารถสร้างเว็บไซต์โดยไม่มีพวกเขาถ้าคุณต้อง?

ใช่ แต่มันทำงานได้ชัดเจนยิ่งขึ้น ฉันสามารถมุ่งเน้นไปที่ UX และเลย์เอาต์ต้นแบบที่รวดเร็วด้วยวิดเจ็ตหน้าตาดีและการใช้งานที่สอดคล้องกัน


"ถ้าคุณไม่ชอบสิ่งที่ทำงานคุณสามารถเปลี่ยนได้" <- โดยสิ่งนี้คุณหมายถึงคุณถูกบังคับให้แยกโครงการ (และรักษาทางแยกเฉพาะของคุณ) หรือขยาย CSS สุดท้ายของคุณโดยยกเลิกการตั้งค่าทุกสิ่งที่คุณไม่ต้องการ "คุณสามารถใช้ซอร์สโค้ดเพื่อเรียนรู้เทคนิค css" <- เรียนรู้เทคนิค CSS ที่ไม่ดีมากมาย
cimmanon

@cimmanon พองตัว CSS โดยไม่ได้ตั้งค่า? ไม่อย่าไร้สาระ! คุณสามารถรวบรวมรหัส bootstrap ของคุณเองรวมถึงส่วนประกอบที่คุณต้องการเท่านั้น ฉันค่อนข้างสนใจที่จะเรียนรู้เทคนิค CSS ที่ทีมบูตสแตรปใช้ "แย่" ข้อมูลเฉพาะหรือคุณแค่คุยโวและอคติต่อเฟรมเวิร์ก CSS หรือไม่?
ghoppe

@ghoppe คุณเพียงแค่ข้ามทุกสิ่งทุกอย่างที่ฉันพูด คุณต้องเลือกที่จะแฮ็กสิ่งที่คุณไม่ต้องการ (และฉันไม่ได้หมายถึงโมดูลทั้งหมดที่คุณไม่ต้องการ แต่สไตล์เฉพาะในองค์ประกอบเฉพาะ) หรือแทนที่พวกเขา การส่งเสริมการใช้<i>องค์ประกอบสำหรับ "ไอคอน" นั้นแย่มาก ชื่อคลาสที่ไม่สนุก Classitis การใช้พิกเซลสำหรับขนาดตัวอักษร จริง ๆ ฉันสามารถไปเรื่อย ๆ แท้จริงแล้วพวกเขากำลังขัดแย้งกับแนวปฏิบัติที่ดีที่สุดที่ทุกคนเคยเทศนาในทศวรรษที่ผ่านมา
cimmanon

1
@cimmanon <i>องค์ประกอบเป็นความคิดที่ไม่ดีซึ่งเป็นสาเหตุที่พวกเขาหยุดทำกับรุ่น 3 ใช่ตารางไม่ได้มีความหมาย แต่คุณไม่ต้องใช้มันหรือคุณสามารถใช้ LESS / SASS เพื่อประมวลผลของคุณเอง ตัวเลือกความหมายกับสไตล์กริด มีการถกเถียงกันมากมายเกี่ยวกับสาเหตุที่เลือก px / em ด้วยวิธีที่เบราว์เซอร์สมัยใหม่ปรับขนาดหน้าเว็บปัญหาไม่ได้เกือบจะถูกตัดและแห้งเหมือนที่เคย ทุกเฟรมของ CSS ต้องการสไตล์ที่เอาชนะซึ่งเป็นเหตุผลที่ดีที่จะใช้ตัวประมวลผลล่วงหน้าของ CSS
ghoppe

1
@cimmanon มีที่ว่างสำหรับการวิจารณ์อย่างแน่นอน แต่สำหรับฉันแล้วสิ่งที่ดีเมื่อเทียบกับความเลวและสำหรับหลาย ๆ ไซต์มันเป็นจุดเริ่มต้นที่ดีในการตอบสนอง
ghoppe

7

สิ่งที่ดีเกี่ยวกับระบบและเฟรมเวิร์กเทมเพลตคือพวกเขาสามารถประหยัดเวลาได้มากถ้าคุณทำงานในแบบที่พวกเขาต้องการ ดังนั้นด้วย Bootstrap เมื่อคุณเรียนรู้ความหมายของพวกเขาสำหรับการทำม้าหมุน JS มันเกือบจะเป็นเรื่องง่ายที่จะใช้ นอกจากนี้ Bootstrap ดูเหมือนจะง่ายขึ้นมากถ้าคุณม้วนตัวเองก่อนที่คุณจะเริ่มต้นหรือใช้บางอย่างเช่นbootstrap-sassใน Rails เพื่อเปลี่ยนตัวแปรเหล่านั้นทันที มันจะช่วยคุณไม่ให้เปลี่ยนทุกอย่างในภายหลัง

DA01 พูดถึงความสอดคล้องของเบราว์เซอร์ ... ซึ่งเป็นปัจจัยสำคัญสำหรับฉัน นั่นเป็นเหตุผลที่ฉันใช้ jQuery แม้ว่าผู้คนจำนวนมากที่ SO จะเตือนคุณว่าการเพิ่มห้องสมุดขนาดใหญ่เพื่อทำสิ่งเล็ก ๆ น้อย ๆ ก็เป็นการสิ้นเปลืองทรัพยากร ฉันรู้ว่าเมื่อฉันใช้ jQuery มันจะทำงานกับเบราว์เซอร์ชุดหนึ่งและแม้ว่าฉันจะสามารถใช้โซลูชันที่มีน้ำหนักเบาได้ด้วยตัวเองฉันก็พบว่ามันมีประโยชน์มากกว่าที่จะเรียนรู้ว่า jQuery ต้องการให้ฉันเขียนอย่างไร JavaScript จากนั้นทำตามวิธีของพวกเขา

ในที่สุดฉันมักจะพบว่ากรอบงาน HTML / CSS มีข้อ จำกัด ฉันเป็นคนที่คลั่งไคล้การควบคุมมากพอที่ฉันยังคงต้องการเขียนโค้ดด้วยมือเมื่อฉันสามารถทำได้ แต่ฉันเคารพความจริงที่ว่าคนฉลาดและก้าวหน้ากว่าฉันใช้เวลามากในการตั้งค่าแม่แบบ / กรอบเหล่านี้


1
จุดดีในการกลิ้งของคุณเอง ในทำนองเดียวกันฉันรู้น้อยหรือ sass แต่จะจัดการกับตัวแปรใน CSS ผ่าน php ดังนั้น .. ฉันไม่ต้องการที่จะข้ามไปที่ทับทิมเพื่ออะไร ไม่ต้องการที่จะเบียดเบียนใน "การพัฒนา" ด้านข้างมากเกินไปเพียงแค่ต้องการให้ชีวิตง่ายขึ้น :)
สกอตต์

@Scott - Gotcha ฉันพูดถึง Ruby เพียงเพราะครั้งแรกที่ฉันลอง Bootstrap ในสภาพแวดล้อมของ Rails และฉันชอบที่คุณสามารถเปลี่ยนตัวแปรหลักได้ทันทีโดยไม่ต้องรวมรุ่นใหม่
เบรนแดน

2
@Scott อาจเป็นกรณีของ "ถ้าสิ่งที่คุณมีคือค้อนทุกอย่างดูเหมือนว่าเป็นเล็บ" - แน่นอนคุณสามารถใช้ php เพื่อจัดการกับตัวแปร CSS แต่แล้วคุณก็จะได้รับประสิทธิภาพที่ไม่จำเป็น คุณสามารถรวบรวมตัวแปรล่วงหน้าได้ด้วย LESS หรือ SASS ฉันพบว่า LESS อ่านง่ายกว่า PHP ที่เต็มไปด้วยผู้คน :)
ghoppe

@ghoppe เข้าใจดี :) แต่รายการของตัวแปรที่ด้านบนของหน้า PHP สำหรับสีจากนั้นเพียงใช้ตัวแปรเหล่านั้นในตัวเลือก CSS ทำให้วิถีชีวิตง่ายกว่า LESS หรือ SASS ในประสบการณ์ของฉัน และใช่ฉันรู้ว่า php นำเสนอประสิทธิภาพสำหรับโครงสร้างที่มีขนาดใหญ่ขึ้น แต่ฉันสามารถแยกไฟล์. css มาตรฐานที่จะใช้หากจำเป็น (เรียงลำดับสถาปัตยกรรม LESS ของฉันเอง) ฉันพบว่าการอ่านมาร์กอัปใหม่เป็นเรื่องยากน้อยกว่าเดิมเล็กน้อย HTML / CSS / PHP คุ้นเคยกันดีที่นี่
Scott

@Scott ฉันได้รับคุณโดยสิ้นเชิงกับการเรียนรู้มาร์กอัปใหม่ นั่นเป็นเหตุผลที่ฉันชอบ SASS มันเป็นเพียงแค่ส่วนเสริมของ CSS คุณไม่จำเป็นต้องเรียนรู้ไวยากรณ์ใหม่เพียงแค่คุณสมบัติใหม่ที่คุณต้องการ (เช่นตัวแปรหรือมิกซ์อิน) ง่ายสุด ๆ
ghoppe

6

คุณสนใจงานใดในทีมใหญ่สำหรับ บริษัท ใหญ่หรือไม่?

เฟรมเวิร์กเช่น bootstrap นั้นยอดเยี่ยมสำหรับการสร้างมาตรฐานของรหัสที่สอดคล้องกันตลอดทั้งโครงการซึ่งหมายความว่าเมื่อทำการสรรหานักพัฒนาใหม่ผู้ที่มีประสบการณ์ของเฟรมเวิร์กที่เป็นที่นิยมจะคุ้นเคยกับไวยากรณ์และสามารถทำงานได้เร็วขึ้น ... ข่าวดีสำหรับ บริษัท ใหญ่ ๆ

นอกจากนี้ .. ด้วยเฟรมเวิร์กเช่น bootstrap พวกมันยังคงอัปเดตอยู่ตลอดเวลาด้วยการสนับสนุนขนาดหน้าจอที่มากขึ้นอุปกรณ์ที่มากขึ้นและคุณสมบัติที่ดีกว่าให้กับ บริษัท เช่นเรา (ที่เราใช้ bootstrap) ซึ่งเป็นการประหยัดเงิน

การอ่านคำตอบบางข้อดูเหมือนว่าพวกเขาจะใจแคบฉันคิดว่าคำตอบส่วนใหญ่มาจากคนที่เคยทำงานคนเดียวหรือในทีมเล็ก ๆ และในโครงการขนาดเล็กซึ่งโดยทั่วไปแล้วสิ่งนี้ไม่เป็นปัญหา .


ดูคำตอบของฉัน :)
DA01

.. และนั่นคือเหตุผลที่ฉันถาม ฉันไม่ทำงานในสภาพแวดล้อมการพัฒนาขนาดใหญ่ ฉันสงสัยว่าความคิดเห็นของฉันจะแตกต่างกันถ้าฉันทำ
สกอตต์

4

เพิ่มกับสิ่งที่ได้รับการกล่าวในคำตอบก่อนที่ดีได้เปรียบอีกครั้งเพื่อให้แม่แบบเหล่านี้จะมีความสอดคล้องข้ามอุปกรณ์ กริดในตัวทำให้การออกแบบระบบปฏิบัติการเป็นเรื่องง่าย

ฉันยังคงต้องการเขียนรหัสของตัวเองด้วยเหตุผลดังต่อไปนี้:

  • คุ้นเคยกับสิ่งที่ฉันเขียนไปแล้ว หากฉันต้องการเปลี่ยนแปลงอะไรฉันรู้แน่ชัดว่าอยู่ที่ไหน

  • โครงสร้างโครงการเป็นศูนย์กลาง ไซต์ / แอปใหม่แต่ละแห่งจะมีความต้องการที่แตกต่างไปจากก่อนหน้านี้ดังนั้นไฟล์และทรัพยากรอาจจำเป็นต้องจัดระเบียบแยกต่างหาก

  • มุมมองที่กำหนดเองสำหรับอุปกรณ์ที่แตกต่าง

หากคุณไม่ได้ทำหน้าที่ จำกัด คุณจะต้องเพิ่มสไตล์ให้กับองค์ประกอบใหม่ ๆ และเขียนทับสิ่งที่มีอยู่เดิม

เนื่องจากฉันชอบทำงานกับการออกแบบที่ตอบสนองได้เหตุผลหลักที่ทำไมฉันไม่ใช้มันก็เพราะว่าฉันชอบที่จะออกแบบแต่ละขั้นตอนที่ตอบสนอง "แยก" และโดยรวม และแม่แบบเหล่านี้มักจะทำงานกับกริดที่เข้มงวดมากขึ้นหรือน้อยลงซึ่งคุณไม่สามารถปรับแต่งได้อย่างเต็มที่


1
นั่นเป็นส่วนหนึ่งของสิ่งที่ฉันคิด และทำไมฉันถึงตัดสินใจที่จะแทงด้วย Bootstrap การตอบสนองของระบบอาจเป็นประโยชน์ แต่ดูเหมือนว่าเกือบจะมีน้ำหนักเกินกว่าเมื่อกราฟการเรียนรู้ของโครงสร้าง เบรนเดนนำเสนอจุดที่ดีในคำตอบของเขาเกี่ยวกับโครงสร้าง "การกลิ้งของคุณ"
Scott

4

ข้อได้เปรียบที่ใหญ่ที่สุดคือคุณสามารถทดลองปรับขนาดตัวเองแทนการคาดเดาสิ่งที่จะมีลักษณะ

ฉันมีวิธีการพัฒนา "เนื้อหาแรก" ที่ฉันรหัสนำทางจริงและเพิ่มเนื้อหาข้อความ มีแนวโน้มที่จะเปิดเผยสิ่งที่คุณไม่ได้คาดหวังเมื่อคุณอยู่ในช่วงการออกแบบ

ด้วยการใช้เฟรมเวิร์กเช่น Twitter Bootstrap คุณสามารถทดสอบหน้าเว็บขณะที่ยังอยู่ในการออกแบบและอาจเปิดเผยปัญหาการใช้งานและความท้าทายประสบการณ์การใช้งานอื่น ๆ ของผู้ใช้ เฟรมเวิร์กมีคลาสที่ใช้ซ้ำได้มากมายซึ่งคุณจะคุ้นเคยและจะช่วยคุณประหยัดเวลา

คุณพูดว่าคุณเขียนโค้ดเป็นจำนวนมากตั้งแต่เริ่มต้น เมื่อฉันมีบางสิ่งบางอย่างที่ต้องเป็นแบบกำหนดเองหรือมีน้ำหนักเบามากฉันจะไปกับSkeleton


ขอขอบคุณ. ฉันพบ Skeleton ที่ดีและใช้งานได้ดีเมื่อเทียบกับคนอื่น ๆ เพียงพอที่จะช่วยตอบสนองได้โดยไม่ต้องออกแบบอะไรให้คุณ
สกอตต์

3

เป็นเวลาหลายปีที่ฉันใช้ handcode ทุกอย่าง แต่ทุกวันนี้ฉันมักจะใช้ Bootstrap ทำไมฉันถึงทำอย่างนั้น?

  1. ฉันได้รับเลย์เอาท์ที่ตอบสนองด้วยงานน้อยมาก ในบางเว็บไซต์ที่ฉันทำงานอยู่นั้นต้องมีการปรับแต่งเล็กน้อยเพื่อให้ได้รูปแบบแท็บเล็ตและอุปกรณ์พกพาที่ดีที่สุด navbar แบบตอบสนองเป็นหนึ่งในองค์ประกอบ bootstrap ที่ฉันโปรดปราน
  2. การควบคุมเริ่มต้นนั้นไม่สอดคล้องกันระหว่างเบราว์เซอร์และระบบปฏิบัติการไม่ต้องพูดถึงพวกมันล้วนน่าเกลียดไม่ว่าระบบปฏิบัติการหรือเบราว์เซอร์ใดที่คุณใช้อยู่ ด้วย bootstrap คุณจะได้รูปลักษณ์ที่สอดคล้องและรู้สึกถึงงานเล็ก ๆ น้อย ๆ หากคุณต้องการควบคุมการควบคุมทั้งหมดแม้ว่าใช่แล้ว Bootstrap จะไม่ช่วยคุณประหยัดเวลา แต่จากประสบการณ์ของฉันส่วนใหญ่คุณจะไม่มีเวลาพอที่จะควบคุมการควบคุมทุกอย่าง แต่ก็ยังรู้สึกหงุดหงิดโดยค่าเริ่มต้นที่น่าเกลียด การควบคุม
  3. มันทำให้เกิดข้อ จำกัด ในสิ่งที่คุณต้องการทำซึ่งเป็นสิ่งที่ดีเพราะเมื่อทำงานใน CSS ที่บริสุทธิ์คุณมักจะต้องการปรับแต่งทุกสิ่งเล็ก ๆ น้อย ๆ (สี, ความหนาของเส้นขอบ, การไล่ระดับสี, เงา, รัศมีชายแดน) การเปลี่ยนและรายการดำเนินต่อไป) ในขณะที่แต่ละรายการใช้เวลาน้อยในภาพรวมมันเป็นช่วงเวลาสำคัญ เมื่อทำงานกับโครงการที่มีกำหนดส่งคุณต้องการ จำกัด สิ่งที่คุณสามารถทำได้และทำไม่ได้ การใช้เฟรมเวิร์กช่วยให้คุณคิดในองค์ประกอบที่หยาบขึ้นแทนที่จะเป็นคุณสมบัติ CSS ที่จะปรับแต่ง
  4. เฟรมเวิร์กฝั่งเซิร์ฟเวอร์บางตัวมีการรวมกับ bootstrap ตัวอย่างเช่นเมื่อใช้ django-bootstrap คุณสามารถทำได้{{ form|as_bootstrap }}เพื่อรับรูปแบบ bootstrap สไตล์ในรูปแบบรวมถึงไฮไลท์สีแดงในข้อความแสดงข้อผิดพลาด ฯลฯ

ขณะที่ฉันเปลี่ยน Bootstrap มันเกิดขึ้นกับฉันว่า 80% หรือมากกว่านั้นใช้เวลาในการเรียนรู้ว่าจะใช้คลาสหรือรหัสใดกับสิ่งใดจากนั้นจึงหาสิ่งนั้นใน CSS เพื่อปรับเปลี่ยน

นั่นคือสิ่งที่คุณเข้าใจผิด หากคุณต้องการได้รับประโยชน์จาก Bootstrap คุณไม่ควรปรับแต่งมากเกินไป คุณเลิกใช้ความยืดหยุ่นในการปรับแต่งและสามารถปรับแต่งทุกอย่างเมื่อใช้ส่วนประกอบที่สร้างไว้ล่วงหน้า คุณไม่ควรใช้เวลาในการเลื่อยหรือแกะสลักไม้เมื่อทำการตกแต่งห้องจากส่วนประกอบของ IKEA

Bootstrap นั้นดีเมื่อคุณต้องการแพทช์เว็บไซต์ทำงานจากส่วนประกอบที่สร้างไว้ล่วงหน้าอย่างรวดเร็ว ส่วนประกอบของมันนั้นยื่นออกมาเหมือนนิ้วหัวแม่มือเจ็บหากคุณใส่ไว้ในเว็บไซต์ที่มีการออกแบบที่หรูหราดังนั้นฉันมักจะวาง Bootstrap สำหรับโครงการประเภทนั้น

การใช้แพ็คเกจ Front-End ใด ๆ ที่กำหนดไว้ล่วงหน้านั้นหมายถึงฉันจำเป็นต้องเรียนรู้แบบแผนการตั้งชื่อและโครงสร้างของพวกเขาแทนที่จะต้องพึ่งพาตัวเอง

นี่คือข้อดีของการใช้แพ็คเกจยอดนิยม มันง่ายกว่าที่จะมอบโปรเจ็กต์ให้กับผู้พัฒนารายอื่นเมื่อคุณทั้งคู่รู้ว่า "btn-group", "btn btn-large" ทำอะไรด้วยโครงร่างส่วนบุคคลที่พวกเขาจะต้องเรียนรู้ลักษณะเฉพาะของคุณ CSS ของคุณพร้อมกับการเปลี่ยนแปลงและไม่ต้องพยายามถอดรหัสหรือดัดแปลงรหัสของคุณ)

คุณคุ้นเคยกับระบบที่คุณใช้เพื่อให้คุณนำทางได้อย่างง่ายดายหรือคุณยังต้องตามล่าหาสิ่งของ?

คนทั่วไปเช่น btn, ตาราง, แถว *, ช่วง *, ฯลฯ จะเป็นธรรมชาติ แต่สำหรับ html สำหรับองค์ประกอบหลักมันเร็วกว่ามากเพียงแค่คัดลอกวางจากตัวอย่างแทนที่จะพิมพ์ออกมา

คุณสามารถสร้างเว็บไซต์โดยไม่มีพวกเขาถ้าคุณต้อง?

เคยไปทำมาแล้วหลายครั้ง


ขออภัยฉันเห็นคำตอบนี้ว่า "การออกแบบ Bootstrap สำหรับฉันไม่ใช่การออกแบบเว็บไซต์" ในฐานะผู้ออกแบบที่ตรงกับที่ผมรู้สึกว่าเงินทุนล้มเหลว หากคุณกำลังใช้ Bootstrap เพื่อกำหนดสไตล์ทุกอย่างคุณจะต้องใช้ Bootstrap เพื่อออกแบบให้คุณ โดยพื้นฐานแล้วคุณกำลังทำเค้าโครงหน้ากระดาษไม่ใช่การออกแบบ
สกอตต์

@Scott: ถูกต้องฉันไม่ใช่นักออกแบบกราฟิก ฉันสนใจเกี่ยวกับเว็บไซต์ที่ใช้งานได้และสามารถสร้างมันได้อย่างรวดเร็วและน้อยลงเกี่ยวกับว่ามันถูกทาสีด้วยสีที่ฉันต้องการ
Lie Ryan

ยุติธรรมพอสมควร (แต่ให้ชื่อเว็บไซต์นี้ .... ) ฉันไม่ได้ถามเกี่ยวกับการพัฒนา ฉันถามเกี่ยวกับการออกแบบ ผมเข้าใจโดยใช้เงินทุนเป็น "นักออกแบบของคุณ" แต่ถ้าคุณเป็นนักออกแบบ Bootstrap เพียงมีโครงสร้าง ฉันพบว่ามันยากที่จะเห็นคุณค่าในโครงสร้างที่บรรจุไว้ล่วงหน้าฉันจะเขียนใหม่เพื่อให้มีลักษณะที่ดีขึ้น มันง่ายพอที่จะสร้างคลาส. btn ของคุณเองและสไตล์ มีค่าน้อยในลักษณะที่ปรากฏของรายการ CSS ในฐานะนักออกแบบ
Scott

คุณทำราวกับว่าคุณสามารถเขียน Bootstrap ในหนึ่งชั่วโมง :)
deizel

ไม่เลย. แต่ฉันอยากจะใช้เวลามากกว่านี้ในการแสดงผลที่กำหนดเองมากกว่าที่จะใช้แพคเกจบรรจุกระป๋องซึ่งทุก ๆ ไซต์จะดูเหมือนกัน ฉันไม่คาดหวังว่านักพัฒนาซอฟต์แวร์ทุกคนจะ "เข้าใจ" และสำหรับการบันทึกเงินทุนไม่ได้ว่ามีส่วนเกี่ยวข้องหรือซับซ้อน เป็นเพียงธรรมเนียมที่ต้องเรียนรู้การตั้งชื่อ Twitters
สกอตต์

2

เหมาะสำหรับ:

  1. นักออกแบบที่ไม่คุ้นเคยกับการเขียนโค้ด แต่ต้องการโซลูชันเพื่อนำการออกแบบของพวกเขาไปยังไซต์
  2. วิธีในการสตรีมการผลิตรายการสำหรับผู้ที่ไม่ต้องการสร้างกรอบงานของตนเอง

ส่วนตัวฉันมีวิธีการของตัวเองและไม่ต้องการที่จะไปเส้นทางนี้เพราะฉันได้เรียนรู้วิธีการรหัส CSS, HTML และ jQuery ฉันเห็นประโยชน์ในสิ่งเหล่านี้สำหรับผู้ที่ไม่มีเงื่อนงำและกำลังพยายามเรียนรู้วิธีเขียนโค้ด คงจะดีถ้าได้เห็นอะไรแบบนี้ประมาณห้าปีที่แล้ว นอกจากนี้ตามที่คุณระบุไว้คุณจะต้องใช้เวลานานกว่านี้ในการใช้วิธีการผลิตปัจจุบันของคุณ

แก้ไข: ไม่พยายาม highjack เธรดของคุณ แต่ฉันก็สงสัยในสิ่งเดียวกัน แต่เกี่ยวกับ WordPress ฉันใช้ WordPress เบา ๆ แต่ฉันไม่รู้ว่ากรอบงานนั้นมีประโยชน์หรือไม่ ฉันวางแผนที่จะใช้วิธีที่ล้าสมัยจนกระทั่งฉันได้รับประโยชน์ที่สำคัญ


3
WordPress มีประโยชน์ต่อผู้ที่ไม่รู้จัก PHP, ต้องการสถาปัตยกรรมปลั๊กอินให้กับ PHP หรือต้องการระบบผู้ใช้ / ระบบรักษาความปลอดภัย ฉันเห็นประโยชน์เพิ่มเติมในระบบ CMS โดยรวมมากกว่าที่ฉันทำกับเทมเพลต CSS การใช้ Wordpress ไม่ได้เกี่ยวกับ front-end แต่มันเกี่ยวกับ back-end
สกอตต์

0

Bootstrap นั้นดีพอ ๆ กับเป็นจุดเริ่มต้นสำหรับเค้าโครงที่ตอบสนองได้ดี แต่เท่าที่การออกแบบไปฉันคิดว่ามันค่อนข้างขาด มันใช้รูปลักษณ์ที่ 'bootstrappy' อันเดียวซึ่งเป็นเพราะเทมเพลตของมันถูกใช้อย่างมาก ..

แต่คุณต้องคำนึงถึงสิ่งที่ bootstrap สร้างขึ้นมาเพื่อนำความสอดคล้องมาสู่แอพภายในบ้านที่สร้างขึ้นด้วยทวิตเตอร์และถ้าคุณจะใช้มันเพื่อสิ่งนั้น แอพที่ไม่มีความคิดมากอาจเป็น mvp หรือต้นแบบเป็นเครื่องมือที่ยอดเยี่ยมจริงๆ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.