stfbauer / generator-simplestyle Goto Github PK

Yeoman generator to create a SimpleStyle Style Guide

License: MIT License

JavaScript 6.63% CSS 92.95% HTML 0.42%

atomic-design documentation-tool office365 sass sharepoint style-guide styleguide yeoman-generator

generator-simplestyle's Introduction

Stefan Bauer loves to bring beautiful, sustainable, flexible designs based on solid technologies to life. Driven by curiosity, he tries to find new innovative ways to solve aesthetic and functional problems.

Born and raised in Linz / Austria, he now lives and works in Vienna.

Stefan's curiosity for technologies, art, and design shaped his future early on in his life. While attending a school for mechanical engineering at the age of 16, his real passion was always around visual design and development. Fast forward a few years: he is now a designer, founder, speaker, occasional developer, and maker.

While experimenting with multi-disciplinary projects - even including architecture - he started to work on his first website in 1997. This website was named VizArts (Visual Arts) Project, which tried to set up a collaborative platform for artists on the web. The idea might have been too early, but his passion and love for the web, interaction design, collaboration, and open source remained.

After several years in the web design and technology industry and working with international agencies and customers, in 2015 Stefan founded the design studio named N8D. This brand, first established in 2010, served since then as his website and blog. The same website and Microsoft community collaboration led to multiple Microsoft Most Valuable Professional award recognitions since 2016.

Stefan is also a member of the Microsoft 365 Pattern and Practices initiative. In this community-driven open-source initiative, Microsoft and external community members share their learnings and artifacts around implementation practices for Microsoft 365.

His most recent open-source project is named hTWOo, which implements Microsoft's Fluent Design language for the web in a technology - to be continued..

generator-simplestyle's People

Contributors

Stargazers

Watchers

Forkers

akrasheninnikov

generator-simplestyle's Issues

no proper layout right after installing

I have done following sequence:

npm install -g generator-simplestyle bower gulp jslint
cd

yo simplestyle
gulp serve

I can see strange picture in both Edge in Chrome:

I expected to see some menu, but maybe I just should change something in the project before I run serve?

The DOM that I've got in browser:

<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>helloworldsimplestyle</title>
    <!-- bower:css -->
    <!-- endbower -->
    <link href="/styles/ssgCore.css" type="text/css" rel="stylesheet">
    <!-- <link href="/styles/prism.css" type="text/css" rel="stylesheet"> -->
    <link href="/styles/corev15.css" type="text/css" rel="stylesheet">
    <link href="/styles/main.css" type="text/css" rel="stylesheet">
    <!-- build:js scripts/vendor/modernizr.js -->
    <!-- endbuild -->
    <!-- inject:css -->
    <!-- endinject -->
</head>

<body class='ssg-body' id="ssg-font"><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.8'><\/script>".replace("HOST", location.hostname));
//]]></script>

    <div id="ssg-toolbar">
        <div id="ssg-toc" class="ssg-toc-list"></div>
        <div id="ssg-filter" class="ssg-cmd-section"></div>
        <div id="ssg-vp-resizer" class="ssg-cmd-section"></div>
        <div id="ssg-add-tools" class="ssg-cmd-section"></div>
        <div id="ssg-item-selector" class="ssg-cmd-section"></div>
    </div>
    <div id="ssg-wrapper">
        <div id='ssg-patterns' class="ssg-patterns">
            <div id="ssg-patterns-inner" class="ssg-patterns-inner"></div>
        </div>
    </div>
    <!-- bower:js -->
    <script src="/bower_components/handlebars/handlebars.js"></script>
    <!-- endbower -->
    <script src="/scripts/main.js"></script>
    <!-- inject:js -->
    <!-- <script src="/scripts/prism.js"></script> -->
    <script src="/scripts/ssg.templates.js"></script>
    <script src="/scripts/ssgCore.templates.js"></script>
    <script src="/scripts/ssgCoreLib.js"></script>
    <!-- endinject -->
</body>

</html>

Problem with Table Of Contents Filter

The following code gets reported in the console:

[Log] TypeError: null is not an object (evaluating 'currentButton.classList') — ssgCoreLib.js:291 (ssgCoreLib.js, line 353)

Windows: FilePath in pattern.conf.json with wrong format

Hi Stefan. Awesome work. I use Windows 10 and vscode.

When I add a new hbs file under one of the _patterns catalog, the _config\pattern.conf.json file is modified with the new file.

The filepath is formated like this:
"filepath" : "atoms\02-my-second-atom.hbs"

It should be like this:
"filepath" : "atoms/02-my-second-atom.hbs"

I did correct the filepath manually.
But when I added a new hbs, both the new one and the old one got the wrong format.

Problem with current corev15.css

Organsim navigation makes some issue and wrap.

stfbauer / generator-simplestyle Goto Github PK

generator-simplestyle's Introduction

generator-simplestyle's People

Contributors

Stargazers

Watchers

Forkers

generator-simplestyle's Issues

no proper layout right after installing

Problem with Table Of Contents Filter

Windows: FilePath in pattern.conf.json with wrong format

Problem with current corev15.css

Add Angular Directives 1.0 support in generator-simplestyle

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent