What You'll Be CreatingAtom, the new code editor released by GitHub, is one of an emerging flavor of apps that allow web technologies such as LESS, JavaScript and HTML to run natively in a desktop environment. Atom installs and runs like a "regular" desktop app, but once it opens up it behaves in a way that any web developer will find familiar.
Atom is a "specialized variant of Chromium" and when run in developer mode gives access to the same "Developer Tools" you might be used to from Chrome. So, just as you could with any online web application, you're able to inspect the code behind any element of the app's interface and see what makes it tick:
What this means in practical terms is that anyone experienced with web design and development will immediately find familiarity with the way Atom works, and will likely be far more comfortable creating modifications and tweaks than with comparable programs. Atom's visual styling is driven by CSS, generated from LESS, so you can modify its appearance in the same way you would any LESS powered website.
Atom has two types of "themes" responsible for its presentation style:
Syntax themes control everything in the editor's inner space, i.e. the gutter, line numbers and code area.
UI themes control everything else, i.e. tabs, sidebar, buttons, overlays, messages etc.
In this tutorial you'll learn how to create both of these types of themes, producing them in tandem so the entire interface is uniformly restyled. Let's begin!
At the moment Atom is Mac only, and during its beta phase access is via invitation. If you don't yet have an invitation my suggestion is to put a request out on Twitter or at the Atom forum and someone is bound to send one your way. Download and install it as you would any other app.
Developing themes will involve some Atom-specific command line usage, so the first thing you'll need to do is install the packages which enable these commands. After running Atom for the first time go to and select Atom > Install Shell Commands, which installs the atom and apm (atom package manager) commands.
I also suggest using an app that will allow you to open a terminal from any folder you're viewing in Finder, as it will make it easier to run commands in the right location. I personally use the free XtraFinder to add a "New Terminal Here" option to my Finder context menu.
The basic process for creating a new Atom UI theme is to fork one of the two available default themes from GitHub, give it your own name, and edit the included files.
To do this, start by making sure you have both an account at GitHub, and GitHub for Mac (unless you prefer to use the command line) installed. Then head to the repository for either Atom Dark UI theme or Atom Light UI theme. In this tutorial we'll be using a dark color palette, so we'll fork the dark default theme.
At the top right corner of the original UI repository click the "Fork" button:
This will create a duplicate of the repo under your own account, i.e. youraccount / atom-dark-ui. The next thing you'll need to do is give the repository your own name. In the right sidebar of your forked repository click the "Settings" menu item.
At the top of the "Settings" page you will see a field for the repository name. Type a new name of your choice, (in my case "nuance-dark-ui), into this field being sure to retain the "-ui" at the end, then click "Rename":
You're now ready to download your theme into your offline environment so you can start editing it. To do this, go back to your repository's main page then locate and click the "Clone in Desktop" button in the sidebar:
"GitHub for Mac"will then download the repository for you, into your default GitHub location. From your list of repositories in "GitHub for Mac", right click your newly cloned UI theme and select "Show in Finder":
A Finder window will open showing your UI theme folder inside your GitHub folder. Double click it to go into the actual folder and view the contents within.
Open a new terminal in this location then run the command atom --dev
This command will open Atom in developer mode, showing your theme's file and folder structure in the sidebar. In this sidebar, click the "package.json" file to open it for editing, then change the name, version number and description. Again, make sure you preserve the "-ui" at the end of the theme name, then save:
Finally, you need to let Atom know how to access your theme folder from its local GitHub folder. Go back to your terminal, which should still be in the folder of your theme, and run the command apm link
Now head back to Atom and press cmd-alt-ctrl-L or select View > Reload from the top menu to reload the interface, which will refresh the list of available UI themes, allowing yours to be selected.
From the top menu, select Atom > Settings to open the settings page and click "Themes" in the panel's left sidebar. You should see your theme in the list labelled "UI Themes" so go ahead and select it:
Your new UI theme is now active and ready for editing, however before we proceed we're going to generate a syntax theme too so you can edit both at the same time, keeping an eye on how they work in together.
Creating a new syntax theme is an easier process than for a UI theme.
In Atom, press cmd-shift-P to bring up the command palette, then start typing "Generate Syntax Theme". When you see Package Generator: Generate Syntax Theme appear click it to execute the command:
A window will appear in which you can enter the path and name for your syntax theme. Whatever you decide to name your theme it should end in "-syntax". Given my UI theme was named "nuance-dark-ui" I named my syntax theme "nuance-dark-syntax".
After entering your path and theme name press Enter to proceed.
Atom will generate a new syntax theme for you and open it up in the sidebar. You should now be able to go to Atom > Settings again and choose your new syntax theme next to the Syntax Theme label:
As we'll be working on both the UI and syntax themes together, we want to be able to access both of their files from the sidebar. We also want to be in "Dev Mode" while we're editing these files as this will mean Atom will automatically refresh its appearance whenever we save our changes.
Follow these steps to open both themes in dev mode, and use this same process any time in the future you need to come back and edit your themes.
Go to Atom > Preferences to open the settings page.
Click Open ˜/.atom at the bottom of the settings left sidebar to open your local Atom folder in in the Atom sidebar:
In the Atom sidebar, right-click either your syntax theme or UI theme folder and choose Show in Finder:
Quit Atom to close the existing instance (it's not in dev mode so we don't need it), then in the Finder window showing your theme folders open a new terminal:
Run the command atom --dev to open the folder in Atom in dev mode. You should now see both theme folders in the sidebar:
As we are in dev mode, we can now open any theme file from the sidebar and changes will automatically become visible in the Atom interface.
Now we're ready to start the design process!
You might find it takes a little tweaking to get the colors of your theme just how you want them, so designing directly in code is probably not the most efficient approach.
In the source files attached to this tutorial you'll find a PSD named "colormockup.psd", which contains enough interface elements and code simulations to facilitate your color palette selection. Use this PSD to visualize the colors you'd like to use in your UI and syntax themes.
I personally like earthy colors, low light and low contrast that doesn't burn out my eyes, so I ended up with this:
This is my personal preference, but you can of course go with any style that works for you.
When your mockup is done you're ready to start transferring your color values into your themes' LESS code. We'll start with the syntax theme due to it being simpler, using fewer variables than the UI theme.
In your Atom sidebar, expand your syntax theme's folder and open up stylesheets > colors.less. You should see this:
If you change the value of any of these variables, then save the file, you should instantly see the syntax area update. For example, if you change the value of @dark-gray to #F00 you should see the gutter background change color:
Mmm, niceThe colors listed in this file are in turn mapped to various aspects of the syntax via the "syntax-variables.less" and "base.less" files. Open these files up and take a moment to have a quick glance through them. In the "syntax-variables.less" file you'll see variables taken from the "colors.less" file. However in the "base.less" file you'll see variables from both the "colors.less" and "syntax-variables.less" file.
As we add our new color scheme into this theme we'll be changing the value of variables in "colors.less" in a way that means their names may no longer reflect the color they contain. For example, where the variable @purple was used, we'll instead be using a shade of green.
To be thorough, you would ideally create new variable names that do reflect the new color scheme, however for the purposes of this tutorial I don't want to put you through having to replace every instance of the old variable names in the "syntax-variables.less" and "base.less" file.
So even though it might seem a little odd, we'll just allocate the colors of our new scheme directly against the existing variable names in "colors.less". This way you only have to edit a single file to create your syntax theme.
To help you understand which variables influence which aspects of the color scheme, replace the full code of the "colors.less" file with this:
// These colors are specific to the theme. Do not use in a package!
// Plain text and line numbers
@very-light-gray: #c5c8c6;
// Comments
@light-gray: #969896;
// Current line highlight
@gray: #373b41;
// Gutter background
@dark-gray: #282a2e;
// Code area background
@very-dark-gray: #1d1f21;
@cyan: #8abeb7;
@blue: #81a2be;
@purple: #b294bb;
@green: #b5bd68;
@red: #cc6666;
@orange: #de935f;
@light-orange: #f0c674;
The comments added to the first section tell you where each of the "gray" color variables are used in the syntax area.
The second section with the seven color variables is a little more complicated as each one effects a different type of code. To get a rough idea of how these variables will appear create a new PHP file and paste in this:
<?php
// <?php = .punctuation.section.embedded > darken(@red, 10%)
/* Comments > @light-gray */
// function = .storage > @purple
// function_name = .entity.name.function > @blue
function function_name(){
// return = .keyword.control > @purple
// array = .support.function > @cyan
// string = .string > @green
return array('string' => 'string');
}
// $ = .punctuation.definition.variable > @very-light-gray
// var_name = .variable > @red
// new = .keyword > @purple
// SUPPORT_CLASS = .support.class > @light-orange
// true = .constant > @orange
$var_name = new SUPPORT_CLASS( true );
?>
Note: this file is also included in the source files.
When you view the above code in Atom you will see examples of how each of the seven color variables look when applied to syntax. The same code is used in the provided "colormockup.psd" so you can see how the colors correlate.
Check out the included comments for a description of which color variables are associated with each element of the code. You can use this code along with the PSD to help you figure out which variables the colors you chose should be mapped to in your "colors.less" file.
We'll begin by carrying the "gray" colors over from your PSD mockup.
The first variable listed in "colors.less" is @very-light-gray which we know, (from the comments you just added), is used on "Plain text and line numbers". Go to your PSD and copy the hexcode of the color you chose for your line numbers. Paste that value, which in this case is #9b836a, into "colors.less" to replace the default for @very-light-gray.
Next, get the color hexcode you chose for comment text and add it against the variable @light-gray. Continue on in this fashion until all five "gray" variables are updated. For the "nuance-dark-syntax" theme I used:
// Plain text and line numbers
@very-light-gray: #9b836a;
// Comments
@light-gray: #624e3b;
// Current line highlight
@gray: #352b22;
// Gutter background
@dark-gray: #28211a;
// Code area background
@very-dark-gray: #1f1913;
Save the "colors.less" file and you should immediately see your syntax area looking quite different:
Now to carry over the seven color variables in the second section.
The first of these variables is @cyan, and the content of the PHP file we created earlier contains the comment array = .support.function > @cyan, telling us this color is used on the word "array". Go to your PSD and copy the hexcode you applied to the word "array" there. In the "nuance" theme this was #446675.
Repeat the same process of finding each variable name in the comments of your PHP file to see which type of code it applies to, then copy over the color you chose from your PSD.
For the "nuance" theme I used:
@cyan: #446675;
@blue: #40796b;
@purple: #6a7c02;
@green: #93a14a;
@red: #a55027;
@orange: #a56b32;
@light-orange: #b5a163;
After saving, take another look at your PHP file and you should see all your new colors reflected in it, matching your PSD:
Your syntax theme is now complete! Now it's time to move on to the UI theme.
Adding your color scheme into the UI theme is a little trickier than the syntax theme as it uses quite a lot more variables. Additionally, not all colors in the default theme are defined as variables so in some case you'll need to edit the actual styles.
Most of the colors used in the UI theme are defined in the "ui-variables.less" file. Go ahead and expand your syntax themes folder and open the file up for editing from the "stylesheets" folder.
Atom ships with a very useful "Styleguide" that gives you a preview of all the UI elements influenced by your theme. Open it up by going to Packages > Styleguide > Show.
For the most part you'll find the variable names in the "ui-variables.less" file to be descriptive and to correlate, in order, with the UI elements listed in the Styleguide. For example the first several variables are prefixed @text-color and correlate with the first section of the Styleguide, labelled "Text classes".
If you're not sure which variable will affect what, don't be afraid to change variables randomly to see which aspects of the Styleguide are altered.
Not all colors in the default UI theme have associated LESS variables in the "ui-variables.less" file. Some colors are coded directly into other LESS files in the theme.
If you're not sure where a UI color is coming from and it doesn't seem to have an associated variable, use the element inspector on the area in question to find the class name responsible for the color. Then run a search in Finder for that class name to try and determine which of the theme's LESS files contains the class.
For example, the sidebar has a color hexcode of #303030 in the default theme which is not defined anywhere in "ui-variables.less". Inspecting the element shows the hexcode is coming from the class .focusable-panel.
Running a Finder search within the UI's folder for "focusable-panel" reveals that this class is contained in the "tree-view.less" file.
The file can then be edited, placing a variable from the "ui-variables.less" file instead of a hardcoded hex value.
Sometimes your search won't yield any results, for whatever reason, and you might have to do things the hard way and manually go through each UI theme file until you find the class you want to change.
The UI theme cannot access the color variables defined by the syntax theme, however we want to use the same colors across both themes so they match. As such, we will need to duplicate the color variables from our syntax theme into our UI theme.
At the top of the "ui-variables.less" theme paste in all the variables from your syntax theme:
@very-light-gray: #9b836a;
@light-gray: #624e3b;
@gray: #352b22;
@dark-gray: #28211a;
@very-dark-gray: #1f1913;
@cyan: #446675;
@blue: #40796b;
@purple: #6a7c02;
@green: #93a14a;
@red: #a55027;
@orange: #a56b32;
@light-orange: #b5a163;
As well as these variables, there are an additional five custom variables I defined in order to carry over all the colors from my mockup, also pasted at the top of the "ui-variables.less" file:
// BG of selected file in sidebar
@n_selected: #2b231b;
// BG of sidebar
@n_defaultbg: #241d17;
// BG of bottom toolbar and "find" panel
@n_darkerbg: #191613;
// Color of selected text in sidebar
@n_highlight: #a37748;
// Border color of tabs
@n_tabborder: #372d26;
These variables will be used in multiple locations, but the comments included give you an example of the usage of each, which will help you determine which color codes you should copy from your PSD. Also, wherever possible, the layers in the PSD have been named with reference to the variable they effect.
As I mentioned above, some of the default theme's color values are hard coded rather than being accessible as variables. In some cases variables are defined, but in files other than the main "ui-variables.less" file. To make it easier to apply our color scheme centrally via the "ui-variables.less" file we're going to define some extra variables and make some adjustments to a few theme files.
Paste the following code into your "ui-variables.less" below the color variables you added in the previous step:
// CUSTOM COLORS/VARS ADDED TO LESS FILES
//tree-view.less
@tree-view-selected-bg: @n_selected; //new > line 8
@sidebar: @n_defaultbg; //new > line 15
@sidebar-focus: lighten(@n_defaultbg, 0.5%); //new > line 19
//tabs.less
@tab-default-bg: @n_defaultbg; //new > line 45
//tooltips.less
@tip-background-color: lighten(@very-light-gray, 10%); //variables taken out of tooltips.less and placed here for access
@tip-text-color: @very-dark-gray; //variables taken out of tooltips.less and placed here for access
Make note of the comments included keep track of which files are to be modified and on what line in order to use these variables.
With your new variables in place, you can now make the following edits to your theme files:
tree-view.less > line 8: change to background: @tree-view-selected-bg;
tree-view.less > line 15: change to background: @sidebar;
tree-view.less > line 19: change to background: @sidebar-focus;
tabs.less > line 45: change to:
background-image: -webkit-linear-gradient(top, lighten(@tab-default-bg, 7%), @tab-default-bg);
tooltips.less > delete lines 4 and 5:
@tip-background-color: #fff;
@tip-text-color: #333;
These two lines are deleted from "tooltips.less" as the variables are now defined in the main "ui-variables.less" file instead.
We've now made all the required adjustments to go along with our newly defined variables, but there are a few more tweaks to replace hard coded colors and get all the theme files working well with our variables.
utilities.less > line 6: change to background: darken(@button-background-color, 5%);
tree-view.less > line 29: change to color: lighten(@very-light-gray, 15%) !important;
panels.less > line 50: change to
background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 5%));
...makes the gradient more subtle to suit our new colors.
tooltips.less > line 11: change to color: saturate(darken(@red, 10%), 5%);
We now have all the colors from our PSD mockup defined as variables, and all the theme files ready to respond to the definitions in "ui-variables.less".
The only thing left now is to map our custom color variables against the default variables that were already in place when we first opened up the "ui-variables.less" file. It's not necessary to change the value of every single default variable, because some of them piggy-back their values from others in the same file. For example we have @text-color-highlight: #fff; and this value is piggy backed on the next line in @text-color-selected: @text-color-highlight;.
Replace all the code between the comment // Colors and the comment // Sizes with this code:
@text-color: @very-light-gray; //changed
@text-color-subtle: @light-gray; //changed
@text-color-highlight: @n_highlight; //changed
@text-color-selected: @text-color-highlight;
@text-color-info: @cyan; //changed
@text-color-success: @blue; //changed
@text-color-warning: lighten(@orange, 15%); //changed
@text-color-error: saturate( lighten(@red, 10%), 10%); //changed
@text-color-ignored: @text-color-subtle;
@text-color-added: @text-color-success;
@text-color-renamed: @text-color-info;
@text-color-modified: @text-color-warning;
@text-color-removed: @text-color-error;
@background-color-info: @cyan; //changed
@background-color-success: @blue; //changed
@background-color-warning: lighten(@orange, 15%); //changed
@background-color-error: saturate( lighten(@red, 10%), 10%); //changed
@background-color-highlight: rgba(255, 255, 255, 0.07);
@background-color-selected: @n_selected; //changed
@app-background-color: #333;
@base-background-color: lighten(@tool-panel-background-color, 5%);
@base-border-color: @n_darkerbg;
@pane-item-background-color: @base-background-color;
@pane-item-border-color: @n_darkerbg; //changed
@input-background-color: @dark-gray; //changed
@input-border-color: @base-border-color;
@tool-panel-background-color: @n_darkerbg; // changed
@tool-panel-border-color: @base-border-color;
@inset-panel-background-color: @n_defaultbg; //changed
@inset-panel-border-color: @base-border-color;
@panel-heading-background-color: @gray; //changed
@panel-heading-border-color: fadein(@base-border-color, 10%);
@overlay-background-color: @dark-gray; //changed
@overlay-border-color: @background-color-highlight;
@button-background-color: @gray; //changed
@button-background-color-hover: lighten(@button-background-color, 5%);
@button-background-color-selected: @dark-gray; //changed
@button-border-color: @base-border-color;
@tab-bar-background-color: @very-dark-gray; //changed
@tab-bar-border-color: darken(@tab-background-color-active, 10%);
@tab-background-color: @n_defaultbg; //changed
@tab-background-color-active: @very-dark-gray; //changed
@tab-border-color: @n_tabborder; //changed
@tree-view-background-color: @tool-panel-background-color;
@tree-view-border-color: @tool-panel-border-color;
@scrollbar-background-color: @very-dark-gray; //changed
@scrollbar-color: @gray; //changed
@ui-site-color-1: @background-color-success; // green
@ui-site-color-2: @background-color-info; // blue
@ui-site-color-3: @background-color-warning; // orange
@ui-site-color-4: @purple; // changed
@ui-site-color-5: @red; // changed
It would be a little excessive to explain every line of this code, but look for the comment // changed at the end of a line to see where our custom color variables have been mapped against the theme's default variables.
Remember, if you're not sure where these variables apply you can check on their correlation with the Styleguide, as described above.
After saving your "ui-variables.less" file, (and the others you edited), your interface should now look like this:
If you press ctrl-shift-P to bring up the command palette it should look like:
And if you press ctrl-F the "find" panel at the bottom of the editor should look like:
You can download the completed "Nuance" UI and syntax themes at GitHub:
And you can install them directly in Atom by going to Atom > Preferences > Themes and typing "Nuance" into the filter field.
Once you've completed your own custom syntax and / or UI theme you have the option to share it with other Atom users as a package. To do this you'll need to have an up to date GitHub repository for each. For instructions on how to publish an Atom package see Atom Docs: Publishing a Package
In this tutorial we've kept the existing LESS file code unchanged as much as possible, focusing on working with variables. That said, if you want to dive deeper into the theme code you can control the presentation of virtually any aspect of the syntax and UI, from the shape of your tabs to the color of your curly braces and operators.
If you find yourself wishing some piece of code or UI element were different, just open up Atom in dev mode and use the element inspector to see if there is a class in place that you can target. As a general rule, you can customize pretty much everything.
Already, even in beta mode, Atom looks extremely promising in its ability to make customization accessible for anyone with a background in web technologies. Try your hand at working with Atom, you'll be blown away by what you can do!
]]>
CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement.
Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions. What’s more, these effects are hardware accelerated, and a progressive enhancement that you can use right now.
Here are 8 really simple effects that will add life to your UI and smiles to your users’ faces.
All of these effects (bar one) are controlled with the transition property. So we can see these effects working, we’ll set up a div in an HTML page:
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <div></div> </body> </html>
Having done so, set its width and height (so it has dimensions), its background color (so we can see it) and its transition property.
<style type="text/css"> body > div { width:483px; height:298px; background:#676470; transition:all 0.3s ease; } </style> The transition property has three values: the properties to transition (in our case all of them) the speed of the transition (in our case 0.3 seconds) and a third value which lets you change how the acceleration and deceleration is calculated, but we’ll stick with the default by leaving this blank.
Now all we need to do is change properties, and they’ll animate for us…
If you’d like to follow along you can download the demo files here.
Having things fade in is a fairly common request from clients. It’s a great way to emphasize functionality or draw attention to a call to action.
Fade in effects are coded in two steps: first, you set the initial state; next, you set the change, for example on hover:
.fade { opacity:0.5; } .fade:hover { opacity:1; } (Make sure you set the class of your div to “fade” to see this working.)
Animating a change of color used to be unbelievably complex, with all kinds of math involved in calculating separate RGB values and then recombining them. Now, we just set the div’s class to “color” and specify the color we want in our CSS:
.color:hover { background:#53a7ea; }
To grow an element, you used to have to use its width and height, or its padding. But now we can use CSS3′s transform to enlarge.
Set your div’s class to “grow” and then add this code to your style block:
.grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } Shrinking an element is as simple as growing it. To enlarge an element we specify a value greater than 1, to shrink it, we specify a value less than 1:
.shrink:hover { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
CSS transforms have a number of different uses, and one of the best is transforming the rotation of an element. Give your div the class “rotate” and add the following to your CSS:
.rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }
A really popular effect at the moment is transitioning a square element into a round one, and vice versa. With CSS, it’s a simple effect to achieve, we just transition the border-radius property.
Give your div the class “circle” and add this CSS to your styles:
.circle:hover { border-radius:50%; }
3D shadows were frowned upon for a year or so, because they weren’t seen as compatible with flat design, which is of course nonsense, they work fantastically well to give a user feedback on their interactions and work with flat, or fake 3D interfaces.
This effect is achieved by adding a box shadow, and then moving the element on the x axis using the transform and translate properties so that it appears to grow out of the screen.
Give your div the class “threed” and then add the following code to your CSS:
.threed:hover { box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); transform: translateX(-3px); }
Not all elements use the transition property. We can also create highly complex animations using @keyframes, animation and animation-iteration.
In this case, we’ll first define a CSS animation in your styles. You’ll notice that due to implementation issues, we need to use @-webkit-keyframes as well as @keyframes (yes, Internet Explorer really is better than Chrome, in this respect at least).
@-webkit-keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } This animation simply moves the element left and right, now all we need to do is apply it:
.swing:hover { -webkit-animation: swing 1s ease; animation: swing 1s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }
One of the hottest button styles right now is the ghost button; a button with no background and a heavy border. We can of course add a border to an element simply, but that will change the element’s position. We could fix that problem using box sizing, but a far simpler solution is the transition in a border using an inset box shadow.
Give your div the class “border” and add the following CSS to your styles:
.border:hover { box-shadow: inset 0 0 0 25px #53a7ea; }
Featured image/thumbnail, animation image via Shutterstock.
| LAST DAY: Design Websites Faster with Pinegrow Web Designer – only $24! |  |
Dr. Koru will be teaching IS 460/600 Health Informatics - I in Fall 2014. The course is a regular face-to-face on campus course scheduled for Tuesdays 4:30 - 7:00 pm.
As the healthcare industry is going through major transitions and changes, health information systems and technology gain a major renewed focus. While it is widely believed that supporting the complex US health ecosystem will be very difficult without health IT, leveraging the existing and emerging health information technologies remain an important challenge. The initiatives and incentives provided by the US Federal Government in this decade marks only the beginning of a new era.
This course will provide a thorough overview of information systems and their importance in the healthcare industry. A detailed discussion of the primary clinical and administrative uses of health information will be provided along with health information technologies such electronic health records, decision support systems, etc. How can a student benefit from this course? In addition to increasing students' capacity to further explore this topic (by taking Health Informatics - II) and to conduct research, what an earlier student wrote in a thank-you email (below) says a lot about how this course can positively affect students' job opportunities in the future.
]]>Dear Dr. Koru,
I was in your Health Informatics I class during the Fall 2012 semester. I graduated with my Master's in IS back in May, I am currently employed as a web application developer for a company that develops health-IT related systems. I wanted to thank you for all that you taught me during that class. So much of what I learned in your class has helped me in my new job. In addition, I was told during my initial interview that the fact that I had taken a dedicated health IT class was a major factor in deciding to invite me in for an interview, as they considered that a major bonus (the actual job announcement didn't require any health-IT experience, although it was preferred).
I really wanted to take the time to let you know how much your class has positively impacted my life. I honestly believe that having a health IT class on my resume is what turned me from just another one of hundreds of IT graduates looking for work into someone who stood out, at least for this company. And on top of that, I feel that I have been able to adjust to my new job so much faster than if I hadn't taken your class. Otherwise, I would still be struggling to understand most of the jargon in meetings.
Once again, thank you for everything.
Dr. Nagaraj Neerchal, GM and Head of Math Gym Operations, made a presentation at the MD-DC-VA Regional meetings of the Mathematical Association of America held at James Madison University, Harrisonburg, VA on April 26, 2014.
]]>
Partnership pairs DBmaestro with ANTYCIP Technologies, a leading consulting and systems integration firm.
]]>Rebecca Adelman, assistant professor in the Department of Media and Communication Studies, has authored a new book, “Beyond the Checkpoint: Visual Practices in America’s Global War on Terror” (The University of Massachusetts Press, 2014).
Since the 9/11 attacks on U.S. soil, American citizenship has been redefined by the visual images associated with the Global War on Terror (GWOT). Rebecca A. Adelman contends that, in viewing images such as security footage of the 9/11 hijackers, film portrayals of the attacks and subsequent wars, memorials commemorating the attacks, and even graphics associated with increased security in airports, American citizens have been recast as militarized spectators, brought together through the production, circulation, and consumption of these visual artifacts. Beyond the Checkpoint reveals that the visual is essential to the prosecution of the GWOT domestically and abroad, and that it functions as a crucial mechanism in the ongoing formation of the U.S. state itself and an essential component of contemporary American citizenship.
Tracing the connections between citizenship and spectatorship, and moving beyond the close reading of visual representations, this book focuses on the institutions and actors that create, monitor, and regulate the visual landscape of the GWOT. Adelman looks around and through common images to follow the complex patterns of practice by which institutions and audiences engage them in various contexts. In the process, she proposes a new methodology for studying visual cultures of conflict, and related phenomena like violence, terror, and suffering that are notoriously difficult to represent.
Attending to previously unanalyzed dimensions of this conflict, this book illustrates the complexity of GWOT visual culture and the variegated experiences of citizenship that result as Americans navigate this terrain.
Bonnie Miller, author of “From Liberation to Conquest: The Visual and Popular Cultures of the Spanish-American War of 1898” (The University of Massachusetts Press, 2011) writes, “Ambitious in scope and argument, this book stands to make an important contribution to the fields of visual culture, international relations/political science, and American studies.”
Click here for more information.
]]>Too many great quotes in this essay by Peter Welch . I'll just pick this one:
Right now someone who works for Facebook is getting tens of thousands of error messages and frantically trying to find the problem before the whole charade collapses. There's a team at a Google office that hasn't slept in three days. Somewhere there's a database programmer surrounded by empty Mountain Dew bottles whose husband thinks she's dead. And if these people stop, the world burns. Most people don't even know what sysadmins do, but trust me, if they all took a lunch break at the same time they wouldn't make it to the deli before you ran out of bullets protecting your canned goods from roving bands of mutants.
Over-the-top hilariously negative, but you can feel the love through it.
Direct Link to Article — Permalink
Programming Sucks is a post from CSS-Tricks
]]>
With so much bad news buffering our brains, it is refreshing to report something upbeat.
The high school graduation rate has exceeded 80% for the first time in U.S. history.
The National Center for Education Statistics also predicts that it can top 90% in 2020. And as the president of the America’s Promise Alliances stated:
“This is really, really good news.”
What has caused these increased percentages?
1. Progress for Minorities: Curbing drop-out rates for students, especially African-American and Hispanic students, has been largely attributed to the shutting down of failing urban schools.
2. Helping Low-Income Students: In Connecticut, 70% of low-income students graduate compared to the 94% of their wealthier peers. The lower-income graduation rate saw a huge increase by expanding magnet and charter schools which contributes to more engaged students and thus higher graduation rates.
3. Less Rigorous Curriculum: In some states, graduation rates have been aided by less demanding course loads. In Florida, student no longer need chemistry, physics, or Algebra II to graduate. Nevada also lowered the score needed to pass their math examination. These changes in curriculum have allowed more students to reach the pedestal to grab their diploma.
4. More Schooling Options: In Texas, a state with an 88% graduation a rate, students have more options to reach graduation. The state expanded nigh schooling and have the option to choose from different schools in their region that focus on studies they enjoy.
While the 80% can celebrate with their mortarboards and diplomas, the nation cannot forget the other 20%. There are still huge areas of improvement that must be made to ensure every student hears their name called at graduation.
What do you think? What is the best way for the United States to improve graduation rates?
]]>