in databases, based on individual programming and content management systems that appear in the same or in similar layouts with different color schemes. We need code fragments (atoms, molecules, organisms…) which work in all of them. Unlike in atomic design, we provide HTML and CSS separately, so the HTML can be exchanged and will appear in the layout oft each site, in which it is used. Think of the csszengarden ;-)
a class “table” why a button needs a class “btn” – that’s stupid. § All my tables start like this § <table> or <table class="contact-form"> § In opposite to the first example, I can use this for white, green and pink tables! § For 80% of the webpages I made, tables weren’t even necessary. In WordPress you need a plugin before you can use tables! But bootstrap delivers quite a lot of CSS for tables. Always! § When I need them, normally they must look all the same.
§ <p bgcolor="green" size="big">I’m a headline, yeah!</p> § Back then, we wrote it by hand a hundred times on a webpage (and probably missed 10 places, where this should be). § And it was a lot of fun (not!) to change all the colors and sizes and font-weight of the headlines. § Now it’s 2019 and we write proprietary styling values in our html like table- striped and table-dark. Really? – If the designer wants to have the tables light, you will have the same fun like we had back in 1995! – But wait – maybe dark was better?
every single page – and you must change it everywhere, when someone asks for it (which maybe can be automated, but what if you have to change it and 7 of 10 pages?) Option 1 <div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> </div> </div> </div> Option 2 <main> <article>…</article> </main> - 1 Element less - 3 attributes less - 5 lengthy values less, which need to be learned in addition to CSS.
https://gridbyexample.com/examples/ What Bootstrap cannot do: - Boxes over two or more rows of the grid - Columns over 5 of 12 grid columns - Overlapping boxes Briefly: Bootstrap is not offering a 2 dimensional grid and was outdated, when all major browser supported CSS Grid https://caniuse.com/#search=css%20grid
them everyday all over the web… Looking for something fresh? See https://inclusive-components.design or https://github.com/scottaohara/accessible_components (you must be signed in) to mention only two small collections with a lot of explanations. You need a carousel? Try this: https://van11y.net/accessible-carrousel/. My favorite media player is ableplayer: https://ableplayer.github.io/ableplayer/ look t this cool demo: https://ableplayer.github.io/ableplayer/demos/video6.html Of course bootstrap doesn't come with this, so you anyway need components from outside of the bootstrap ecosystem. There are hundreds out there waiting for you to cherry-pick what you like! Accessible, responsive tables, forms, tools, whatever – you know deque, paciello and other “big players”, but there are so many people giving away great solutions at, github, codepen… the problem: when you use bootstrap, normally you stop looking.
And by the way – you don’t try to tell me, that CSS, HTML or Accessibility is not coming with (official) documentation? If anyone needs more than the spec, have a look at MDN, “The Great Accessibility Blogs Roundup” (that I found on the “WCAG A11y Professionals“ Facebook Page, by the way ;-) ): Not to mention all the videos of meetups, conferences, events like ID24 and so on…
your own components, provide them for colleague's in the company's git or host it on github et altera The good thing: you do this only once Strategy for writing less Code - Copy and Paste from the repo - Using templates in your IDE - Configuring your programming framework When doing so, there are not a lot of reasons left for using bootstrap –actually I cannot think of a single one ;-)
right? Go ahead, but don’t write it into the markup! Use a preprocessor instead. https://codepen.io/haunschild/pen/EZRvPg Idea taken from Gunnar Bittersmann (CSS preprocessors for the best of both worlds at https://bittersmann.de/talks/)
from now on, but if you work with bootstrap and if you wonder if there is life after bootstrap, I'd like to tell you: "Yes". We got rid of frames, of spacer.gif, layout tables and we can get rid of bootstrap. Try it in some kind of smaller project and you might find a way for your team or company to build up your own components library, KISS and exactly fitting for your developers and customers' needs.