[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y ] [Home]
4chanarchives logo
I wrote CSS lib for simple semantic HTML markup. No classes,
Images are sometimes not shown due to bandwidth/network limitations. Refreshing the page usually helps.

You are currently reading a thread in /g/ - Technology

Thread replies: 30
Thread images: 2
File: awsm.css – Yandex.jpg (18 KB, 504x289) Image search: [Google]
awsm.css – Yandex.jpg
18 KB, 504x289
I wrote CSS lib for simple semantic HTML markup. No classes, not ids. Just tags. I think result looks good.

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

What do you say?
>>
>>54515365
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

https://drafts.csswg.org/
https://www.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
>>
>>54515577
this desu senpai
>>
>>54515577
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.
>>
>>54515365
Nice Igor.
>>
Faggot name, otherwise good. Mini bootstrap.
>>
>>54515576
>>54515792
Thanks!

>>54515806
I didn't choose them)
But thank you too.
>>
>>54515365
Very nice can you made a blog template for it?
>>
>>54516199

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
>>
>>54516761
Good idea, thanks. I will add more examples and links to explanations.
>>
>>54515365
It looks good and simple.

I would probably refit the CSS and add my own theme but as it stands, it looks good.
>>
>>54516961
Thanks. I will think about the possibility of setting your own theme. Right now it has only file with color variables: https://github.com/igoradamenko/awsm.css/blob/master/dev/scss/_variables.scss

Thanks for the good idea.
>>
>>54515365
Do you know similar CSS framework (class-less)
I used bootstrap but it css class clusterfuck just irritate me to much.
>>
>>54517112
Some days ago colleagues show me Tacit: https://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: http://purecss.io/ It has classes but I believe that Pure is easier than Bootstrap.
>>
>>54515577
you sound like a really shitty person man
>>
>>54517256
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.
>>
>>54517305
Thanks! ^_^
>>
>>54517256
>>54517274

Oh. Sorry, I didn't notice the quote in your post. I agree with you.
>>
>>54515365
You're doing gods work, anon.

That's how a page should look.

Also, disregard faggots bitching about scaling.
>>
>>54517881
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 <code> find the .code element in the css?
>>
>>54515365

Not bad.
>>
>>54518124
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: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=en

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

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

Hope it helps. Feel free to ask more questions.
>>
>>54518246
Thanks!
>>
>>54518290
so you just define a code {} element in css, and the browser automatically associates it with a <code> tag in the html?
>>
>>54518368
Yep, that's it.

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

HTML:
<div>
<code>alert(1);</code>
</div>


CSS:
div code {
color: green;
}

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


Your text inside of <code> 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:

<div>
<code>Text 1</code>
</div>

<code>Text 2</code>


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

I hope my explanation is not a very confusing )
>>
File: 4chan.gif (3 MB, 1342x655) Image search: [Google]
4chan.gif
3 MB, 1342x655
>>54518368
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.
Thread replies: 30
Thread images: 2

banner
banner
[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y] [Home]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
If a post contains personal/copyrighted/illegal content you can contact me at [email protected] with that post and thread number and it will be removed as soon as possible.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com, send takedown notices to them.
This is a 4chan archive - all of the content originated from them. If you need IP information for a Poster - you need to contact them. This website shows only archived content.