Threads for vladocar
-
First thing I have to think of when someone says “CSS Reset” is setting margins to zero.
What do I see here? https://i.imgur.com/mO3AEEz.png - zero margins :P (it’s half of a 1920 screen, if I resize it the margin appears)
That said, definitely bookmarking this and maybe trying it out when I need something again. Not doing many websites lately and last time I used Foundation because it did what I needed.
-
The site uses old 14 years old CSS. I build it with my CSS Framework Emastic https://code.google.com/archive/p/emastic/ and it uses ems as main logic. I should probably make some more modern layout CSS :)
-
-
Nothing groundbreaking in this article. It’s good to see the idea of deliberate CSS getting some traction. He kind of self defeats though:
Make your own default.css where you define colors, dimensions, round corners and all the important HMTL elements that you are planning to use.
Followed by:
Here is my take on this problem: It’s called Basic.css
Where he provides a general purpose utility for the entirety of HTML to look the same in all browsers.
-
-
Yeah, I get that. But as the project develops, more and more will get swallowed into Basic.css, and it’ll become closer to what you’re trying to eliminate. Perhaps with reset omitted, saving a layer, but using Basic.css still means the browser is parsing rules for a dozen elements (or more) which I never use.
-
Yes is true. There is always a risk that the default css will be overwritten as the project develops in time. We all have witness garbage WordPress themes with thousands and thousands lines of CSS code and maybe 5% is actually rendered by the browser. That is why I was super careful to include only the bare minimum into the Basic.css. Plus you always eliminate the parts you don’t use.
-
-
-
-
The grids don’t line up in my Firefox (68.7.0esr). The gap between the penultimate and final column is smaller than all previous gaps.
-
-
Looks nice, would be cool if it was more mobile friendly, though? I quick tested with the responsive design mode on Firefox, it just gets smaller, which in an actual device is kind of annoying.
-
-
That’s quicker support than services I paid for, hahahah =P
-
-
-
I really like the thrust of this idea, but I’m virtually certain this grid is an abuse of the
<aside>tag. Surely there’s a way to achieve the same thing with semantically correct HTML?-
Also:
-
acronymis deprecated. -
your index.html lacks its opening
htmltag. -
<h3>Ordered lists</h3>should be anh4. -
<label>Number:</label>should be anh4, and the subsequentinputelements should be labelled:<h4>Number</h4> <label style="display:block"> <!-- ideally avoid <br/> --> <input type="radio" name="radioSet" value="uno"/> Uno </label> <label> ...
-
You must be fun at code reviews.
Just kidding, I actually admire people which a keen eye for detail. Carefully examining other’s people code can be as helpful if done with kindness as it can be bad if done condescendingly or arrogantly, and you didn’t really do it in either of the later bad ways =)
-
-
-
The project is build around the premise of default CSS starter kit. Instead of using CSS reset you use something like this to set the default style. You will probably need classes to make more complex grid. The grid logic is taken from: https://github.com/vladocar/infinity-css-grid .
-
-
few issues:
-
why do you have the same file twice
-
why no use of “use strict”
-
shouldnt be using “$” as it will clobber any sites using jQuery
-
using “var” for fuction definition - should be “const”
-
“i.style.cssText = i.style.cssText + v” should be “i.style.cssText += v”
-
- Not the same the file one is used only to list the objects in the demo code. This is the main file https://github.com/vladocar/femtoJS/blob/master/src/femtoJS.js
- Good point.
- Yes, jQuery is everywhere.. yes it doesn’t need to be $
- True.
- Good suggestion.
Thanks!
-
-
I may be missing something, but doesn’t this mix up the usual meanings of “row” and “column”?
-
-
not if you hold your phone sideways
-
-
-
What about performance?
-
-
I did a quick search in Github for ‘grid system’ written in CSS and there are over 1000 repositories at this point in time.
Not to knock you or your project in any way, but I find it fascinating that these styling/layout libraries have gotten to this point. I think the first of these I encountered was the ‘960 grid system’ more than 10 years ago. I used it for a bit and then tried out Bootstrap, Bourbon, Bulma and so on. Nowadays I write my own tiny bit of css when I need to do a layout, as each site has different requirements.
It makes me wonder - who are these aimed at? Just the grid layout ones specifically. If the intention is for CSS stylists to take the grid and write their own styles on top, surely they would know how to write the paragraph or two needed to do the grid system, in flex, floats, inline-block, tables or CSS grid? I guess having a concrete and stable mixin saves a bit of time on each project, and could become ubiquitous for multi-developer projects.
How did you come to the conclusion to compartmentalise this into its own thing? I am starting to consider doing the same for tens of little CSS goodies I have scattered around.
-
I made my first CSS Framework 10 years ago: https://code.google.com/archive/p/emastic/downloads . I love to experiment with CSS Layouts and find smaller and simpler solutions that work. The hope is someone will use them as their starting point and build something on top of them or learn how to build layout system with few lines of code.
-
-
Hm. “Make X Great Again” is just poor taste these days.
-
-
This is awesome! What I’ve been using thus far is a WebKit-based implementation (here’s a brief overview), but this tool is much better designed—and actively maintained, to boot!
-
-
If you want something a bit more antique (aka works in more browsers without a hassle)
.row { display: table; table-layout: fixed; width: 100% } .col { display: table-cell }And a fiddle to demonstrate http://jsfiddle.net/k35x0bd8/1/
This works well for me, although you do get the occasional ‘tables are evil and must be stopped’ people now and again.
-
Ha,ha nice.. I made that 8 years ago :)
https://github.com/vladocar/Two-Lines-CSS-Framework/blob/master/two-lines-css-framework.css
-
-
I can’t tell if this is genius or terrible. This asks the writer to structure everything as a sequence of horizontally stacked boxes, with explicit row breaks. My hunch is that this is probably fairly maintainable for simple layouts. Difficult to structure complex UIs like this, but good for the big boxes on the page?
-
Aside from the
div.clears this is pretty textbook flex stuff. What I don’t understand is whydiv.clearis even necessary. Just make adiv.mainfor each row and you’re good. Emptydivs for layout hacks isn’t very semantic, and the whole point of flex is to allow more layouts without hacks. This is almost as bad as the old float and clear hacks.-
Hi div.clear is necessary because it determines the braking point. You can also use .columns container instead of .clear https://github.com/vladocar/Flex-One/blob/master/README.md#some-other-tweaks
-
Why doesn’t putting each row’s columns in it’s own
div.mainwork? And then possibly changing the class name to.rowfor semantics?-
Why doesn’t putting each row’s columns in it’s own div.main work?
Good Idea. It can work. I can rename the .main class in to .column class. The .fluid will become .row. And you can have infinite grid system with only two lines of CSS.
The result:
.column{display: flex; flex-flow: row wrap; width: 80%; margin: 0 auto} .row{flex:1}-
That looks great :)
-
-
-
-
-
-
hyperpape
4 years ago
|
link
| on:
Minimal standalone JS library for building TODO-like web applications
I think this could use more motivation. I have never written a TODO app in js, but if the library illustrates something valuable, that might not matter.
One note about code:
render()has repeated calls toObject.keys(obj). -
-
The point of Markdown is keeping it readable as plain text (and I frequently use that feature). This template – which uses HTML syntax everywhere – makes that very painful.
-
-
And here I thought that it would be a boilerplate stating how your project is moving to GitLab/gogs/gitea and that the GitHub repository is just a mirror.
-
Unfortunately no. I stared the project before the news GitHub + Microsoft. I also made a copy https://gitlab.com/vladocar/boilerplate-readme-template. And yes, I’m angry that all my open source project are now under Microsoft. Should I go to GitLab? Who will guarantee that GitLab one day will be sold to Apple or other corporate. Should I do some private arrangements? I could but the point of all open source project is interaction with the community of developers. So I’m not sure what to do.
-
I’m hoping we see federation (maybe with ActivityPub, maybe with something else) implemented in GitLab/gogs/gitea, so that it doesn’t matter so much for discoverability where your code is hosted. Currently a combination of repository/issues/wiki and emailing pull requests is fine for development, but not so good for discoverability.
-
Until Microsoft shuts down the interactions, keep business as usual. Git makes it supremely easy to pull out if you have to.
There are tools to transfer issues etc as well, I’m told.
GitHub alone was a de-facto monopoly, just like Microsoft, so I don’t get the fuss. Sure, MS has a bad history, but it’s run differently now.
-
It’s worthwhile to be proactive. I intend to gradually move to self-hosted as I have time, and make my old github repositories mirrors of the new self-hosted ones.
The situation with Microsoft owning GitHub is not significantly worse than GitHub was before the acquisition, but it was already not great. It only took a change to tip things for a lot of people.
-
-
-
-
The first time I read your sample README, for some reason I thought I had to install the template using
npm:)Download & Installation
$ npm i boilerplate-readme-template
-
I’m curious about the fonts:
Why not include better options for the monospace fonts on Mac and Windows? E.g.
SFMono-Regular, Consolas, Menlo, etc.Sure. Good suggestion.