Was answering another question about centering a div that had the bootstrap's span12 class applied to it, and part of the solution was to reset the float as the span12, as well as the other span* classes, are floated.
Since span12 width is 100% when combined with row-fluid and 1170px when not (and other sizes that I suspect are meant to fill most of the area on different screen sizes)
This to me suggests that it is mostly a standalone grid item: not meant to have other grid elements floating along side it.
I could see if they wanted to allow for having other grid elements along side it for really huge sites (screen widths of like 2560px etc), except this would not work at all when using row-fluid as the first one in the row would take up all the space as it uses 100% width.
But I personally have not seen many, if any, sites that would use such a huge width that would allow for using a span12 grid element along side other grid elements.
So does bootstrap implement other styling methods that make it necessary to float the span12 class? Or are they just anticipating future use for huge sites?
As I use bootstrap myself, if it is necessary for other styling techniques I do not want to end up one day having removed the float when it is needed and also do not want to mislead others when answering questions if the resetting the float would end up messing up their layout when using bootstrap.
Edit
As DontFeedTheCode points out this has been addressed in Bootstrap 3, all the other grid classes get floated while the 12th one does not.
in the 2.3.2 version looks like they were using [class*="span"] as the selector for setting styles so span12 gets selected by accident
As bootstrap is written in LESS, and in 2.3.2 all span classes were generated using .gridColumn() mixin - all span classes had the float:left;. This is not for any large layout like 2500 or such.
Related
I have barely used anything other than vanilla CSS but would really like to do a couple things that aren't working well now:
I have an inner border inside a div, which I want to actually border the inside of the encapsulating div's border (double border). However with window resizing, the inner border will sometimes have too large/small width/height, even when using a measurement like % or vh/vw. I need the inner border (just a div with a border right now) to always stretch/shrink to fit snug right next to the parent border.
Similarly (notoriously) with centering, I imagine there must be a library with the ability to easily center elements vertically and horizontally. Generally I use flex box but would love something that works more consistently, elegantly and intuitively.
What say ye?
I think you're talking about a CSS framework, they help out a lot, especially when working on a major project. I would check out Twitter Bootstrap or Google's Material Design, I personally use mdbootstrap, which is a 3rd party hybrid of the two.
You could give Tacit a try for this particular need.
Tacit is a class-less CSS framework were all you need is just a single <link> statement in your HTML and the web page will have a complete and finished look.
The centering of elements vertically and horizontally come out of the box, and you can skip the usage of <div> elements or the work of defining classes for your elements.
As a side note, here are a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/
What are the differences between CSS Grid Layout and existing layouting frameworks like Bootstrap or other layouts like CSS Flexbox or CSS Tables (not HTML tables, I know they are supposed to be used for table contents only)?
What's it's concept and what use cases does it cover?
CSS grid layout is not attempt to supersede HTML tables, flexbox and grids in Twitter Bootstrap. CSS grid is a new way of creating markup.
Purpose of creating grid layout is in declaring your layout in CSS only. If you have container with plain list of children you can add 2D layout only via CSS. Not need to wrap items in row containers and so on. But it's not a benefit of grid, sometimes you need your cells to be wrapped in rows in HTML.
Twitter bootstrap and tables have the same conception: you have some rows and their children declared in HTML. It's not a shortcoming, it's how it works. And before flexbox we used these ways more often than we should due to lack of other ways.
Long long time ago (before CSS) we used only tables in frontend. That doesn't mean that tables are bad. This was the only way. But the tables are good when you really need a table. You just shouldn't use them for everything.
Flexbox is all about 1D arrangement of element. Of course in some cases it will look like 2D. In some cases you will have to use some hacks because you really need a grid! But it's due to relatively low browser of grid, not due to correct application of flexbox. It's perfect for some layouts, for others which really need 2D (where you'd better use tables or grid) it may be hacky.
So just use a grid layout where your layout is elegantly expressed in grid terms. In other cases it won't be maintainable and elegant way.
CSS Grid
CSS Gird is actual a whole new way of creating website layout.
It will give you more flexibility than any other framework or layout
system. Its very easy to create a 2D layout using CSS grid.
Websites load faster since you will skip loading heavy framework files (ex Bootstrap).
CSS grid are basically used to design the overall website layout.
Please check browser support before you actually start using it.
CSS Grid vs CSS Flexbox
Flexboxes are not a solution for website layouts.
Unlike CSS Grid you should not use Flexboxes to design the base website layout.
Flexboxes are one dimensional, that means elements only flow in one direction i.e. vertical or horizontal.
Check this image, The entire layout can be designed using CSS Grid and only the yellow section area where I might want to show an profile picture and a name below that, to achieve that I can use Flexbox instead of CSS Grid.
Use Flexbox to solve only uni-directional layout issues in your website.
CSS Grid Vs Bootstrap
You don't have to load unnecessary styles when using CSS Grid, but if you go for Bootstrap for grids then you are loading stuff which your website might not need.
Get rid of ugly markup. In Bootstap you need to use additional elements
with class row and col to design your layout. I personally feel
they makes my HTML look very ugly.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Bootstrap is not flexible, in order to change the layout you have to change the Markup. CSS job is to look after the presentation of your document, but when you use Bootstrap you are changing your HTML to to achieve your layout. When you use CSS grid you can change layout of the website without touching HTML code.
Below is an example where without changing the HTML I need section 1 to be shown first followed by section 2 and section 3. Look how effortlessly CSS Grid did the job. Where as for Bootstrap I have to update the HTML code and swap section 1 and section 2.
.wrapper {
display: grid;
grid-template-columns: 1fr;
}
.section-2 {
grid-row-start: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<h1>Bootstrap</h1>
<div class="row">
<div class="col-sm-12">Section 1</div>
<div class="col-sm-12">Section 2</div>
<div class="col-sm-12">Section 3</div>
</div>
<h1>CSS Grid</h1>
<div class="wrapper">
<div class="section-1">Section 1</div>
<div class="section-2">Section 2</div>
<div class="section-3">Section 3</div>
</div>
CSS Grid Layout allows to create a two-dimensional grid to lay out items on it. It is used to generate responsive user interface designs.
The main difference to layout systems like Bootstrap and CSS Flexbox is that it is two-dimensional. In Bootstrap and Flexbox layouts are defined one-dimensionally. This means, in CSS Grid Layout the grid items are aligned horizontally and vertically to each other like in a table. The differences to CSS tables is that it is more flexible in regard of sizing and aligning elements within a grid and allows items to overlap each other.
While the 2D effect can also be achieved (to some extent) by the other systems, Bootstrap's grid system is based on a 12-column layout and both Bootstrap and Flexbox align elements in one direction wrapping to the next line when they don't fit into the size of their container.
Furthermore, CSS Grid Layout allows to place the containing elements in different "grid areas" independently from their position within the DOM.
In Grid Layout, only items placed within implicit grids wrap elements similar to Flexbox or Bootstrap based on the available viewport or container size. Elements placed in explicit grids do not get rearranged that way, but this can be achieved in combination with media queries.
Bootstrap is a huge framework but I assume you are only refering to its grid in this comparison.
To me, the shining part of css flexbox and css grid is that they bring the grid system in the web world a bit closer to the grid system in the desktop world - it is more responsive and dynamic. What flexbox/css grid enables is that items/columns/rows can be described to adjust their sizes not only based on the size of the container, but also in response to each other.
For example, flexbox allows you to specify some item to have a fixed size (100 px), some item to have a size relative to container (20%), some item to fit to content (auto), and all the other items to share the rest available space in the proportion you want. If window size changes, all the items auto adjusts. Moreover, if the auto-sized item changes, the others will also adjust to absorb the refreshed free space. This is very much how desktop app layout works.
CSS grid shares the same capability of flexbox, but it is a grid, meaning it operates on two dimentions. If you ever try to use multiple flexbox rows to simulate a grid, you will run into the issue where you cannot ask the first item on each row to have the same size without giving it some kind of less flexible width (either a percantage or px). CSS grid can size them as a column, hence set the width to the widest item no matter which row it resides.
Bootstrap v3 simply just doesn’t have this flexibility. Its responsiveness only means responsive to container and devices, it cannot make columns/rows responsive to each other.
Bootstrap v4 is a different story, it is built on top of flexbox so the flexibility is greatly enhanced. But still, if you are just talking about gird system, I would say go for css grid and flexbox first.
Using Angularjs Material framework, I aligned the content (containing cards) to the center, the problem is when I increase the height of one card, the height of the adjacent card also increases. Example code http://embed.plnkr.co/eaLjJDbjL1KnOI4jLYyO/preview
The cards will have dynamic height, and should align one after another both horizontally as well as vertically.
I am trying to achieve some thing like this:
https://lh3.googleusercontent.com/-6ocJpsXmVLU/VTgSj9wd_CI/AAAAAAAAACs/PavEWs9wiGM/s1600/cardLayout.png
I don't think this has anything to do with Angular. It looks like your example is using flexbox CSS, which is the cause of your columns having equal height. Remove all the flex attributes and your cards will take take the height of the contained content. If you are looking for a masonry tile layout you'll likely need JavaScript to help with that since elements float left and clear one another. Take a look at this and see if this helps http://masonry.desandro.com/
I have a design I'm working on that is almost complete, but I'm having trouble getting the CSS to do what I want. What I am trying to do is something like this:
However, when the page is generated, this is what the output looks like:
How can I get the third box to float up under the first and next to the second? I have tried every trick I know, but can't get it to work. I should also mention that each block is added to the page by a loop in PHP pulling from a database, so I'm kinda limited by not having static content, and have no way of knowing ahead of time how tall a particular block is going to be.
If the number of columns is variable, CSS can't really do it (if you want it to work in all common browsers), so instead use jQuery Masonry which is designed to solve exactly this problem.
Here's me saying the same thing, but with more words: CSS two columns with known children width
Per the second layout, a good option is using three primary columns. There are several grid systems available including Twitter Bootstrap and 960 Grid that will help you get the basic framework laid out quickly and sans quirks. When divs (block elements) fall within any of the three columns, they'll stack up, top-to-bottom, naturally.
Regarding the bottom of the divs lining up perfectly, you'll be able to use JavaScript to calculate the overall height of the parent of the columns (which will naturally inherit the height of the tallest column), calculate the total height of the block elements within each column, and use javascript to add the difference in height to the lowest block element for each.
Be sure to account for padding and margin in the JS height calculations.
Try putting the divs into 3 columns instead of stacking them in the order they appear.
That behaviour is because of the float rules. The top of a floating element cannot be over the top of another element that came before it in the normal flow of the page. I don't know exactly how you position your elements but you might want to look into that.
Here is the Css Specs for float: http://www.w3.org/TR/CSS2/visuren.html#float-rules (It's css2 but the rules still apply)
Look at rules 5 and 6
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.