agauniyal / wireframe

minimal wireframing css-framework 🎈

wireframe

WIP - minimal wireframing css-framework. Example index.html is given.

How to develop:

• clone the repo
• run npm install
• run gulp
• read the source files
• add styles to lib/ directory and not inside css/ or min/
• add corresponding html for styles introduced

wireframe's Issues

Instalation problem

Hi,

Good Evening,

I try to install the project, bur i have the following problem:

npm notice created a lockfile as package-lock.json. You should commit this file.
added 659 packages from 518 contributors and audited 3449 packages in 158.538s
found 12 vulnerabilities (2 low, 2 moderate, 8 high)
run npm audit fix to fix them, or npm audit for details

Thanks

Fix Gulp Tasks

Last pull request on "develop" branch broke the default Gulp task by moving sass processing to Express. Fix this to ensure that people not using Express can still compile sass accordingly.

Add heading styles

should go into _base.scss and use redacted font.

Pull in redacted font license

https://github.com/christiannaths/Redacted-Font

Inside the fonts directory.

publish gh-page to show demo index.html

complete all form elements style

Currently only button and input[type=text] is styled. All form related styles reside in lib/_form.scss.

Add list styles

Unordered and ordered lists

Consider using semantic versioning?

I think we could use semantic versioning to provide clear updates on which features will be added with which merges. I was thinking we could start at v1 when we add in some nav styles and update the index.html screenshot? What do you think?

Initial screenshot

Uncompleted and will change.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Rewrite: Move to custom tag based framework

Originally I wrote an in-house js script which generates simple html <div> tags with supplementary css classes to style them properly. This approach is good for short wireframes but doesn't scale with the complexity of the design. I'm thinking of moving to proper js framework that supports custom tags like -

<Header />
<HeroImage />
<Carousel />
<Footer />

which could be individually styled and glued together. This will help in reducing the cognitive load from writing index.html which will be lot easier with custom tags, plus open more possibilities for this project.

Open to suggestions.

Footer Styles

Make the footer area look a little more clean and consider adding in a few different columns.

add navigation element

using nav tag, create styles for horizontal/vertical navigation elements. should goto _base.scss and might add some to _misc.scss.

refactor sass code

many things are duplicated inside lib/ directory. refactoring should be continous activity.

customize tables style

Tables are left for customization according to wireframe's design too.

install problem

Hi,
I followed the instructions given and got an error "Error: not found: python2"
I've just reinstalled python 3.7.1 and I don't see any python2 executable there.
(I downloaded rather than cloned; can that have anything to do with it?)
Here's my configuration:
Windows 10
Python 3.7.1
npm version 6.4.1

Here's the complete error:

gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (C:\projects\wireframe-master\node_modules\which\which.js:13:12)
gyp verb which failed at F (C:\projects\wireframe-master\node_modules\which\which.js:68:19)
gyp verb which failed at E (C:\projects\wireframe-master\node_modules\which\which.js:80:29)
gyp verb which failed at C:\projects\wireframe-master\node_modules\which\which.js:89:16
gyp verb which failed at C:\projects\wireframe-master\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\projects\wireframe-master\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb which failed python2 { Error: not found: python2
gyp verb which failed at getNotFoundError (C:\projects\wireframe-master\node_modules\which\which.js:13:12)
gyp verb which failed at F (C:\projects\wireframe-master\node_modules\which\which.js:68:19)
gyp verb which failed at E (C:\projects\wireframe-master\node_modules\which\which.js:80:29)
gyp verb which failed at C:\projects\wireframe-master\node_modules\which\which.js:89:16
gyp verb which failed at C:\projects\wireframe-master\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\projects\wireframe-master\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb which failed stack: 'Error: not found: python2\n at getNotFoundError (C:\projects\wireframe-master\node_modules\which\which.js:13:12)\n at F (C:\projects\wireframe-master\node_modules\which\which.js:68:19)\n at E (C:\projects\wireframe-master\node_modules\which\which.js:80:29)\n at C:\projects\wireframe-master\node_modules\which\which.js:89:16\n at C:\projects\wireframe-master\node_modules\isexe\index.js:42:5\n at C:\projects\wireframe-master\node_modules\isexe\windows.js:36:5\n at FSReqWrap.oncomplete (fs.js:152:21)',
gyp verb which failed code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which succeeded python C:\Users\fvila\AppData\Local\Programs\Python\Python37-32\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\fvila\AppData\Local\Programs\Python\Python37-32\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (child_process.js:276:12)
gyp ERR! stack at emitTwo (events.js:126:13)
gyp ERR! stack at ChildProcess.emit (events.js:214:7)
gyp ERR! stack at maybeClose (internal/child_process.js:915:16)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\projects\wireframe-master\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\projects\wireframe-master\node_modules\node-sass
gyp ERR! node -v v8.12.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\fvila\AppData\Roaming\npm-cache_logs\2018-11-06T09_25_28_540Z-debug.log