UTF-8 2 Spaces Markdown   master +106, -82   2 updates

Atomic Design

Providing a modern and refined interface for Atom

Created by Brett Stevenson


Atomic Design aims to provide a modern and refined interface to compliment any dark syntax-theme, featuring modifications that focus on improving the user experience and adaptability.  Similarly, this theme also includes a custom icon set and improved integration of some of the most common Atom packages.


This package is distributed via apm.  After installing apm, you can install the UI-theme with the following command:
$ apm install atomic-design-ui

After installation, the theme can be activated by going to the Themes section in the Settings view and selecting it from the UI Theme drop-down menu.


Dark Refined Interface

Atomic Design features a carefully selected color palette and meticulously styled components,
which provides the interface with a sense of depth, receptiveness, and adaptability.
Allowing this theme to be wonderfully complimented by any dark syntax theme.

Package Styling

This UI-theme includes supplementary styling for an expanding collection of popular Atom
packages, providing the same refined interface to all aspects of the user experience.

Custom Icon Set

Atomic Design also features a custom icon set, which aims to integrate distinct custom icons
with the best aspects of popular icon packages to provide improved visual-grepping of
project files, while also preventing the alignment issues that plague
many icon packages and theme combinations.

Custom Theme Settings

This UI-theme includes custom settings, which allow users to fine-tune various aspects of
the interface to suit their preference. These settings are accessible via
the cogwheel button next to the drop-down menu, once the theme is enabled.

  NOTE: The syntax highlighting shown here might
  not match exactly what you see in your editor


  <meta charset="utf-8">
  <title>Brett Stevenson - Designer/Developer, Atomic-Design, Atomic-Monokai, and more. Designer/Developer, Atomic-Design, Atomic-Monokai, and more.</title>
  <meta name="description" content="Designer/Developer. Stylesheets Corpus, Predawn, Norwester, and more. Dog-lover and avid reader of the internet—it's pretty good so far.">

  <meta name="keywords" content="brett stevenson, bstevenson, BStevensonDev, JonSn0w,, designer, design, developer, dev, Atomic-Design, Atomic-Monokai, UI, syntax, atom">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="xICaRiFseDjdCoawimIDp8J8beVHQcEUr0i5thWv-Ho" />

  <link rel="stylesheet" href="/css/main.css">
  <link rel="canonical" href="">
  <link href=',300|Alegreya+SC|Alegreya:400italic' rel='stylesheet' type='text/css'>
  <link href="/img/favicon.png" rel="shortcut icon">


  <header class="header column center-left color-white vh50 relative">
  <section class="container w100">
    <h1 class="header-intro">The Portfolio <span class="header-intro-italic">of</span> Brett Stevenson</h1>
    <h2 class="header-description" data-fitter-happier-text>Designer/Developer</h2>

  <section class="header-contact fs-base ptb1 w100 absolute bottom">
    <div class="container row w100">
      <ul class="row list-style-none">
        <li class="mr1 hide-on-small">Get in touch:</li>
        <li class="link-separator"><a href="">GitHub</a></li>
        <li class="link-separator"><a href="">DeviantArt</a></li>
        <li class="link-separator"><a href="">Twitter</a></li>
        <li><a href="mailto:[email protected]?subject=Hello.">Email</a></li>
      <span class="row center-right">
        <svg class="favicon" xmlns="" width="16" height="16" viewBox="0 0 16 16">
          <path class="step1" d="M6 0h4v4h-4zM12 6h4v4h-4zM0 12h4v4h-4zM6 12h4v4h-4zM12 12h4v4h-4z"/>
//  NOTE: The syntax highlighting shown here might
//  not match exactly what you see in your editor

