Cascading Style Sheets

Cascading Style Sheets are a must for every Webdesigner/Webdeveloper. This page is a random collection of links and information based on books and internet webpages.

Media Queries

Back when the World Wide Web was something you only accessed via a browser on your desktop or laptop, writing CSS was fairly straightforward. Although you had to consider cross-browser and cross-platform issues, at least you knew with reasonable certainty that everyone was using fundamentally similar devices to view your website. Over the last few years, however, we’ve seen an explosion of new devices for accessing the Web— from game consoles to mobile devices such as smartphones and tablets. Presenting your content to everybody in the same way no longer makes sense when they could be viewing your website on a widescreen desktop monitor or a narrow handheld screen.

Example

<syntaxhighlight lang="css" line start="1">

     @media only screen
      and (min-width: 599px)
      and (max-width: 1275px) {
        div#generated {
           display: none;
        }
     }

     @media only screen
      and (min-width: 1276px) {
        div#generated {
           position: fixed;
           right: 10px;
           top: 63px;
           margin-right: 10px;
           width: 280px;
        }
     }

</syntaxhighlight> CSS-Style code.

<syntaxhighlight lang="html" line start="1">

      Some text

</syntaxhighlight> If the screen is larger than 1276px the text between the generated will be shown.

Grids

Grids are a fundamental design technique. Simple grids have been used by calligraphers since medieval times, and the modern typographic grid has been in use since the second half of the 20th century. For a few years now, efforts have been made to bring grid-based design to the Web, with a number of frameworks using floats, padding, and margins to emulate the possibilities of print, although these efforts have always felt like somewhat of a fragile hack.

Recently, however, browsers have begun to implement a native CSS grid layout system, as detailed in the Grid Layout Module. There are several implementation including Javascript. Bootstrap (twitter) is one of the most popular versions.

• W3.org
  • W3.org, W3 Consortium, CSS-Grid-1.
• Bootstrap
  • Bootstrap, Harm Wiki Bootstrap page including Laravel usage.
  • Get Bootstrap, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • W3Schools, Bootstrap Grid Systems

See also

• Bootstrap, Bootstrap and Laravel.