- use Bootstrap
- get someone with experience to do the graphical design, then implement it using CSS
- turn a list into a grid of links with JQuery
- Or something more low-tech
- If you want to build something from scratch, the basic principles as I have come to understand them are:
- (1) decide on an element type, e.g.
- <span> for in-line elements (in a horizontal line),
- <div> for a vertical line of elements,
- <ul> for a list, etc.
- (2) fiddle with the CSS attributes like: float, clear, overflow, border, padding to make it look like you want.
- How to use "float"
- (3) use javascript if anything needs to appear/disappear based on user interaction.
- But I usually start with a framework layout like Bootstrap, add pre-made Javascript libraries for widgets and only do the above steps for any little tweaks needed.
- The current state of the art is the "CSS Grid" layout (for 2D grids).
- One opinion is that CSS Grid beats Bootstrap for layout
- Flexbox is the more established and better supported method of layout (for 1D lists)
- Enlightenment and inspiration: CSS Zen Garden
- examples of the same content transformed with CSS to appear totally different
- Mozilla Developer Network (MDN) has a good CSS reference
- CSS tricks has useful guides
- Quirks Mode tells you which browsers support which features.
A piggy bank of commands, fixes, succinct reviews, some mini articles and technical opinions from a (mostly) Perl developer.
Jump to
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
CSS/Layout basics
CSS/styling ideas for developers with little front-end design experience:
Debugging websites
CSS:
element {
outline: red solid thick;
background: green;
};
PHP:
<?php $debug = $_GET['debug'] ?>
element {
outline: red solid thick;
background: green;
};
PHP:
<?php $debug = $_GET['debug'] ?>
Basic CSS
* basics
#id = ID (mnemonic: I'd like some *hash*)
.class = class (mnemonic: polka *dots* are classic and classy)
* margin direction:
top right bottom left
(clockwise, starting from top)
* comments
/* this is a comment */
// this is not a comment!
* debugging
border: 2px solid red !important
or
display: none !important
* specifying elements:
html:
<ul id="list">
<li>
<div class="d1">one</div>
<div class="d2">two</div>
<div class="d3">three</div>
</li>
</ul>
css:
#list li div.d1 { //css }
--------------------------
http://robertnyman.com/2007/10/18/dont-over-specify-your-css-code/
/* Instead of this: */
div#container p.pre-amble{
margin-top: 1em;
}
/* Write it like this: */
.pre-amble{
margin-top: 1em;
}
/* Or like this: */
#container .pre-amble{
margin-top: 1em;
}
/* Instead of this: */
div#container div#header ul#navigation li{
float: left;
}
/* Write it like this: */
#navigation li{
float: left;
}
/* Or like this: */
#header #navigation li{
float: left;
}
#id = ID (mnemonic: I'd like some *hash*)
.class = class (mnemonic: polka *dots* are classic and classy)
* margin direction:
top right bottom left
(clockwise, starting from top)
* comments
/* this is a comment */
// this is not a comment!
* debugging
border: 2px solid red !important
or
display: none !important
* specifying elements:
html:
<ul id="list">
<li>
<div class="d1">one</div>
<div class="d2">two</div>
<div class="d3">three</div>
</li>
</ul>
css:
#list li div.d1 { //css }
--------------------------
http://robertnyman.com/2007/10/18/dont-over-specify-your-css-code/
/* Instead of this: */
div#container p.pre-amble{
margin-top: 1em;
}
/* Write it like this: */
.pre-amble{
margin-top: 1em;
}
/* Or like this: */
#container .pre-amble{
margin-top: 1em;
}
/* Instead of this: */
div#container div#header ul#navigation li{
float: left;
}
/* Write it like this: */
#navigation li{
float: left;
}
/* Or like this: */
#header #navigation li{
float: left;
}
Don't display dynamic elements until page has loaded
<head>
<script type="text/javascript">
function getRefToDiv(divID,oDoc) {
if( document.getElementById ) {
return document.getElementById(divID); }
if( document.all ) {
return document.all[divID]; }
if( !oDoc ) { oDoc = document; }
if( document.layers ) {
if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
//repeatedly run through all child layers
for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
//on success, return that layer, else return nothing
y = getRefToDiv(divID,oDoc.layers[x].document); }
return y; } }
return false;
}
function toggleDiv(divID_as_a_string,action) {
//get a reference as above ...
myReference = getRefToDiv(divID_as_a_string);
if( !myReference ) {
//window.alert('Nothing works in this browser');
return; //don't go any further
}
//now we have a reference to it
if( myReference.style ) {
//DOM & proprietary DOM
if (action == 'on') {
myReference.style.visibility = 'visible';
} else {
myReference.style.visibility = 'hidden';
}
} else {
//layers syntax
if (action == 'on') {
myReference.visibility = 'show';
} else {
myReference.visibility = 'hide';
}
}
}
function start() {
toggleDiv('slider','on');
}
window.onload = start;
</script>
</head>
<body>
<div id="slider" style="visibility: hidden">
</body>
<script type="text/javascript">
function getRefToDiv(divID,oDoc) {
if( document.getElementById ) {
return document.getElementById(divID); }
if( document.all ) {
return document.all[divID]; }
if( !oDoc ) { oDoc = document; }
if( document.layers ) {
if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
//repeatedly run through all child layers
for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
//on success, return that layer, else return nothing
y = getRefToDiv(divID,oDoc.layers[x].document); }
return y; } }
return false;
}
function toggleDiv(divID_as_a_string,action) {
//get a reference as above ...
myReference = getRefToDiv(divID_as_a_string);
if( !myReference ) {
//window.alert('Nothing works in this browser');
return; //don't go any further
}
//now we have a reference to it
if( myReference.style ) {
//DOM & proprietary DOM
if (action == 'on') {
myReference.style.visibility = 'visible';
} else {
myReference.style.visibility = 'hidden';
}
} else {
//layers syntax
if (action == 'on') {
myReference.visibility = 'show';
} else {
myReference.visibility = 'hide';
}
}
}
function start() {
toggleDiv('slider','on');
}
window.onload = start;
</script>
</head>
<body>
<div id="slider" style="visibility: hidden">
</body>
Labels:
css,
html,
javascript
Subscribe to:
Posts (Atom)
Posts
