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 [1] 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. [2]
Example
The snippet below is full blown example. <syntaxhighlight lang="css" line start="1"> <html>
<head>
<style>
p {
background: blue;
color: white;
font-size: 18px;
width: 1245px;
}
@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;
}
}
@media only screen
and (min-width: 1580px) {
div#generated {
position: fixed;
right: 10px;
top: 23px;
margin-right: 10px;
width: 280px;
}
</style>
</head>
<body>
The text on the right will never touch this text under normal circumstances when resizing this screen. The text on the right will go down and disappear.
Some text
</body>
</html></syntaxhighlight> The Cascading Style enables text in the div section to:
- Screen-width larger than 1580px: Text 'Some Text' will be displayed on the right of the screen 23px below the top.
- Screen-width larger than 1286px but smaller than 1580px: Text 'Some text' will be displayed on the right of the screen 63px below the top.
- Screen-width smaller than 1276px: No text is displayed.
To see the effect in your browser copy the code (remove the line numbers) and publish the code into a webserver, open in your browser and resize the window.
Media query template
When making Media-Queries for mobile and desktop Websites a template to hit all the available devices is needed. To start create the viewport: <syntaxhighlight lang="xml" line start="1"> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> ... </head> </html> </syntaxhighlight>
Next create the CSS-File. First start with all your generic CSS-Coding. Next make the specific CSS using the template below (the use of nesting CSS-Media is not supported by all browsers, use of combined Media-Queries is recommended): <syntaxhighlight lang="css" line start="1"> @media (max-width: 720px) {} @media (max-width: 1090px) {} @media all and (orientation: portrait) {
/**
-- Tablets normal --------------------------------------------------------------------------------------------------
*/
@media screen and (max-width: 801px), (min-width: 604px ) {}
/**
-- Tablets small ---------------------------------------------------------------------------------------------------
*/
@media screen and (max-width: 601px) and (min-width: 580px) {}
/**
-- Phablets --------------------------------------------------------------------------------------------------------
-- iPhone 6 Plus -- viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ---
*/
@media screen and (max-width: 420px) and (min-width: 380px ) {}
/**
-- Mobile Phones Portrait ---------------------------------------------------------------------------------------------
-- iPhone 5 WxH: 320 x 568
*/
@media screen and (max-device-width: 380px), (max-width: 380px ) {}
} @media all and (orientation: landscape ) {
@media screen and (max-width: 2000px) and (min-width: 2000px) {}
@media screen and (max-width: 1400px) and (min-width: 1090px) {}
@media screen and (max-width: 1090px) and (min-width: 801px) {}
@media screen and (max-width: 800px) and (min-width: 741px) {}
@media screen and (max-width: 740px) and (min-width: 569px) {}
@media screen and (max-device-width: 568px), (max-width: 568px) {}
} </syntaxhighlight>
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.
- Fluid Responsive CSS Font Size, An insight into Responsive And Fluid Typography With vh And vw Units
