Frameworks

Get Started
1

Hello everyone, (not sure if this is the right category)

I am new to the forums. However i am not new to html and css. Depending on what the goal is than i just might be. But all in all i believe i can say i am out of the beginner stages of HTML and CSS being i have Aced all of my web design classes.

Anyways,

I am currently researching Frameworks, I have only heard of bootstrap and skeleton but wanted to know if there were others. I have only found limited information about these frameworks.

I guess my question is.

What is the best framework to work with and where can i find information on such framework??

2

Hi there Dakota_Letterman,

and a warm welcome to these forums. :sunglasses:

Here is a controversial article on frameworks…

HTML CSS and JAVASCRIPT frameworks

…which, with some fine tuning and a little polishing
of the prose would express my views. :ok:

coothead

2 Likes
3

There are lots. A couple other popular ones are Semantic UI, Foundation, and Materialize.

Here’s an article that explains them and lists some more:

There’s not really any best. But for a beginner, I think Bootstrap would probably be the easiest because it has the most resources and kinda spawned the whole CSS Framework movement.

The framework’s documentation is the best place to find information about the one you want to look at.

4

Thanks for the info.

I keep coming across the term “SASS”. Not sure on what it is.

Did some reading, so Sass is just another style sheet i am assuming?

I keep seeing install, So is there files that i have to put on my server in order to get the bootstrap to work with the html files.

5

No, Sass is something different. It’s called a “preprocessor”. It provides a more “programmy” way of writing CSS—with variables, nesting, mixins etc. It makes writing CSS a bit more like programming. At the last step, when you’ve finished, Sass converts the code you’ve written into real CSS that a browser can understand.

1 Like
6

that’s no fun.

So Where would the documentation be at for bootstrap, I downloaded and I see a bunch of files, But it must be missing the documentation that goes with it. I keep reading on the internet “install Bootstrap”

7

Documentation: http://getbootstrap.com/css/

Sounds like you downloaded the source. You don’t need that. You can just use the CSS and JS files from a CDN. No need to download anything, just stick it in your HTML files.

Then you can extend the styles you want by overriding them, instead of compiling your own source. Or you can find a Boostrap theme, stick that on there, then add to that if you want.

https://bootswatch.com/

To use a theme, just stick the theme css file after the Bootstrap one.

8

But SASS can make things easier in some cases. Shorter amounts of CSS aren’t so bad. But if for example, I have a whole mess of CSS

.this {
  color: #F00;
  display: inline;
}
.that {
  display: inline;
  color: #F00;
}
.....

And I want to change #F00 to #FAA
Prior to CSS compilers I had two choices, either go through the CSS line be line making the changes, or fire up my text editor and hope to put together a suitable regex for a Replace All.
The first can be tedious, the second not so easy and both prone to error (save a backup!)

eg. this is the regex to target #FOO;

/(?:\{[\s]+[-a-z]+\:[\s])(?:[\s-a-z\:\#\;]+)?(\#[a-f0-9]{3}\;)/gi

and that’s only a contrived example. In reality it would be much more complex.

With SASS it’s as easy as changing a variable,

$my_color: #FOO; 
.this {
  color: $my_color;
  display: inline;
}
.that {
  display: inline;
  color: $my_color;
}
.....
3 Likes
9

That’s programmers’ fun, but if the text editor can’t do regex there is a third option:
Find and Replace (Ctrl+h), usually the selected string is the pre-filled Find and the clipboard as the Replace.
If the editor lacks Replace, try Find (Ctrl+f) and paste the clipboard over each hit. (Ctr+v then F3)

3 Likes
10

I have recently learned Bootstrap and it’s pretty good. The grid system is powerful, and it’s easy to make a responsive website, including navigation. There are lots of Bootstrap tutorials on YouTube.

Bootstrap isn’t a content management system though. The framework I use for this is Wordpress. This is also powerful for building websites, again plenty of help on YouTube.

11

I use TLAs (Three-Letter-Acronyms) to define colors, etc

.bga {background-color:aqua;} .bge {background-color: #eee; color:#333;}
.bgl {background-color:lime;} .bgo {background-color: #ffa644; color:#333;}
.bgs {background-color: snow;}

.clr {color:red;} .clg {color:green;} .cll {color:lime;} .clb {color:blue;}

.fll {float:left;} .flr {float:right;}
.fss {font-size:small;} .fsl {font-size:large;}
.fwb {font-weight:700;}

.hhh {display:none;}
12

I am also currently researching Frameworks and i make unique framework for my e-commerce website.
i want to learn more and more and discuss major problems.

Post edited by TechnoBear to remove fake signature

13

Sorry for the late reply guys. Thanks for the information on the links and such.

So i have downloaded the “Bootstrap Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.” from bootstrap website.

Got the folder on local. So Let me understand this framework, So i can either take an existing page from there site and edit html and add the variables and such to the css that is predone.

or i can create a brand new html page from scratch and just match there css classes, ids etc in order to connect the two files?

I suppose my research paid off for my final paper for class, but not so much on a personal/freelance level.

Kinda lost at the moment. Any assist would be helpful. thanks in advanced.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.