Hi I'm a beginner trying to create my own web layouts in Photoshop that are based on the Bootstrap 3 grid.
I've downloaded a few .psd files that mimic the Bootstrap 3 grid so you can based your designs around them.
I've also created an html grid using Bootstrap that you can see here http://juanchandler.com/grid-test.html view source to see the code.
My question is why the columns aren't 70 pixels wide and a gutter width of 30 pixels as is the case with the .psd grids...I've taken a screenshot of the .psd grid with my html over the top so you can see how the columns don't line up. http://juanchandler.com/screenshot3.jpg ie. the red / salmon columns are supposed the gutters but my html columns fall over them.
Hope someone can help.
Bootstrap's grid is based on percentages, so each column will be a percentage and not a precise pixel width. The only time it's 70px on a single col-*-1 column is when the screen size is equal to or greater than 1170px IF you are using a .container (and not the .container-fluid). The gutter is the padding inside the columns, so you don't see that because there's no inner div wrapping the content, in order to see the gutters, you have to have div or some kind of container inside the column:
<div class="col-sm-1 cell4"><div class="inner"> </div></div>
And color that inside div, not the col--
See example: http://jsbin.com/qotos/1/edit
As far as using Photoshop, since 2011 I've been doing responsive design and haven't used it. What I do is design in CSS and take a screen shot. Learn to use LESS or SCSS. Learn CSS first though.
Related
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.
Content displayed in divs that are set to col-md-* display stacked and 100% width when printed. My current fix is to change the divs to col-xs-* and hope no one tries to view the page on a small device.
I need a bit of guidance on what I could add to the #print directive in print.less to make the print layout of col-sm-* to remain horizontal . I understand that the pixel width of a printed page at 72dpi is in the 540px range, so this is why the page is wrapping on col-sm-*. currently in my print css I have:
[class*="col-sm-"]{ float: left; }
Which works, but in possibly only a few cases, which meets my immediate need, but probably has unknown side effects. I already scale the font in my print css down to 96%, because it prints way too large by default vs. on screen. This means layouts that wrap on the screen would look fine when printed horizontally in the col-sm-* class, all the up to probably 11 columns side by side, accounting for page margin and grid padding for readability.
Edit: Here is a jsFiddle, but the behavior can't be replicated on there because of the way they render the html >> JS Fiddle
I have been mulling over this SO post regarding how to implement scaling divs (for iPad viewers, etc)--see the fork with 12 votes:
Proportionally scale a div with CSS based on max-width (similar to img scaling)
The issue is that my current layout is using two float:left div IDs to make a row-like config for my divs. See here:
https://dl.dropboxusercontent.com/u/33061840/site/Pokesite.html
& my code:
http://pastebin.com/fspfRUD2
My question is, do I need to redo my divs so that they're positioned as Spader Shut's fork is? Or can I keep my current layout and still have my divs proportionally scale to window size?
What I ultimately want to achieve is for all my content to scale to window height, proportionally: so that iPad viewers, etc are still able to view the website.
Ended up using responsive tables: http://www.responsivegridsystem.com/
I have a 960gs layout but I don't know which is the best approach to center the content of this page (http://andreapuiatti.de/screenshots/question.png) using the 960grid system.
The designer assures that this design is based on 960gs but hell... is everything out of the columns!
The only solution I come up with is that of using a grid_12 and then add custom elements which I will size myself but then why using a grid system?
Decide how many columns the image and text will span, say 12 and create your 12 column row as the parent container (all within the 960 grid framework).
Within that row, I would create a wrapper class (give it a class) and then for the image (or its container) apply a standard CSS rule like margin: 0 auto;. Apply display: block to the image if it is not wrapped in a block level element.
As for the text, the p elements will fill the wrapper element and you can adjust margins as needed.
In general, these CSS grid framework create block level boxes that contain your content, text and images and so on. It is up to the designer to decide how to lay out the elements within each block. 960.gs and similar CSS frameworks define your layout only, not the details of styling the content within each box/block/panel within the grid layout.
About the Screenshot and Designer
Your designer may not understand how grids work and you need to have a discussion with him/her to specify where the edges of the image should be. The problem is not with the CSS framework, but the design specifications need to be more precise. Nothing wrong with that!
I've built a dynamically sized grid layout that can adapt to reasonably in any sized resolution (phone, tablet, desktop) and handle resizing, all while being near pixel-perfect (sorry, I'm OCD -- and I say "near" because my math is broken right now and you can't fit two evenly sized elements inside of an odd sized container without padding being 1px off on one side).
Anyway, below is a link to what I've hacked together with JavaScript. It's an example of what I'm trying to pull off. Resize the width of the bottom pane a bit to see what I'm going for.
http://jsfiddle.net/langdonx/uFW2C/2/
It has some ugly manual JavaScript that's since been ported to Angular, but still the ugly JavaScript that calculates all the styles remains.
So my question... can I pull this off with strictly CSS? Or a lot more CSS and a lot less JavaScript? And by this I mean dynamically sized cells based on the width of the screen?
Here are the business rules:
Max cell width: 320px
Minimum # cells per row: 2
this might be impossible with CSS, so I'd be fine with settling on Min Cell Width: 178 for Chrome on my Galaxy Nexus(whose portait mode is 360px wide)
Cell border: 5px with a 2px outline
Visible margin between cells: 3px (margin is actually 5px, but outline bleeds out)
In this example, I'm redrawing the cells on resize every time, but in my Angular version, I believe that just the styles get updated. That said, I could probably get away with redrawing a table on resize, but I'd only have to calculate the cell width based on the document width, and well... I wouldn't be thrilled to use a table. =[
-end mad rant
Media queries
CSS media queries might get you pretty close to a CSS-only solution.
The key concept here is using different layout grids based on the width of the browser, to vary the number of columns.
Media queries are the natural CSS way to change the layout based on the browser width. And they require no JavaScript. If you use a set of media queries -- each one targetting a different range of browser widths -- to control which layout grid is used, then all each grid has to do is be responsive -- percentage widths for each column, and let the content stretch to fill the column width.
Responsive Design
The question then becomes: Is it possible to automatically stretch each piece of content to fill the column using CSS alone? That depends on the type of content, how it's expected to behave when it stretches, and if there's any room for compromise with the graphic design.
Typically, the graphic design for a responsive website has to be tailored to suit the limitations of Responsive Design (with the graphic designers having a rough idea of what's feasible and what isn't). But... whatever can't be done automatically, can be done using JavaScript.
Relevant search terms for attempting to stretch the content: Responsive Design, Adaptive Content, Fluid Grid
Note: "Columns" in this case may simply mean the percentage width used for the floated containers for each piece of content. It doesn't have to mean "physical" columns, in the traditional sense.