Tag Archives: CSS

Responsive Web Design

I’m interested in developing responsive themes. The themes on my current sites are somewhat responsive, but they aren’t built on a responsive CSS framework. I’ve been looking at the following CSS tools to generate responsive themes:

http://getbootstrap.com/
https://developers.google.com/web/starter-kit/
http://foundation.zurb.com/
https://html5boilerplate.com/

I want to be able to build HTML5 sites like these, where pages are divided into sections. This seems to be the direction that front end design in going in – the sites I listed look modern, and they all look great on a range of devices.

Making themes adapt to different sized screens can be done with CSS media queries. The use of rows and columns is an important factor in CSS frameworks. It’s important that each row is divided into columns in such a way that each row is the same width.

Each section needs to be contained in a different div with its own CSS styling. In every CSS theme, there need to be a number of sub-themes for different sections. Writing CSS code for themes could get very complicated, so it might be worth using a CSS preprocessing tool like SASS.

I also need to give consideration to page navigation. It’s common to use a page menu at the top of pages containing links to HTML anchors so that users don’t have to scroll down long pages.

I’m working on implementing these changes in Pyplate. This is mostly a matter of redesigning themes. I am making some changes to the Python code of my CMS in order to handle page navigation widgets, and to divide pages into sections.

As soon as I get time, I need to spend some time reading this: http://learn.shayhowe.com/advanced-html-css/performance-organization/

Advertisements

CSS Media Queries

I’ve updated three of my web sites (pyplate.com, raspberrywebserver.com and banoffeepiserver.com) to make them mobile friendly. I’ve been reading about responsive web design, and it’s pretty simple.

I added media queries to my CSS code. Media queries are a way of grouping CSS rules for different screen sizes. The widths of several divs need to reduced for smaller screens. For screen widths below 800px, the sidebar needs to be displayed below the main content. This is done by making the sidebar float to the same side as the main content.

I added the following code to the end of my CSS file:

@media (max-width: 800px) 
{    
    #banner
    {
        height:150px;
        padding-left:15px;
    }

    #bannerleft
    {
         text-indent:1px;
    }
    #bannerright
    {
         padding-top:10px;
         text-align:left;
         float:left;
    }
    #post_header
    {
        height:50px;
    }
    #midpage
    {
        width:100%;
    }
    #container
    {
        width:100%;
    }
    #sidebararea
    {
        width:100%;
        float:none;
        margin-left:0px;
        margin-top:0;
    }
}
/*@media (max-width: 800px) {
    #sidebararea
    {
        width:100%;
        float:none;
        margin-left:0px;
        margin-top:0;
    }
}*/
.bannerad { width: 320px; height: 50px; }
@media (min-width:500px) {
  .bannerad { width: 500px; height: 60px; }
  .main .navbar { min-width: 100%; }
}
@media (min-width:800px) { 
  .navbar { min-width: 1100px; }
  #banner { min-width: 1100px; }
  .main .navbar { min-width: 100%; }
  .bannerad { width: 778px; height: 90px; } 
}
@media (min-width:1000px) {
  .navbar { min-width: 1100px; }
  .main .navbar { min-width: 100%; }
  #banner { min-width: 1100px; }
}

Now when I reduce the width of my browser, the layout changes to suit mobile screens. If you open raspberrywebserver.com in a browser and reduce the width of the browser window, you should see the layout change. You may need to refresh the page after you change the browser width.

I’ve published an article about CSS

I’ve just added an article about learning CSS on a Raspberry Pi. ┬áThis one gets into more detail about CSS syntax than other posts. ┬áThe next post will be about The CSS box model.