3 ms·

I tried using Bootstrap and other CSS frameworks and (as mentioned in the comments) I felt like I was fighting the frameworks to get it to do what I wanted to d

I tried using Bootstrap and other CSS frameworks and (as mentioned in the comments) I felt like I was fighting the frameworks to get it to do what I wanted to do. The problem with CSS frameworks is that they are invasive when it comes to writing semantic HTML. As someone who is working on developing semantic HTML and improving the skill, its annoying when you use a CSS framework which it encourages you to perform inline styling. Layout should be separated from content. Bootstrap and others is are great for making something quick and dirty. Semantic UI[1] is onto something decent but the issue of inline styling irritates me. Its good that Picnic is taking an approach to use better naming conventions for classes. I think this is a preference thing but I find writing button-one better than writing btn-1. I think its readable, can be understood quickly , easy to pick up if you have been away from development for a while, looks maintainable even for novice developers. Shorthand has never been my thing, it just adds more complexity and nuisance by wasting time digging into someones documentation to understand whats going on. I would rather spend an extra two seconds writing out a full name rather than using shorthand knowing that its going to make my life easier in the future. Great work, I'll definitely play with this when I get time. 1. http://semantic-ui.com/ http://semantic-ui.com/

snarkyturtle 12y ago
I think you'd like the bourbon framework, which is basically a way to structure your css and doesn't get in your way. See their grid framework: http://neat.bourbon.io/ http://neat.bourbon.io/ and their default style package akin to bootstrap: http://refills.bourbon.io/ http://refills.bourbon.io/
- notastartup 12y ago
  I also recommend http://purecss.io/ http://purecss.io/ from Yahoo. I agree that bootstrap is quite heavy and there's a learning curve. I liked purecss because it is simple and does what you set out to do.
  - computerjunkie 12y ago
    Cool. I will have a look at the frameworks suggested. Thanks
DigitalSea 12y ago
Minor nitpick with your comments regarding the use of classes for the grid system making your mark-up non-semantic. If you use the LESS or SASS version of Bootstrap and not the pre-compiled version of Bootstrap, you can use the internal grid system functions in place of classes on elements instead, thus making your markup semantic. I like the intent behind the Semantic UI project, but I feel like CSS preprocessors like LESS and SASS allow for semantic markup through the use of mixin functions out of the box without needing to use anything else.
welly 12y ago
Where's the inline styling used in Semantic UI? I'm looking and looking and see no inline styling in their examples.
- computerjunkie 12y ago
  Have a look here [0]on their documentation on buttons, also in their divider documentation[1]. 0. http://semantic-ui.com/elements/button.html http://semantic-ui.com/elements/button.html 1. http://semantic-ui.com/elements/divider.html http://semantic-ui.com/elements/divider.html

snarkyturtle 12y ago

I think you'd like the bourbon framework, which is basically a way to structure your css and doesn't get in your way. See their grid framework: http://neat.bourbon.io/ http://neat.bourbon.io/ and their default style package akin to bootstrap: http://refills.bourbon.io/ http://refills.bourbon.io/

notastartup 12y ago
I also recommend http://purecss.io/ http://purecss.io/ from Yahoo. I agree that bootstrap is quite heavy and there's a learning curve. I liked purecss because it is simple and does what you set out to do.
- computerjunkie 12y ago
  Cool. I will have a look at the frameworks suggested. Thanks

DigitalSea 12y ago

Minor nitpick with your comments regarding the use of classes for the grid system making your mark-up non-semantic. If you use the LESS or SASS version of Bootstrap and not the pre-compiled version of Bootstrap, you can use the internal grid system functions in place of classes on elements instead, thus making your markup semantic. I like the intent behind the Semantic UI project, but I feel like CSS preprocessors like LESS and SASS allow for semantic markup through the use of mixin functions out of the box without needing to use anything else.

welly 12y ago

Where's the inline styling used in Semantic UI? I'm looking and looking and see no inline styling in their examples.

computerjunkie 12y ago
Have a look here [0]on their documentation on buttons, also in their divider documentation[1]. 0. http://semantic-ui.com/elements/button.html http://semantic-ui.com/elements/button.html 1. http://semantic-ui.com/elements/divider.html http://semantic-ui.com/elements/divider.html