Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2016
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Anyone here use Bootstrap?

    I was playing around with Bootstrap. I am finding it very easy and fun to use.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,475
    Thanks
    6
    Thanked 1,229 Times in 1,199 Posts
    Stay away from that. It’s bloated and adds redundant and non-semantic crap to your HTML. Bootstrap might have its place, but not on 99.9% of the websites on which it’s used.

  3. #3
    New to the CF scene
    Join Date
    Nov 2016
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I love it. Especially tables. Like you said, it's pretty fun and easy. The glyphicon font is great too (as a business programmer who has time for images), and so are the input groups and of course the menu implementation was easy to convert my own custom table driven (sigh, yes hashed), user based .NET tiered level user based security.

    I used it to convert a large 60 form table driven intra-extra net site (I know, the horror, not RESTFUL) to responsive design in just a couple of weeks with no prior experience. Of course, I'd already used percentage widths in columns and controls anyway (oh, the further horror, style= user alert).

    Before we throw rocks, consider that this is a guy who started with assembler, cobol, CICS and easytrieve on legacy IBM systems in the 90s, and self taught to the C# and .NET SQL server.

    So it's all relative, and I don't think you can ever go wrong so long as you're perpetually self evaluating your approach to problem solving.

    As such, I tend to write my own CSS classes much more now, hence the reason I love to read this. But yes, I agree, it has it's place.

    Sent from my SAMSUNG-SM-J120AZ using Tapatalk

  4. #4
    Regular Coder Strider64's Avatar
    Join Date
    Dec 2011
    Posts
    172
    Thanks
    5
    Thanked 26 Times in 26 Posts
    I agree with VIPStephan. Another reason not to use Bootstrap in my opinion is that one doesn't learn HTML/CSS like they really should.
    "A person who never made a mistake never tried anything new." ~ Albert Einstein

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    1,441
    Thanks
    2
    Thanked 216 Times in 207 Posts
    The ONLY thing you can learn from bootstrap is how NOT to build a website. The endless pointless mind-numbingly DUMBASS use of "presentational classes" in the markup -- saying what you want it to look like instead of what things ARE -- much like the OOCSS rubbish upon which it is based defeats the ENTIRE reason HTML and CSS are separate in the first place. You might as well go back to writing HTML 3.2 with tables as if CSS never even existed!

    It is most certainly not "easier" since you'll end up writing TWICE OR MORE the HTML needed to do the job, meaning you are more often than not writing as much if not MORE code than if you skipped the fat bloated framework rubbish in the first place.

    Anyone telling you it is easier, faster, more productive, or generally singing its praises doesn't know enough about HTML or CSS to be flapping their gums on the topic.

    You can see just what total derp it is first-hand in even the simplest of their demo's, where they are vomiting up this gibberish:

    Code:
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    
        <div class="container">
    
          <div class="starter-template">
            <h1>Bootstrap starter template</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
          </div>
    To do the job of what I'd be writing as:

    Code:
    <div id="top"><div class="widthWrapper">
    	<h1><a href="/">Project Name</a></h1>
    	<input type="checkbox" id="mainMenuShowHide">
    	<label for="mainMenuShowHide"></label>
    	<ul id="mainMenu">
    		<li><a href="#" class="current">Home</a></li>
    		<li><a href="#about">About</a></li>
    		<li><a href="#contact">Contact</a></li>
    	</ul>
    <!-- .widthWrapper, #top --></div></div>
    
    <div id="content" class="widthWrapper">
    	<h2>Bootstrap starter template</h2>
    	<p>
    		Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.
    	</p>
    <!-- #content --></div>
    620 bytes vs. their 1200. Nearly HALF the code to do the exact same thing. JUST as by the time you make your own layout out of it instead of what they are set up to do by default, you'd likely write as much CSS as you'd have without their trash.

    Don't even get me started about the incompetant ignorant RUBBISH you get into once a real layout starts being built with the ridiculously absurd bloated garbage you'll end up slopping together like this:
    Code:
            <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
              <div class="sidebar-module sidebar-module-inset">
    Hell, even this one simple line:
    Code:
        <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    Should be throwing up a warning flare as to the level of incompetance the creators of bootcrap have in regards to building a website... there is something MISSING, care to guess what? Same goes for this idiocy:

    Code:
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    X-UA should only be used to tell pages to use OLD rendering modes, not new ones. If a new page "needs' that meta, it's eneptly coded TRASH. Same goes for that emulation modes warning idiocy, HTML 5 shiv to allow for tags that are pointless redundant code-bloat BS anyways, or crapping in some shiv for media queries on old browsers.

    ... and that's before we even TALK the total derp of all of the media query width triggers being in pixels, regardless of what the content is.

    Frameworks in general fall into this trap of "oh it looks so easy" when in fact every praise sung about them is the exact OPPOSITE of what they do!

    I explain this somewhat less politely here:
    HTML, CSS and JavaScript Frameworks - Incompetent Nonsense - CUTCODEDOWN

    I have never seen anything built with bootcrap -- EVEN Twitter itself -- that wasn't a bloated inaccessible train wreck laundry list of how NOT to build a website. It is universally bloated incompetent trash that does nothing but teach you bad habits. Until you can do everything it provides with just vanilla HTML and CSS, you likely shouldn't even be looking at a framework as you therein have no idea how badly it is saddling you up and taking you for a ride.

    Do yourself and the world a favor, go find a stick to scrape that off with before you track it all over the webs carpets, and learn to do it WITHOUT the rubbish framework using SEMANTIC markup, classes and ID's that say what things ARE and NOT what you want them to look like, and proper separation of presentation from content so you at least have a CHANCE the page might gracefully degrade.

    Apologies if that seems a little harsh, but the truth often is.
    Last edited by deathshadow; 01-12-2017 at 02:48 AM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  6. #6
    Regular Coder benanamen's Avatar
    Join Date
    Oct 2015
    Posts
    869
    Thanks
    2
    Thanked 89 Times in 86 Posts
    @deathshadow, with your expertise wouldnt it be rather easy for you to take the current bootstrap.css (v.3.3.7) and clean up the bloat? The full file is only 143kb. We could call it deathstrap or something. I think it would really take off since it would be done correctly. Perhaps we could make this a group project. I will be happy to do testing.

    They do provide the full source.

    * Edit: By the way, there is tons of work being done on version 4 that may address your complaints. You can follow it here if interested https://github.com/twbs/bootstrap

    You could also be a contributor. They could use a guy like you. This might be a better idea. This is the dude to contact (created bootstrap) https://twitter.com/mdo. He is also the Director of Design at Github

    Edit* Here is the guys coding standard. Interested to know what you think. Code Guide by @mdo
    Last edited by benanamen; 01-12-2017 at 04:04 AM.
    To save time, lets just assume I am almost never wrong.

    The XY Problem
    The XY problem is asking about your attempted solution (X) rather than your actual problem (Y). This leads to enormous amounts of wasted time and energy, both on the part of people asking for help, and on the part of those providing help.

  7. #7
    New Coder
    Join Date
    Oct 2016
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am thinking, though, there may be more bloat to the html, but in return, you have less CSS coding to write.

  8. #8
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    1,441
    Thanks
    2
    Thanked 216 Times in 207 Posts
    Quote Originally Posted by benanamen View Post
    @deathshadow, with your expertise wouldnt it be rather easy for you to take the current bootstrap.css (v.3.3.7) and clean up the bloat?
    Not when the fundemental concept of how it works -- which for all intents and purposes is that OOCSS asshattery -- is so fundementally flawed the only practical solution is to drag it around back of the woodshed with a 30-06, press that barrel right behind the ear and pull the trigger.

    It uses classes in a presentational manner -- that means it's putting presentation IN THE MARKUP so that you are saying what things should look like, and NOT what they ARE. 95%+ of the classes found in bootstrap are garbage I would NEVER tell someone to do in the first place. The MOMENT you see a class like "float-right" or "nav-pills" or "xm-s-4", that's the warning flare that developer ineptitude and ignorance is flourishing.

    Again, see idiocy like this:
    Code:
        <div class="container">
          <div class="header clearfix">
            <nav>
              <ul class="nav nav-pills float-right">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
                </li>
              </ul>
            </nav>
            <h3 class="text-muted">Project name</h3>
          </div>
    
          <div class="jumbotron">
            <h1 class="display-3">Jumbotron heading</h1>
    ... taken right from one of their demo's. If you don't know what's wrong with that (which is to say EVERYTHING) you have ZERO huffing business writing HTML, much less CSS.

    Let's go down the list... endless pointless classes for NOTHING, h3 preceding a h1, h3 as the first heading on a page so the document structure is gibberish, an attempt at accessible text "current" that in fact makes it HARDER to use on screen readers, use of that STUPID HUFFING "active' class that could be easily mistaken for the psuedostate OF THE SAME NAME (HTML/CSS really needs reserved word rules!)... Much less it's BROKEN when you try to zoom as that Jumbotron crap lacks a double wrapper on something that clearly NEEDS double-wrapping behavior so a max-width can be properly implemented!

    that's one giant mess of incompetance for what has ZERO business being significantly more than:

    Code:
    <div id="top">
    
    	<h1>Project Name</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="#" class="current">Home</a></li>
    		<li><a href="#">About</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
    
    	<div class="jumboTron">
    		<h2>Jumbotron heading</h2>
    Apart from the utter and complete IGNORANCE of how to leverage selectors properly in CSS that the mouth-breathing idiotic dumbass halfwit RUBBISH bootcrap DUPES greenhorns and the gullible into thinking is how sites should be built.

    See:
    Part 2, Markup - What's wrong with YOUR website? - CUTCODEDOWN

    Quote Originally Posted by benanamen View Post
    I think it would really take off since it would be done correctly.
    Done "correctly" it wouldn't use ANY of that huffing garbage. We have it already, it's called HTML, CSS and leveraging selectors properly!

    Quote Originally Posted by benanamen View Post
    You could also be a contributor. They could use a guy like you.
    All I could tell them is kill it, with fire. It does NOTHING of value if you care in the SLIGHTEST about accessibility, separation of presentation from content, graceful degradation, semantic markup, or even just using HTML or CSS the way they are SUPPOSED to be used. The very CONCEPT of it is little more than catering to the crowd who refuses to pull their cranium out of 1997's rectum to the point that again -- as I say over and over -- if you're going to build a site using classes that way, you might as well go back to using HTML 3.2 and the browser proprietary crap that sleazed it's way into HTML 3.2, slap a 4 tranny atop it or 5 lip-service around it, then pat each-other on the back over how "modern" you are.

    Quote Originally Posted by benanamen View Post
    He is also the Director of Design at Github
    That would explain why github is broken inaccessible scripttard crap flipping the double bird at accessibility I cannot stomach as a user.

    See their homepage that cannot even maintain legible font sizes or legible colour contrasts in the typical "WCAG, what's that?!?" kind of way. Much less such STUNNING derpitude as:

    Code:
      <body class="logged-out  env-production windows  page-responsive min-width-0 alt-body-font">
        <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
        <a href="#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>
    
        
        
        
    
    
    
              <header class="site-header js-details-container alt-body-font" role="banner">
      <div class="container-responsive">
        <a class="header-logo-invertocat" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
          <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
        </a>
    Doing the job of:

    Code:
    <body>
    
    <div id="top"><div class="widthWrapper">
    	<h1><a href="/">GitHub</a></h1>
    	<a href="#content" class="skipToContent">Skip To Content</a>
    or this poster child for how NOT to code a menu (since it's a run-on sentence thanks to the lack of block level containers or semantic dividing characters between the anchors):
    Code:
        <div class="site-header-menu">
          <nav class="site-header-nav site-header-nav-main">
            <a href="/personal" class="js-selected-navigation-item nav-item nav-item-personal" data-ga-click="Header, click, Nav menu - item:personal" data-selected-links="/personal /personal">
              Personal
    </a>        <a href="/open-source" class="js-selected-navigation-item nav-item nav-item-opensource" data-ga-click="Header, click, Nav menu - item:opensource" data-selected-links="/open-source /open-source">
              Open source
    </a>        <a href="/business" class="js-selected-navigation-item nav-item nav-item-business" data-ga-click="Header, click, Nav menu - item:business" data-selected-links="/business /business/partners /business/features /business/customers /business">
              Business
    </a>        <a href="/explore" class="js-selected-navigation-item nav-item nav-item-explore" data-ga-click="Header, click, Nav menu - item:explore" data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship /showcases /explore">
              Explore
    </a>      </nav>
    Doing the job of:

    Code:
    <ul id="mainMenu">
    	<li><a href="/personal">Personal</a></li>
    	<li><a href="/open-source">Open source</a></li>
    	<li><a href="/business">Business</a></li>
    	<li><a href="/explore">Explore</a></li>
    </ul>
    Admittedly a LOT of that ineptitude comes from some brain damaged rhesis monkey on crack flinging JavaScript at the site like it was feces at the zoo. Most pathetically laughable part being I bet they have deluded themselves into thinking that by adding all that hundreds of K of JS for nothing and using 25k of HTML to deliver 2k of plaintext, four form elements, and five content images (aka 10k or less' job) they are magically making the page "faster" or "easier to maintain" or "more efficient" -- ALL of which are BS claims made by incompetent fools who to be frank, have zero business making websites!

    Again, at least not if you actually care about the result being useful to as many users as possible; sites like github telling users like me to go **** myself -- but Joe forbid I respond in kind with a few harsh words.

    Which is all I have for the METHODOLOGY used to build such sites, or any of these HTML/CSS frameworks.

    The CLOSEST I would come to a "framework" is this HTML:
    Baseline Template

    ... and this CSS:
    http://www.cutcodedown.com/for_others/screen.css

    Anything more than that? Pointless code-bloat trash that serves NO legitimate purpose apart from sweeping developer and/or "designer" ineptitude under the rug!

    ... and having spent a lot of time (and made a good chunk of change) helping sites clean up these messes when said broken methodology results in them facing government fines or lawsuits over failing to meet even the SIMPLEST parts of WCAG 2.0 AA minimums, that's why I'm so vehemently against this TRASH that does nothing but teach people how NOT to build a website.

    Case in point, if Github were to be involved in a UK government project or be recognized as an "essential service" -- they most certainly would qualify to be fined. JUST as if their designer were outsourced, they would be within their rights to sue said designer and developers for failing to meet the various accessibility laws.

    Again, part of why I can't understand how Github is popular... but I say the same thing about a lot of the trash out there that caters to the perfectly sighted perfectly healthy perfect mix of display size and resolution and pretty much say to hell with anybody else. Aka the equivalent of the asshats who complain every time they're told they need to put in wheelchair access at a public facility like a bank -- or ***** about the "expense" of putting braille on the keys at a ATM.
    Last edited by deathshadow; 01-12-2017 at 04:59 AM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  9. Users who have thanked deathshadow for this post:

    danomah (01-13-2017)

  10. #9
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    1,441
    Thanks
    2
    Thanked 216 Times in 207 Posts
    Quote Originally Posted by Hjb1694 View Post
    I am thinking, though, there may be more bloat to the html, but in return, you have less CSS coding to write.
    Once you get into doing something more than what it simply does out of the box -- aka a unique design and not some garbage cookie-cutter -- it's actually more of a wash BEST CASE in terms of what you actually have to write... except now you have a hundred and a half K of rubbish CSS on top for nothing... along with likely more DOM elements, more complex rules to be applied, a larger class list resulting in classes taking longer to render (despite the claims of the people who say to throw classes at everything to make it faster -- that should REALLY set off your BS alarm), etc, etc.

    Much less if you follow their HTML examples you've thrown semantics out the window and accessibility with it.
    Last edited by deathshadow; 01-12-2017 at 04:57 AM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  11. Users who have thanked deathshadow for this post:

    danomah (01-13-2017)

  12. #10
    New Coder
    Join Date
    Sep 2016
    Location
    Dublin, Ireland
    Posts
    31
    Thanks
    18
    Thanked 2 Times in 2 Posts
    I'll be honest, I've used it a fair bit and had some success with designing monetary sites with Bootstrap. However, I do tend to agree that it adds unnecessary markup that bloats the entire codebase. I write stuff a lot for users who are visually impaired or blind and we tested bootstrap with them. Basically it was terrible. The only benefits I can see with the framework is that it moves divs around depending on the viewport size. My blind colleagues couldn't give a halfpenny curse about where the div is visually. We tried adding an accessibility plugin to the pages but they really didn't do anything useful. Essentially a screenreader just traverses the DOM and announces the content to the reader so in this case, my colleagues saw no need for Bootstrap. That's my two cents anyway.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •