[Locked] Bootstrap css, what is the purpose?

Report · Aug 15, 2017

hi

i am a first time novice of dreamweaver 2017.

I'm using a boostrap starter template and i want to make changes to the bootstrap.css which is read only. is there a reason why it is read only given the html wasn't? should i simply mark it as writable and begin to 'attempt' to modify it. or should i just delete the whole thing and start from scratch; which seems appealing now...

is there simpler way to begin to create a css with simple changes? or perhaps the better question is what shall i do begin a create a css style sheet from scratch as all the tutorials i have found seem to have 'prepared on earlier' and instead show how to modify.

thanks

Report · Aug 15, 2017

The simple reason for locking the botstrap.css is: if you don't know what you're doing, you can easily break it.

Rather than making changes to that colossal css file, you are supposed to attach a second, override css file to your pages just after the Bootstrap css in the <head> section. That way, you can re-write any css selector you like, without messing up the original.

1. Create a new blank .css file and save it into your site "styles.css" usually works fine for the name.

2. On your page, right click just after the bootstrap.css file's <link> tag and choose "Attach Stylesheet"

3. Browse to the new "styles.css" file

4. Make sure Add As is set to "Link"

5. hit OK

From there on out, use the new css file as your "Source" in the CSS Designer, if you use that window

Report · Aug 15, 2017

Ah, great! this is a really helpful way forward. - the idea of changing 6000 lines of coding is daunting. I will try it this way

Report · Aug 15, 2017

It's not a simple question. If you are a web designer then you should probably learn the fundamentals of coding and CSS before deciding whether or not to use Bootstrap. Adobe has historically grabbed free code (which Bootstrap is) and stuffed into Dreamweaver to add perceived value. Dreamweaver's developers, unfortunately, are likely not very good web designers themselves or they'd probably have built their own page-building solutions. That said, Bootstrap CSS is massive as the library must attempt to be all things to all people. For that reason, the core Bootstrap CSS should not be altered. To customize, you must make what I call exception CSS rules, contained in an additional CSS file. These rules would basically be additive -- added as additional class names to elements already assigned a Bootstrap class. If you don't understand this, Bootstrap is very likely going to lead to some very difficult times for you, in which case...

You can look for easier to edit CSS templates online or you can invest in Dreamweaver page-building extensions designed around automated interfaces that install inside Dreamweaver, and that provide free customer support via actual developers, rather than offshore employees who read from scripts.

So you probably have some research to do and decisions to make.

Some of the people who will be responding to you do not necessarily use Dreamweaver, nor do they believe in investing in add-on tools. But if you want to explore that avenue, you would look at these pages, along with its attendant examples and documentation:

Harmony Vibrations

Report · Aug 15, 2017

Thanks too ALsp for giving the background to the bootstrap.css. whilst I feel reasonably comfortable with making edits, I'm not so confident with having to understand all that is in the bootstrap.css and create exceptions to those. Or needing to start from scratch. i think i will try to get a template online. do you recommend any sites please?

Report · Aug 15, 2017

michellef25541473 wrote
Thanks too ALsp for giving the background to the bootstrap.css. whilst I feel reasonably comfortable with making edits, I'm not so confident with having to understand all that is in the bootstrap.css and create exceptions to those. Or needing to start from scratch. i think i will try to get a template online. do you recommend any sites please?

Whilst getting a template may seem slightly less daunting, if you want to make any serious changes you are still going to have to paw over someone elses visions of writing html/css/naming conventions.

I dont really know what your long-term goals are. If this a one off project and you are unlikey to to be involved in web-development as a profession then you just have to use what's available 'out-of-the-box' and that will probably be a framework/template/plugin/extension. If on the other hand you view this as a long-term pursuit you need to learn to code, only then can you make subjective decisions about a workflow.

Dreamweaver is failing as a serious web-development tool because it includes poor options as default and those that gravitate towards it start off on the wrong foot and generally continue that way.

Good luck...

Report · Aug 15, 2017

michellef25541473 wrote
Thanks too ALsp for giving the background to the bootstrap.css. whilst I feel reasonably comfortable with making edits, I'm not so confident with having to understand all that is in the bootstrap.css and create exceptions to those. Or needing to start from scratch. i think i will try to get a template online. do you recommend any sites please?

Hi Michelle,

