Archive for the ‘CSS’ Category

Electron ReactJS PHP Oracle Service Cloud Multiple Interfaces Quick Deploy via Curl

Friday, December 1st, 2017


Electron application boilerplate based on ReactReduxReact RouterWebpackReact Transform HMR for rapid application development


  • Note: requires a node version >= 6 and an npm version >= 3.

First, clone the repo via git

Install dependencies with yarn

yarn install

:bulb: In order to remove boilerplate sample code, simply run yarn run cleanup. After this is run, the initial sample boilerplate code will be removed in order for a clean project for starting custom dev

$ yarn run dev

CSS Modules

This boilerplate out of the box is configured to use css-modules.

All .css file extensions will use css-modules unless it has .global.css.

If you need global styles, stylesheets with .global.css will not go through the css-modules loader. e.g.

If you want to import global css libraries (like bootstrap), you can just write the following code in .global.css:

@import "~bootstrap/dist/css/bootstrap.css";


To package apps for the local platform:

$ yarn run package

To package apps for all platforms:


$ yarn run package-all

To package apps with options:

$ yarn run package -- --[option]

Further commands

To run the application without packaging run

$ yarn run build
$ yarn start

To run End-to-End Test

$ yarn run build
$ yarn run test-e2e


See electron-builder CLI Usage

Module Structure

This boilerplate uses a two package.json structure.

  1. If the module is native to a platform or otherwise should be included with the published package (i.e. bcrypt, openbci), it should be listed under dependencies in ./app/package.json.
  2. If a module is imported by another module, include it in dependencies in ./package.json. See this ESLint rule.
  3. Otherwise, modules used for building, testing and debugging should be included in devDependencies in ./package.json.


Styling radio buttons

Monday, December 21st, 2015

Hide/replace radio buttons


[type="radio"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;

[type="radio"] + span {
  display: block;

/* the basic, unchecked style */
[type="radio"] + span:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.25em;
  border-radius: .5em;
  border: 0.15em solid @base-gray-medium;
  box-shadow: 0 0 0 0.1em @base-gray-medium;
  margin-right: 0.75em;
  transition: 0.5s ease all;

/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before {
  background: red;
  box-shadow: 0 0 0 0.1em @base-gray-medium;

/* never forget focus styling */
[type="radio"]:focus + span:after {
  content: '\0020\2190';
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.125em;

Handlebars template markup:

<script id="dealer-list-template" type="text/x-handlebars-template">
	<label for="dealer{{id}}" class="col-xs-10 dealerItem">
		<input type="radio" value="{{title}}" name="dealers" id="dealer{{id}}">
			<span class="dealerTitle">{{title}}</span>
			<span class="dealerAddress">{{address}}</span>
	<div class="col-xs-2 distance">{{distance}}</div>

Foundation 5 Framework Animate Accordion (multiple, with dynamic AJAX content using reflow, and also nested)

Monday, January 27th, 2014

Out of the box there is no animation on these.  I tried for a CSS3 transition but couldn’t get one. If anyone finds one do tell. Anyhow, my current project has 3 accordion levels, the main off-canvas accordion, a second one loaded dynamically via AJAX into the main content area, and third level of accordions nested in each of the 2nd level accordions.

First, I gave them each an id, so that I could address them easily and individually:

<dl class=”accordion firstLevelAccordions” data-accordion> (in the ‘off-canvas’ left)

<dl class=’accordion secondLevelAccordions’ data-accordion> (in the main content right section, content thereof loaded dynamically via AJAX)

<dl class=’accordion thirdLevelAccordions’ data-accordion> (this one nested inside the secondLevelAccordions)

After the dynamic content load, Foundation makes you reflow to find/activate the new content:


The initialization of each accordion (you could merge these into one function, or parameter-ize the class piece, but for simplicity’s sake, this works just fine):

$(function(){ // onready

// first level off-canvas menu accordions
$(document).on(“click”, “.firstLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.firstLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.firstLevelAccordions > > a”, function (event) {
$(“.firstLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

// second level article list/detail accordions
$(document).on(“click”, “.secondLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.secondLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.secondLevelAccordions > > a”, function (event) {
$(“.secondLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

// third level nested accordions
$(document).on(“click”, “.thirdLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.thirdLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.thirdLevelAccordions > > a”, function (event) {
$(“.thirdLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);


jQuery .hover change div background-position example

Wednesday, November 16th, 2011

example for reference:

backgroundPosition: ‘0px 0px’
}, function(){
backgroundPosition: ‘0px 30px’

CSS !important override

Tuesday, February 1st, 2011

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.


p { color: #ff0000 !important; }

CSS text-transform

Tuesday, February 1st, 2011


also consider:

CSS pseudo elements & pseudo classes

Tuesday, February 1st, 2011

CSS Pseudo Elements

Adds content after an element

Adds content before an element

Adds a style to the first character of a text

Adds a style to the first line of a text


Posted on 5 Oct 2009, 17:00 – Category: CSS

Pseudo Classes

Adds a style to an element that is activated

Adds a style to an element that is the first child of another element

Adds a style to an element that has keyboard input focus

Adds a style to an element when you mouse over it

Adds a style to an element with a specific lang attribute

Adds a style to an unvisited link

Adds a style to a visited link

CSS em

Tuesday, February 1st, 2011

h1 {font-size:2.5em} /* 40px/16=2.5em */
h2 {font-size:1.875em} /* 30px/16=1.875em */
p {font-size:0.875em} /* 14px/16=0.875em */

I always like to have a nice simple AJAX example on hand, you never know…

Tuesday, July 27th, 2010



<script type=”text/javascript”>
function showHint(str)
if (str.length==0)
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
if (xmlhttp.readyState==4 && xmlhttp.status==200)

<p><b>Start typing a name in the input field below:</b></p>
First name: <input type=”text” onkeyup=”showHint(this.value)” size=”20″ />
<p>Suggestions: <span id=”txtHint”></span></p>



// Fill up array with names

//get the q parameter from URL

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
for($i=0; $i<count($a); $i++)
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
if ($hint==””)
$hint=$hint.” , “.$a[$i];

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
$response=”no suggestion”;

//output the response
echo $response;

CSS link rollover class change

Monday, March 8th, 2010

<a onMouseOver=”this.className=’on'” onMouseOut=”this.className=’off'” href=”10_9_08 MEETING.mp3″>October 9, 2008</a>

Inline Javascript CSS properties

Monday, March 1st, 2010

Inline Javascript CSS properties

dash replaced by capital


style=”color:#FFFFFF text-decoration:underline;”