.column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  flex-wrap: nowrap;
  @include small {
    min-width: 100%;

.row {
  display: flex;
  flex: 1 1 auto;
  height: auto;
  flex-direction: row;
  flex-wrap: wrap;

.row > .column {
  @include small {
    width: 100% !important;

//  Gutters

// Add .gutters to .row/.column elements
.gutters { padding: $padding; }

// All direct descendants of .gutters get margin
.gutters > .column,
.gutters > .row {
  margin: $margin;
  @include small {
    width: 100% !important;
    min-width: 0;

// offset padding/margin to maintain width
.gutters > {
  .w5    { width:  calc(5%   -  #{$padding + $margin}); }
  .w10   { width:  calc(10%  -  #{$padding + $margin}); }
  .w15   { width:  calc(15%  -  #{$padding + $margin}); }
  .w20   { width:  calc(20%  -  #{$padding + $margin}); }
  .w25   { width:  calc(25%  -  #{$padding + $margin}); }
  .w30   { width:  calc(30%  -  #{$padding + $margin}); }
  .w35   { width:  calc(35%  -  #{$padding + $margin}); }
  .w40   { width:  calc(40%  -  #{$padding + $margin}); }
  .w45   { width:  calc(45%  -  #{$padding + $margin}); }
  .w50   { width:  calc(50%  -  #{$padding + $margin}); }
  .w55   { width:  calc(55%  -  #{$padding + $margin}); }
  .w60   { width:  calc(60%  -  #{$padding + $margin}); }
  .w65   { width:  calc(65%  -  #{$padding + $margin}); }
  .w70   { width:  calc(70%  -  #{$padding + $margin}); }
  .w75   { width:  calc(75%  -  #{$padding + $margin}); }
  .w80   { width:  calc(80%  -  #{$padding + $margin}); }
  .w85   { width:  calc(85%  -  #{$padding + $margin}); }
  .w90   { width:  calc(90%  -  #{$padding + $margin}); }
  .w95   { width:  calc(95%  -  #{$padding + $margin}); }
  .w100  { width:  calc(100% -  #{$padding + $margin}); }
//  NOTE: The syntax highlighting shown here might
//  not match exactly what you see in your editor

'use babel';
'use strict';
import { CompositeDisposable } from 'atom';

export var config = {

  useTabSyntaxColor: {
    title: 'Match Tabs to Syntax Colors',
    description: 'Use colors from the syntax theme to color tabs (not recommended for light themes)',
    type: 'boolean',
    default: true,
    order: 1
  lightTreeView: {
    title: 'Light Tree View',
    description: 'Use light tree-view background',
    type: 'boolean',
    default: true,
    order: 2
  compactTreeView: {
    title: 'Compact Tree View',
    description: 'Decrease tree-view font size and spacing',
    type: 'boolean',
    default: false,
    order: 3
  customIcons: {
    title: 'Custom Icons',
    description: 'Disable this if you\'re using \'file-icons\' or similar icon packages',
    type: 'boolean',
    default: true,
    order: 4

var disposable;

export function activate() {
  disposable = new CompositeDisposable(
  atom.config.observe('atomic-design-ui.useTabSyntaxColor', updateTabColor),
  atom.config.observe('atomic-design-ui.lightTreeView', updateTreeViewTheme),
  // atom.config.observe('atomic-design-ui.treeViewFontSize', updateTreeViewFont),
  atom.config.observe('atomic-design-ui.compactTreeView', updateTreeViewSize),
  atom.config.observe('atomic-design-ui.customIcons', updateIcons)

export function deactivate() {

var workspaceView = atom.views.getView(atom.workspace);

function updateTabColor(useTabSyntaxColor) {
  workspaceView.setAttribute('data-atomic-design-ui-use-tab-syntax-colors', useTabSyntaxColor);

function updateTreeViewTheme(lightTreeView) {
  workspaceView.setAttribute('data-atomic-design-ui-light-tree-view', lightTreeView);

function updateTreeViewSize(compactTreeView) {
  workspaceView.setAttribute('data-atomic-design-ui-compact-tree-view', compactTreeView);

function updateIcons(customIcons) {
  workspaceView.setAttribute('data-atomic-design-ui-custom-icons', customIcons);