vladocar

My point wasn't to replace the classic class grid, just to give basic HTML5 grid if necessary. You can always add any other CSS Framework for grid formatting. About <section> and other HTML5 tags.. you can always personalise the code to your standards.

The grid is based on this: parent element {display: flex; flex-flow: row wrap} child element {flex:1}

Replace the parent element (container) with any HTML element, replace the child element with your preferred semantic element.

Here is similar idea: https://www.aliexpress.com/item/32989809211.html?spm=a2g0o.p...

Here is something similar: https://github.com/vladocar/Basic-CSS-Typography-Reset

The name is inspired by the "puppeteer" => screenshot + puppe-teer = screenshoteer

I just pushed the version 1.0.2 to npm. Now you can do this:

screenshoteer --url https://news.ycombinator.com/item?id=18598672 --el ".fatitem"

That is super strange.. I never inserted 0.3.2. The current version is 1.0.1

Yes, it uses puppeteer(headless chrome).

For the .DS_Store I totally forgot to put .gitignore :)

It also works with (a) tags: <a class="button btcolor pill" href="#"> Button Link</a> I need to add this in the examples.

It is a simple solution for very common problem: styling a CSS button. There are many CSS buttons libraries but they usually force you to use their style or size. That is why this is interesting and simple solution born with my necessity not to recode and reinvent the CSS button for every new project.

This is flexy: https://github.com/vladocar/flexy

Yes, just 1 button color if you need more colors just add .btcolor1 , .btcolor2 ...

"It sounds like you're saying today it's absolutely something you should use but you don't want to force it?"

Yes, correct.

Let me explain.. that is the most important decision you make when you plan your CSS layout. But is your decision to make. You can absolutely add this in the reset. Feel free to add stuff in the reset.

I love your reference. I love it so much that I changed my github profile to: "Just another Full Stack Developer seeking the stars." :):)

Yes, I've used the word "browser reset" but is just "default browser style".

Here is the webkit style: https://trac.webkit.org/browser/trunk/Source/WebCore/css/htm...

That will force you to use completely different CSS layout model. Yes today is common practice the use of box-sizing: border-box and it should be the first line of code when you set your layout. I don't what to force anyone to use box-sizing: border-box.

I agree about the semantics. If you are building small web site or big web with the simple structure don't use CSS Framework.

Here is blog post about this (It is from 2008): http://www.vcarrer.com/2008/08/when-to-use-css-framework.htm...

That is the point that I'm failing to make. It is all about reusability not about the grid system. You can use one CSS layout system in multiple cases otherwise you need to define separate CSS logic for every different web layout.

Few words about this CSS layout solution. It is meant to be starting point. Because is only 36 lines of code you could personalise anything in the main CSS file. Example you can change the main width form 960px to 60 % or 70 em. You can change the grid margin from 10px to xyz px. You can personalise how the responsive layout works. Like I said before is only a starting point..

I know you are joking .. but there are some CSS Frameworks with really terrible names and naming logic. If you have better naming system let me know.

The default of the system is less then 480px for some reason Safari doesn't resize try Chrome or Firefox..

The general idea is that because is already a grid you don't need another grid. The point of this project is not to make just another grid, but to make reusable system using the same CSS classes in your entire project.

P.S Yes, using fr is good idea..

Good suggestion :)

Sidenote: The words "Open" and "Pandora" don't mix very well together.

50% OFF: (All our projects)

http://www.handdrawnicons.com

http://www.photoshopwireframingkit.com

http://www.modernlogomockups.com

Actually you can do much more with this trick, I made one free tool called Writability - http://www.vcarrer.com/2013/01/writability-write-in-your-bro...

Here is also URL to QR Bookmarklet: http://www.vcarrer.com/2012/06/url-to-qr-bookmarklet.html

Did you try http://www.photoshopwireframingkit.com/ ?

Strange few days ago I made this free Android App that takes info from APOD and NASA https://play.google.com/store/apps/details?id=nasa.project.v... and today we have unusual picture of Mars on HN.

Ultra minimal: http://www.vcarrer.com/2009/06/1-line-css-grid-framework.htm...

I would normally agree with you about the raster v.s vector when it comes to normal proportional icons or shapes. But when it comes to hand drawn icons if you want to reproduce the hand drawn authenticity and fidelity you usually don't use the vector format. It is like saving photos in vector format.

"This is trivial." - Actually is harder than you think, few mounts of work, drawing and redrawing, sorting, organizing, web site preparation etc.. Drawing just one icon can sometimes take few hours and trust me the drawing is the easiest part.

Excellent tip, thanks. Actually I was planing to make this service in the future, so people can ask for custom drawn icons.