I wrote CSS lib for simple semantic HTML markup. No classes, not ids. Just tags. I think result looks good

I wrote CSS lib for simple semantic HTML markup. No classes, not ids. Just tags. I think result looks good.

Repo: github.com/igoradamenko/awsm.css
Demo: igoradamenko.github.io/awsm.css/

What do you say?

Other urls found in this thread:

drafts.csswg.org/
w3.org/TR/tr-groups-all#tr_Cascading_Style_Sheets__CSS__Working_Group
github.com/igoradamenko/awsm.css/blob/master/dev/scss/_variables.scss
yegor256.github.io/tacit/
purecss.io/
developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=en
taligarsiel.com/Projects/howbrowserswork1.htm
vimeo.com/44182484
w3schools.com/cssref/css_selectors.asp),
css-tricks.com/specifics-on-css-specificity/)
twitter.com/NSFWRedditImage

Looks nice so far.

babby's first css

do you even specificity bro

good luck scaling that

good luck extending that

good luck designing anything significant

drafts.csswg.org/
w3.org/TR/tr-groups-all#tr_Cascading_Style_Sheets__CSS__Working_Group

read up bitch boy you have a lot to learn

also wtf how'd you convince 50 people of your inferiority lmao

this desu senpai

I have experience in CSS. That lib for guys without that. For instance for docs pages, you know.

It's not a framework or smth greatful so it does not need to be much scalable. It must be just nice out of the box.

Nice Igor.

Faggot name, otherwise good. Mini bootstrap.

Thanks!

I didn't choose them)
But thank you too.

Very nice can you made a blog template for it?

Maybe. For Wordpress you mean? Or for other CMS?

not so bad. looks good but need more examples of usage. not sure that I know what semantic html is

Good idea, thanks. I will add more examples and links to explanations.

It looks good and simple.

I would probably refit the CSS and add my own theme but as it stands, it looks good.

Thanks. I will think about the possibility of setting your own theme. Right now it has only file with color variables: github.com/igoradamenko/awsm.css/blob/master/dev/scss/_variables.scss

Thanks for the good idea.

Do you know similar CSS framework (class-less)
I used bootstrap but it css class clusterfuck just irritate me to much.

Some days ago colleagues show me Tacit: yegor256.github.io/tacit/

I'm really not sure that it can more that awsm.css, but it has amazing number of stars (envy T_T") and may be it's good. At least Tacit has more readable code than awsm.css.. yet :)

Also try to use Pure: purecss.io/ It has classes but I believe that Pure is easier than Bootstrap.

you sound like a really shitty person man

Why?

I thought you were an idiot thinking his first css stylesheet had any worth and wanted to mock you, but I like how it's simple and tasteful, both visually and markuply.

Thanks! ^_^

Oh. Sorry, I didn't notice the quote in your post. I agree with you.

You're doing gods work, user.

That's how a page should look.

Also, disregard faggots bitching about scaling.

Thank you!

looks nifty, and good. i have a question about how it works.

I see how the CSS defines the styles to use, but how do you get the tag in the HTML to recognize the style in the CSS, semantically?

how does find the .code element in the css?

Not bad.

Hm. I'm not sure that I understood the question correctly, but that's a browser's job — parse HTML to DOM, CSS to CSSOM and relate them to each other.

Read more about it:

Not bad explanation from Google: developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=en

Step-by-step explanation by Tali Garsiel: taligarsiel.com/Projects/howbrowserswork1.htm

Tali Garsiel on Front-Trends in 2012: vimeo.com/44182484

Hope it helps. Feel free to ask more questions.

Thanks!

so you just define a code {} element in css, and the browser automatically associates it with a tag in the html?

Yep, that's it.

But the process is much complicated. There are many types of selectors (more: w3schools.com/cssref/css_selectors.asp), and such a thing as CSS Specificity Value (more: css-tricks.com/specifics-on-css-specificity/) and so on. For instance if you have:

HTML:

alert(1);

CSS:
div code {
color: green;
}

code {
color: red;
font-size: 12px;
}


Your text inside of will be green and it will have size equals to 12px, 'cause browser not just accociates CSS selector with HTML tag, it calculates selector's.. let's say importance, and combines all selectors related to HTML tag in one rule-set, that is applied to this tag. But not in the whole document. For example, using CSS styles above and HTML markup like this:


Text 1


Text 2


We get green `Text 1` and red `Text 2`, and each of them has size == 12px, 'cause for these s have different set of style rules.

I hope my explanation is not a very confusing )

Also you can see these rule sets in your browser. Just right-click on an any element of the page and choose something like `Inspect element`. In DevTools you will see all information about this node, it's styles and so on. Check the gif. You can see that several selectors match to the node and they contain rule for `border`, but just one of them is applying.