You'd be better off getting template site recommendations from people who habituate this forum. We are a developer of Dreamweaver add-ons, and have been for nearly 20 years, so we tend not to look at template sites, which can be hard to judge, both in terms of quality and ease of use, unless you have an advance feel for CSS.

That said, I do know that our tools are easy to use, flexible, come with interfaces to manage layouts, and also with unlimited email, forum, and telephone support... but they are not free. It's an investment, and something most of our customers feel is just as valuable, if not more so, than Dreamweaver

So, the link in my first reply to you would be something you might want to look at.

Both Paula (pziecina) and I agree that learning CSS is an integral step, but our tools also allow you to learn, while providing a time-saving way to whip out pages that you can go back to for study.

Report · Aug 15, 2017

It's not that some of us do not want to use Dw, it is that Dw is unusable for us, as it is missing to many features we find essential.

My personal recomendation too the OP, would be to learn css and create their own layouts, or dare i say it AL, use your flexbox layout extension, as both options i would consider better than bootsrap, with the learn css being my prefered option.

Report · Aug 15, 2017

I 2nd the advice to learn HTML & CSS before you begin projects. It's a necessary skill.

To get the most out of Bootstrap, learn the 12-box grid system and Bootstrap's built-in CSS classes. The 12-box grid allows you to make custom responsive layouts for xs, sm, md, & lg devices. The built-in classes allow you to leverage Bootstrap without custom CSS coding. Used correctly, the Bootstrap framework can save you a lot of time.

If you want another color scheme, Bootswatch has free themes for Bootstrap online. https://bootswatch.com/

To use these themes, simply replace the link to your current Bootstrap CSS with the Bootswatch theme of choice from Max CDN. Bootswatch · BootstrapCDN by MaxCDN

Cerulean Example:

Advanced users often generate a custom Bootstrap build, tailored to their specifications with LESS variables & mixins. You can download the complied CSS or use the LESS pre-processor files in DW. It's your choice.

https://getbootstrap.com/docs/3.3/customize/

You have lots of options for working with Bootstrap in DW. But take some time to get familiar with it.

Bootstrap 3 Tutorial
Bootstrap 12-box Grid Overview
http://getbootstrap.com/examples/grid/
Bootstrap CSS Overview
http://getbootstrap.com/css/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 15, 2017

One thing to keep in mind is that Bootstrap is not Adobe code. It is a massive, free CSS framework. While I respect Nancy as a person, her advice is not going to do you any good unless you make the very personal decision to buy into Bootstrap. And if you do, please understand that the next version of Dreamweaver, or the one after that, could see Adobe removing Bootstrap for the next fashionable CSS framework it can acquire for free, leaving you and anyone else tied to Dreamweaver and Bootstrap left holding the bag, as happened with Spry, and later with Boilerplate. Be very, very careful.

If you do nothing else, learn CSS so you can write your own layouts in less than 10% of the bloat used by Bootstrap or use a more modern method, such as Flex or CSS Grids. These are easy things to learn, so easy, I really wonder why Adobe feels compelled to use other people's code instead of writing its own.

Massive CSS libraries make sense in massive web sites managed by dozens of designers and developers, but make absolutely no sense in the typical Dreamweaver site.

I hope you see the light. I really do.

Report · Aug 15, 2017

ALsp wrote
If you do nothing else, learn CSS so you can write your own layouts in less than 10% of the bloat used by Bootstrap or use a more modern method, such as Flex or CSS Grids. These are easy things to learn, so easy, I really wonder why Adobe feels compelled to use other people's code instead of writing its own.

Dw does that because most of the people advising them have no idea how flexbox and grids actually works, and they refuse to even consider an alternative until it is too late, just think back to fluid grids. The next version of bootstrap uses flexbox, so most if not everything in the css of the current version for layouts will be obsolete.

ALsp wrote
Massive CSS libraries make sense in massive web sites managed by dozens of designers and developers, but make absolutely no sense in the typical Dreamweaver site.

Massive css libraries are now being dropped by most large web sites, in favour of a modular approach. All that previously used such libraries found that maintanence was almost impossible, and a complete re-write became a mammoth task. Even pre/post-processors are slowly being dropped by large web sites, as they often made the tasks more difficult.

Report · Aug 15, 2017

Just a reminder to everyone, that this thread now looks as though it may go off topic, so unless the OP wishes it to continue it may be best if a new discussion was started.

