I am building a small blog based on metalsmith and the PureCSS framework, which has a simple three-row-layout like so:
<div class="pure-g">
<div class="pure-u-1"> Navbar </div>
<div class="pure-u-1"> Content </div>
<div class="pure-u-1"> Footer </div>
</div>
As I am still learning a lot new stuff about CSS and responsive design I am wondering if a navbar should be put into a grids row as well or if it should reside outside of it. The PureCSS documentation states the following:
All content which is visible to people needs to be contained inside a
grid unit. This ensures that the content will be rendered properly.
This would make it a yes, as a navigation menu is of course visible to the user. However doesn't that make handling of media queries more complicated for the navbar? So where should I put my navbar to, when using responsive grids?
No. Navbar should not necessarily be within the grid. The main purpose of using grids is to make the content look better and proper. It also aids the programmer in deciding how many blocks of the grid to allot to a certain element.
However, since a Navbar goes all the way across the page, there is no reason to assign it a grid size. It should always be 100%.
If you are building a blog app, then only your content should be within your grid system so as to properly render the elements. From what I've seen, a footer also generally stretches all the way across the window.
You can use grid. Managing and handling contents and components would be easier and rendering in different browsers would be more stable.
Related
I have been using Bootstrap for some time, and it gave me a chance to practice CSS and do some landing pages. The thing is, Bootstrap comes with a lot of classes already declared. You don't have to worry about layout and all the stuff (as you all already know that). I started practicing HTML/CSS but without Bootstrap.
In Bootstrap I always had that pattern :
<div class="container">
<div class="row">
<div class="col-12">
Content
</div>
</div>
</div>
That gave me a chance to have everything inside of a precompiled container and didn't have to worry about layout.
Now I'm having some trouble understanding how should my structure look like when I don't use Bootstrap, in a let's say landing page where every section has the same margin and everything is contained inside of bootstrap-like container with margins on left and right sides.
How should I do my CSS and containers to have a good layout for a landing page?
You can easily do CSS and containers to have a good layout for a landing page. Infact you can be good at it in max 2 days. CSS Web Layouts , It is all you need to practice and be good at it asap.
I am building a Polymer application based around the concepts of the prpl pattern espoused at Google IO this year. Specifically related to this question this means that there is an index.html file which loads the web-components polyfil and has a single element in its body <my-app>
<my-app> in turn uses the polymer elements <app-header-layout> set to provide a waterfall effect on a top toolbar, does some session management (to ensure the user logs in) and then delegates everything else to a <my-pages> element. In simplistic terms <my-app> looks like this:-
<app-header-layout>
<app-header fixed effects="waterfall">
<app-toolbar>
<h4 >Part of my toolbar</h4>
</app-toolbar>
</app-header>
<my-pages></my-pages>
</app-header-layout>
<my-pages> uses the <iron-pages> element to allow the user to select among different pages, each page of which is its own element. In simplistic form like this:-
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" >
<my-menu name="home" menu-page="{{page}}"></my-menu>
<my-list name="list" list-page="{{page}}"></my-list>
<my-long-page name="long" long-page="{{page}}"></my-long-page>
</iron-pages>
The reason my example has three pages is because there are three cases I want to cover. <my-menu> is a flexible layout consisting of lots of buttons and a number of separate <paper-card> elements used to group the menu into sections. In the normal desktop scenario this comfortably sits within the screen size, but when displayed on a smart phone will require scrolling to reach all the buttons. <my-long-page> is an example of a page with lots of content. It WILL require scrolling to reach the content at the bottom of the page.
<my-list> is the difficult one - It will consists of a header and then an <iron-list> element. An example layout looks like this:-
<div class="title">
<span>List Page</span>
<paper-button id="return" raised>Return To Menu</paper-button>
</div>
<div class="header">This is the heading for my List</div>
<iron-list items="[[data]]" as="row">
<template>
<div class="row" tabindex$="[[tabIndex]]" index="[[index]]">
<div class="field">[[row.id]]</div>
<div class="field">[[row.name]]</div>
<div class="field">[[row.outcome]]</div>
</div>
</template>
</iron-list>
Mostly, my list pages have a controlled set of columns, but there is one class of page where the server sends the columns to be displayed back in the ajax request to get the data. In that instance I have to use a <template is="dom-repeat"> element to list the fields (in both the above list header and in the lists row contents).
This app has grown organically over the last few months, and my styling is a mess. Despite my best efforts the majority of pages have a scrollbar on the right even when the content doesn't justify it and the <my-list> page is difficult to get completely right. So I am taking a step back, breaking the styling down and trying to approach it from scratch. I want to use Polymers flex-box mixins (eg #apply(--layout-vertical); etc ) in each of the custom elements styles to achieve the following:-
A toolbar that remains at the top of the page always, with a waterfall effect if content has to scroll underneath it.
A flexible layout that will work on desktop, tablets and phones
No horizontal scroll bar the majority of the time - when the pages collapse to their minimum width after flexing and they are still outside the bounds of the device they are being displayed on then a horizontal scroll bar should appear
When page content is less than the vertical space on the screen, to have no vertical scroll bar, when more than the vertical space to then have a scroll bar.
The <my-list> page should precisely fit the screen in most cases (so no scroll bar for the page in normal circumstances) with the <iron-list> element height set to fully fill the remaining vertical space on the screen below the header items. It will of course throw up its own scroll bar if the number of items in its list exceed the available space. This space for the <iron list> should have a minimum height such that when the screen height is too small, then and only then, can a second, page oriented vertical scroll bar appear.
I am struggling to achieve this - particularly the element with the <iron-list> I can easily set its height to a fixed size and it will work, but whenever I try and apply flex to it seems grow to the full size of its content and then the overall page ends up by being scrollable and I loose the list heading. The closest I've got so far is to use calc(100vh -200px) to set the height, but this requires me to guess (or know) the height of the heading above the list.
What I am looking for is guidance as to what to put inside a <style> inside the <template> each of the custom elements to achieve the aims listed above in the most elegant manner
This question is quite broad an actually more a question about CSS layout and flexbox than about Polymer itself, but I will try to answer some of the points:
Toolbar: app-layout and app-header-layout should give you a fixed toolbar on the top. Use the fullbleed attribute to make it fullsize (`')
Regarding responsive layout: The easiest in my mind is to start to design for mobile first (define your styles so that it works good for mobile view). Use ChromeDevTools to switch to a mobile view. One the mobile view works, use media queries and change some of the CSS classes. Most of the time you might for example switch from --layout-horizontal to --layout-vertical. You can also look into app-grid for content heavy or card layouts.
Horizontal scrollbar: I would try to avoid it as much as possible to have a horizontal scrollbar. Rather re-arrange the content or use different visualization paradigms. In general you should work with min-width and min-height and combine it with flex:1 settings to flexible adapt content to available space.
Vertical scrollbars are more common. Using flexbox you can make the content stretch to the entire avaialble space and combining it with min-height you can make sure that the vertical scrollbar is displayed.
The iron-list requires an explicit size for itself or the container. One way is to size it ahead of time. Alternatively you can use --layout-fit or --layout-vertical on the container and --layout-flex on the iron-list to make it take the available space.
I would recommend to read some material on flexbox. It sometimes can be tricky (see this question for example: How to make flexbox children 100% height of their parent?)
So I am working on a prosject learning twitter bootstrap but got into the problem being that the website is not actually mobile friendly and look bad on big screens.
Here is the link:
jsfiddle: http://jsfiddle.net/6LsG7/
The sticky footer also covers alot of the content.
It seems that you are not using any classes provided by bootstrap. Instead you are creating your own id's? Bootstrap has a structured framework with the use of classes such as "container", "nav", "column".
For you to obtain a responsive design you must abide by the classes pre-provided. Might I suggest you check out a WYSIWYG bootstrap layout maker such as LayoutIt.
Bootstrap comes with a grid-like architecture that will allow you to create sections in your page so that they all line up and stack appropriately. Become familiar with this first and then assign the right classes to each section. For example:
col-lg-12 is will create a section 100% wide.
col-lg-11 will create a section ~90% wide
...
col-lg-6 will create a section 50% wide
and so forth.
So to create the right placement of your divs or sections. add a row class to every section that is stackable.
If you are having two sections side-side inside this row, add a col-lg-6 to each and they will line up next to each other and on top of each on mobile.
Now, to the obvious problems that I saw right away.
Between your body tags, create a wrapper class div that will contain your page and define it's width.
Do not use so much positioning. Specially position:fixed. This is what makes things sticky and messy. You wan to make use of your margin, padding, floats, and displays properties to properly align things.
Give it a try before I hand you any code. I want to see your brain work first. Then we'll trouble shoot some more.
I built a standalone app using angular, and it was responsive (I didn't do any work, just used row-fluid, etc). However, now I'm preparing to install this standalone app into an existing site built in a different language. I bootstrapped a div with angular, and applied Twitter Bootstrap css only to that div.
Then, I used JQuery UI and some angular wrapper directives to make the div where the app lives draggable, droppable, and resizable. I ran into a problem when I started resizing the div, though. The built in responsive design responds to the size of the overall window, not the size of the div.
Sorry about the bad CSS inline styling; I'm still just hacking around to make it work. Here's my code right now -- would love it if anyone had some input.
The partials just have some forms in row-fluid tags, and some tables.
The whole point is that it's a tool that sits in the corner that is pretty small but can be expanded to show a fuller view. Everything needs to fit when it is small, though.
<div draggable droppable resizable class="bootstrapped" ng-app="myApp" id="ambatool">
<div id="handle" style="background-color: gray; height: 50px; cursor: move"></div>
<div style="padding:20px" class="container" id="maintool">
<div ng-view>
</div>
<ul class="nav nav-tabs">
<li>Detail</li>
<li>Queue</li>
</ul>
</div>
<div id="dock"></div>
What you're looking to achieve is the next step in responsive design and doesn't exist "out of the box". Rather than viewport media queries you need element media queries, where the contents of a div react to the size of it's container within the viewport, rather than the viewport itself.
The filament group has written an article about how to implement some workarounds... in the future.
Smashing Magazine recently wrote Media Queries Are Not The Answer: Element Query Polyfill which show you how you can use the Element Query polyfill to do just what you are after.
I'm new to html/html5, but not to programming, and i'm trying to code my personal website. I've read many resources and tutorials on the basics but I'm looking for some tips on how to begin achieving the layout I want.
In my layout (here) I'm looking to have the left half of my page as a fixed navigation panel with an image highlighting the current page, then with each option the right side refreshes to a new independently scrolling page and the highlight image animates in the nav panel to the new option.
How should I begin to achieve something like this? I just need a push in the right direction to the type of elements/scripts/whatever I will need to implement.
Thank you!
Here is a simple example to help you start out:
jsFiddle
You'll notice the text on the right slides out of the screen when you scroll but the green box stays in the same position. This is done with a slight bit of CSS.
The navigation div on the left is styled with position: fixed;. This keeps the navigation div in one place at all times.
In contrast, the content div on the right is styled with position: absolute; with a left: 25% set. The widths of the navigation div and content div are set in percentages. This allows the content to take up the same relative screen space whether the window is larger or smaller. Your content will adapt to your viewers resolution.
Using an <iframe> will is one possible solution to altering the content in the right hand content div. Another would be to use ajax but that is getting a little more advanced as you now must understand client and server scripting in order to receive the full benefits from it.
iFrame
Ajax
If you're information is static and will not change often, you could considering making a single page web app with multiple templates that are appended to the content div.
jQuery
jQuery Templates Plugin
jQuery is really good as well for learning JavaScript and makes building dynamic client side applications a breeze.
They also have ajax support as well:
jQuery Ajax
Hope this helps.
Good luck and Happy Coding!
You have the menu housed within an element that is set to position: fixed;
Position fixed will make sure the menu doesn't move around on the page regardless of scrolling the rest.
Then with javascript you can add an event listener for "scroll" on the window (or just the div you want to watch for scrolling). When this fires, check the scrollY property to see what range it is in and maybe highlight certain items in your menu.
Hopefully this leads you down the right path. It's a broad question, so here's a broad answer!
I second the suggestion from #Jeromy French -- I think Bootstrap , Foundation and other responsive frameworks have a lot going for them.
Here's an example using Bootstrap: http://jsfiddle.net/panchroma/2dF6s/
In addition to being HTML5, you can get a layout which works on everything from smartphones to wide desktops. It's not the only way to get a mobile friendly website, but it's one of several good options.
I think that with so much moving towards smartphones and tablets now, the more you can learn about responsive and mobile websites, the better off you will be in the future.
I think all the responsive frameworks use a grid based system, here's what the HTML looks like with Bootstrap:
<div class="container">
<div class="row-fluid" align="center">
<div class="span12">
<h1>Header</h1>
</div><!-- close span12 -->
</div> <!-- close row -->
<div class="row">
<div class="span3" id="side-nav" data-spy="affix" data-offset-top="200">
<h5>Option 1</h5>
<h5>Option 2</h5>
<h5>Option 3</h5>
<h5>Option 4</h5>
</div> <!-- end span3 -->
<div class="span9">
<p>Main Content Here </p>
</div> <!-- end span9 -->
</div><!-- end row -->
</div><!-- end containter -->
Good luck!