Report · Aug 15, 2017

Al & PVII make commercial tools or widgets for people who don't want to code their own & have a budget to work with. In fact, I have steered many DW users in this forum to PVII extensions because they make good products.

Whether you use 3rd party extensions or open source code like Bootstrap & jQuery is entirely your choice. Frankly, I don't see much difference in concept except that 3rd party extensions are sold & maintained by a small group of people. Whereas jQuery & Bootstrap are open source projects maintained by a huge community of users worldwide. Suffice it to say, jQuery & Bootstrap are not going to suddenly vanish anytime soon because they are in widespread use all over the world.

If Adobe were to discontinue support for Bootstrap & jQuery (I'm not saying they will), you can be sure the code will not suddenly stop working. You don't need Adobe's endorsement to keep using open source code. I started using jQuery & Bootstrap long before Adobe integrated them into DW. And I will probably continue to use them until or unless something much better comes along to replace them.

Arguably, jQuery & Bootstrap out of the box contain everything but the kitchen sink unless you generate custom builds tailored to your project's requirements. Opponents will tell you it's too much code. You don't need that much if you write your own. OK, fair enough. Assuming you have the necessary coding skills, patience and oodles of time to complete & test your project in every available browser & web device, be my guest. But please don't ask me to maintain it later. Even well-commented custom code tends to be idiosyncratic based on whatever whims the person was feeling at that time. At least If I'm handed a Bootstrap & jQuery project, I can pick up where someone left off without missing a beat because the code is standardized. And standardized code is what most businesses want to work with.

Just my 2 cents,

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 15, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
But please don't ask me to maintain it later. Even well-commented custom code tends to be idiosyncratic based on whatever whims the person was feeling at that time. At least If I'm handed a Bootstrap & jQuery project, I can pick up where someone left off without missing a beat because the code is standardized. And standardized code is what most businesses want to work with.

Just because developers are using Bootstrap it doesnt mean to say that the code and css they use is any easier to maintain than a well developed bespoke website, that's down to how good the developer is and how skillful other devlopers are when/if they come to interpret it. Real develpers will expect that any developer that takes over their work to have a similar knowledge or even better. Its not up to them to focus on if a developer who takes over their work down the line can only use a certain framework or a certain workflow.

Whether one takes over a website is purely based on what skill levels you have and what workflow is suitable. Hence I dont take over Bootstrap, Wordpress, Joomla, Magenta sites or sites that utilise stuff like React, Angular, Laravel, Codeigniter etc........I focus on what I do best...

Report · Aug 15, 2017

osgood_ wrote
Whether one takes over a website is purely based on what skill levels you have and what workflow is suitable. Hence I dont take over Bootstrap, Wordpress, Joomla, Magenta sites or sites that utilise stuff like React, Angular, Laravel, Codeigniter etc........I focus on what I do best...

You just made my case. I think we are both code snobs on opposite sides of the fence. I also focus on what I do best. I won't take custom coded projects unless I feel they make sense with good web standards and best coding practices. You would not believe some of the custom code I've inherited in the past. Let's just say it was painful and by comparison, Bootstrap or even WordPress (gag) would have been easier to sort out. I understand MVC so I've no problem with backend coded Laravel and CodeIgnitor sites. but have no interest in React or Angular.

At least if somebody used Bootstrap, I have a fighting chance of understanding what that coder was thinking and doing at the time. With custom code produced by beginners or novices, it can be one colossal train wreck. No thank you. Life is too short.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 15, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
You just made my case. I think we are both code snobs on opposite sides of the fence. I also focus on what I do best. I won't take custom coded projects unless I feel they make sense with good web standards and best coding practices. You would not believe some of the custom code I've inherited in the past. Let's just say it was painful and by comparison, Bootstrap or even WordPress (gag) would have been easier to sort out. I understand MVC so I've no problem with backend coded Laravel and CodeIgnitor sites. but have no interest in React or Angular.

Not sure its code snobbery just what is expected if you put yourself forward as a web-developer, and not a puzzle assembler. Horses for course really, there are quite a few terrible implementations of Bootstrap sites as well, we see them here all the time. A good developed, site whether Bootstrap or bespoke should be in the boundaries of any competant developer to understand what is going on. I could easily maintain a well developed Bootstrap site but I dont have to so choose not to.

A poorly developed Bootstrap website would give as many problems as a poorly developed bespoked one, although I may have more chance of actually getting through the css file on the bespoke one inside a day.

Report · Aug 15, 2017

Please don't be offended Nancy, but this is misinformation. When you say:

"Frankly, I don't see much difference in concept except that 3rd party extensions are sold & maintained by a small group of people" I'm afraid that is not even close to accurate. Please consider the facts:

A CSS coder can write a site that is as good, and likely far better, than a Bootstrap site with a miniscule fraction of the code.

The huge teams that support Bootstrap and jQuery exist to make money on conferences and books. They do not provide actual support and their coding is by committee. I think it's safe to say most people know what happens when code is managed in sectors... like Adobe does.

jQuery is Query. The entire library is ALWAYS required. Writing plugins or stubs is additive and never reduces the size and complexity of the library.

And I'm only going to say this in defense of my company, because a casual reader would get a completely inaccurate view of what we really do based on your post... We write all of our CSS and script from scratch. Our page-building tools are nothing like Bootstrap. Our Flexbox tool generates 2% of the code that Bootstrap requires and is fully commented and editable, and comes with an interface. Many of our customers know CSS well enough to look at one of our live example pages and write the code themselves. Instead, they use our tool because when a client says "I'd like to see a prototype at 4:00pm this afternoon," they can deliver in ways that are utterly impossible to code from scratch, no matter whether you use Bootstrap, and no matter how many snippets you might have. Oh, wait, proper snippets that wrap code are now deprecated in Dreamweaver.

So, please, if you're going to compare what we do to anyone else, at least present it accurately. I would be happy to provide you with a copy of our Flexbox tool so you can understand it better.

Thanks.

Report · Aug 15, 2017

ALsp wrote
Please don't be offended Nancy, but this is misinformation.

I get accused of that a lot by you, Al . All I said was the concept of using out-sourced code -- be it from 3rd party add-ons or open sourced frameworks is the same in intent. You can take that however you like. But believe me, that's where the comparison ends.

Without naming names, there's one person around here who routinely denigrates people for using 3rd party extensions but consistently uses jQuery. To me that's a non-sequitur. How are those 2 things so different? They're not. So while some people feel it's cheating to use out-sourced code, I don't share that view. Whatever helps developers get the job done on time & on budget is fine with me. Use whatever works best.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 15, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
ALsp wrote
Without naming names, there's one person around here who routinely denigrates people for using 3rd party extensions but consistently uses jQuery.

That'll be me then. I've always stated that I'm not proud to be using jQuery however it's less obtrusive than many frameworks/extensions as it doesn't force you into any naming convention or particular way of writing the code, you're still very much having to actually write the jQuery to make anything work, which takes a certain amount of skill, not just adding class names to elements, as you would in Bootstrap. Its more user friendly written than pure javascript. I dont believe myself that the code produced by Bootstrap is more user friendly than that which is bespoke. jQuery, as long as you are prepared to understand and write the stuff yourself is nothng like a front end framework where you just literally do nothing but add a few components and classes or as the case of extensions just go through a pre-made menu pointing and clicking....

Report · Aug 15, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
Used correctly, the Bootstrap framework can save you a lot of time.

Only an expert or those with a photographic memory will save anytime, the rest will be continuously trying to solve riddles as to why there is a gap here or there, what css selector changes this or that and pawing their way over a list of default classes to see what might be a good one to use for a particular problem they are facing.

God forbid if they even think about wanting to do anything other than add a very basic navigation, its just not there unless they want to get into coding. Frameworks are what they are - they offer a very limited and restrictive way of developing a website.

Report · Aug 15, 2017

To get part way back to the OP's question.

What is missing in Dw is alternative starter pages, such as ones using flexbox, and now css grid layouts that anyone can use, and decide which they think is the best to use for their planned layout(s).

The problem with providing those is that even if Dw did provide them, it is missing features to make working with them easier for users.

Report · Aug 15, 2017

pziecina wrote
The problem with providing those is that even if Dw did provide them, it is missing features to make working with them easier for users.

Yeah, better start with hard stuff first like wrapping snippets initially, as has been mentioned, then move on to the simpler stuff.

Report · Aug 15, 2017

I asked you not to take offense and I'm sure you didn't right what you did maliciously. However, although I did not quote your complete statement, I did cite it. This is what you wrote, which I took literally:

-------------------------------------

Whether you use 3rd party extensions or open source code like Bootstrap & jQuery is entirely your choice. Frankly, I don't see much difference in concept except that 3rd party extensions are sold & maintained by a small group of people. Whereas jQuery & Bootstrap are open source projects maintained by a huge community of users worldwide. Suffice it to say, jQuery & Bootstrap are not going to suddenly vanish anytime soon because they are in widespread use all over the world.

-------------------------------------

I don't think I misunderstood.

Report · Aug 15, 2017

ALsp wrote
I asked you not to take offense and I'm sure you didn't right what you did maliciously. However, although I did not quote your complete statement, I did cite it. This is what you wrote, which I took literally:
-------------------------------------
Whether you use 3rd party extensions or open source code like Bootstrap & jQuery is entirely your choice. Frankly, I don't see much difference in concept except that 3rd party extensions are sold & maintained by a small group of people. Whereas jQuery & Bootstrap are open source projects maintained by a huge community of users worldwide. Suffice it to say, jQuery & Bootstrap are not going to suddenly vanish anytime soon because they are in widespread use all over the world.
-------------------------------------
I don't think I misunderstood.

It wasnt me, honestly.....

Report · Aug 15, 2017

Sorry Michelle, I live in another time zone and only get to see the majority of posts when I arise from a good night's sleep. What I am about to say will make the whole thing even more confusing, so please skip the next part and go straight to my last line.

Anyone been to the Bootstrap site lately? The problems with Dreamweaver have already started! For anyone starting out now (Dreamweaver and the included Bootstrap) are going to find themselves in all sorts of strife. Even @Teodor, DMXZone, are now behind the eight ball.

Edit: It looks like the Bootstrap link does not work. Try http://getbootstrap.com/

I have created a few sites using Bootstrap 4; in my latest site I used Grid with Flexbox as a backup for the browsers that have not caught up / will not be updated. Still needs some tidying up, but seems to have the correct outcome.

For those that are interested, the following is what my SCSS looks like

/*
General Layout
*/
html {
height: 100%;
font-family: Arial;
font-weight: 400;
overflow-y: scroll;
@include media-breakpoint-up(xl) {
background: url(../img/left-column.png) left top no-repeat fixed, url(../img/right-column.png) right top no-repeat fixed, url(../img/html-bg.png) center repeat;
background-size: 39vh;
}
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
.container {
max-width: 576px;
@include media-breakpoint-up(md) {
max-width: 1200px;
}
}
.content {
background-color: white;
flex: 1 0 auto;
}
/*
Home Page Layout
*/
#home.content {
display: flex;
flex-flow: row wrap;
display: grid;
grid-template-columns: 60% 40%;
grid-template-areas:
"main-area main-area"
"right-sidebar left-sidebar";
>.col-main {
flex: 1 100%;
grid-area: main-area;
}
>.col-left {
flex: 2 0;
grid-area: left-sidebar;
}
>.col-right {
flex: 3 0;
grid-area: right-sidebar;
}
@include media-breakpoint-up(sm) {
grid-template-columns: 20% 50% 30%;
grid-template-areas:
"left-sidebar main-area right-sidebar";
>.col-main {
order: 2;
flex: 5 0;
}
>.col-left {
order: 1;
flex: 2 0;
}
>.col-right {
order: 3;
flex: 3 0;
}
}
}
/*
Contact Page Layout
*/
#contact.content {
display: flex;
flex-flow: row wrap;
display: grid;
grid-template-columns: 100%;
grid-template-areas:
"main-area"
"right-sidebar";
>.col-main {
flex: 1 100%;
grid-area: main-area;
}
>.col-right {
flex: 1 100%;
grid-area: right-sidebar;
}
@include media-breakpoint-up(sm) {
grid-template-columns: 50% 50%;
grid-template-areas:
"main-area right-sidebar";
>.col-main {
flex: 1 0;
}
>.col-right {
flex: 1 0;
}
}
}

Just two breakpoints

mobile
the rest

In this period of transition/confusion, Al's Harmony Vibrations may be the best option for new-comers to web design/development. That way the newbie can learn HTML/CSS while creating the site.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

[Locked] Bootstrap css, what is the purpose?

1 Correct answer