Highlighted

How can I learn which Class to choose?

Enthusiast ,
Dec 25, 2017

Copy link to clipboard

Copied

There are so many Classes to choose from for CSS. Where do I begin to learn which one to use?

Views

502

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How can I learn which Class to choose?

Enthusiast ,
Dec 25, 2017

Copy link to clipboard

Copied

There are so many Classes to choose from for CSS. Where do I begin to learn which one to use?

Views

503

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 25, 2017 0
LEGEND ,
Dec 25, 2017

Copy link to clipboard

Copied

Its impossible. A normal workflow when using Bootstrap would be to start with a basic template and use the browser inspect tool to inspect an element. That will divulge the name of the class and any ccs attributes associated with that class. If you want to change any of those css attributes you would copy the class to your additional css file and make the changes accordingly. You only need to include the css attributes you want to change, the attrubutes you dont want to change will get their values from the default css file.

After some time working with Bootstrap you will start to remember some of the more frequently used classes and become more skilled, hopefully. There might be a list which someone has put together, those who frequently uses Bootstrap might be able to point you in the correct direction if one exists.

Its not the workflow l would personally recomend or choose to use but Bootstrap is what it is, lots of developers use it whether l think they are nuts or not.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2017 0
Enthusiast ,
Dec 25, 2017

Copy link to clipboard

Copied

osgood_  wrote

Its impossible. A normal workflow when using Bootstrap would be to start with a basic template and use the browser inspect tool to inspect an element. That will divulge the name of the class and any ccs attributes associated with that class. If you want to change any of those css attributes you would copy the class to your additional css file and make the changes accordingly. You only need to include the css attributes you want to change, the attrubutes you dont want to change will get their values from the default css file.

After some time working with Bootstrap you will start to remember some of the more frequently used classes and become more skilled, hopefully. There might be a list which someone has put together, those who frequently uses Bootstrap might be able to point you in the correct direction if one exists.

Its not the workflow l would personally recomend or choose to use but Bootstrap is what it is, lots of developers use it whether l think they are nuts or not.

By browser inspect tool do you mean see what I like on the web and copy it?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2017 0
Enthusiast ,
Dec 25, 2017

Copy link to clipboard

Copied

I'm still very confused on what to choose for a class.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2017 0
Adobe Community Professional ,
Dec 25, 2017

Copy link to clipboard

Copied

Normally, when you write your own style rules (CSS), you will know the classes that you have defined. As an example

.container {

     max-width: 1200px;

     margin: auto;

}

and applied in the HTML

<body class="container">

<h1>My Heading</h1>

</body>

In Bootstrap, there is no need to create your own CSS because you can use Bootstrap's classes, which for the container, reads

.container {

  width: 100%;

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

The above is slightly different to what I wrote, but has much of the same effect.

The idea now is to get to know the classes that Bootstrap supplies and the best way to learn is to follow the links that I have already given or going to https://getbootstrap.com/ 


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2017 1
Adobe Community Professional ,
Dec 25, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2017 2
LEGEND ,
Dec 26, 2017

Copy link to clipboard

Copied

No, a browser has a set of tools for helping developers. If you are using a Bootstrap starter template from DW, which is pretty basic and want to change the styling, coloring etc you can inspect the page elements using the browser developer tools. The tools will inform you what Css classes are being used and more importantly what ccs attributes. You can then change those attributes by copying the css selector to your css stylesheet and updating the css attributes to suit.

The above, along with the links provided by other posters should help you find out the attributes of the classes being used and introduce you to additional classes that you may want to incorporate. Theres a whole bunch of them so you'll probably be doing more research than developing.

Learn to write your own code and it will be a much simpler process is my advice but l dont know how serious you are. If youre just developing a couple of sites for your grandma and grandpa Bootstrap is probably going to be the way to go. If you are in it for the long run then you should invest time in learning html and css and then you can consider if Bootstrap is any good for you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 26, 2017 2
Enthusiast ,
Dec 26, 2017

Copy link to clipboard

Copied

osgood_  wrote

No, a browser has a set of tools for helping developers. If you are using a Bootstrap starter template from DW, which is pretty basic and want to change the styling, coloring etc you can inspect the page elements using the browser developer tools. The tools will inform you what Css classes are being used and more importantly what ccs attributes. You can then change those attributes by copying the css selector to your css stylesheet and updating the css attributes to suit.

The above, along with the links provided by other posters should help you find out the attributes of the classes being used and introduce you to additional classes that you may want to incorporate. Theres a whole bunch of them so you'll probably be doing more research than developing.

Learn to write your own code and it will be a much simpler process is my advice but l dont know how serious you are. If youre just developing a couple of sites for your grandma and grandpa Bootstrap is probably going to be the way to go. If you are in it for the long run then you should invest time in learning html and css and then you can consider if Bootstrap is any good for you.

I have been in this field a while... but I never started a website writing my own code from scratch. Is that what you do? I relied on Dreamweaver.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 26, 2017 0
LEGEND ,
Dec 26, 2017

Copy link to clipboard

Copied

Sure, l write as much of my own code as l possibly can. Why? Because l then know every single line of code and every single component and every single css attribute. I can name my classes something that l determine, not what is suggested l name them by other developers. I determine the structure of my page not what lm told to use by other developers. I decide when its time to introduce new techniques which are usually main stream way before any front end framework incorporates them. Frameworks lock you into a way of working, which if you are lazy as most are, will stop you from exploring other solutions and techniques.

Frameworks get the job done of course but do they save you much time. Not in my opinion once you become a competent coder.

Learning to code of course takes a considerable amount of time and l realise not everyone has that time or inclination to follow that route so they have to use a framework or an extension to help them but for those that want a  serious career in web development  learn to do it using your own skills, not some poorly written package.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 26, 2017 0
Adobe Community Professional ,
Dec 26, 2017

Copy link to clipboard

Copied

AnotherMe  wrote

I have been in this field a while... but I never started a website writing my own code from scratch. Is that what you do? I relied on Dreamweaver.

I've always written code from scratch because that's how I learned to code.  But later when everyone wanted responsive web sites, I decided enough is enough and started using frameworks.   I still manually code 90% except now I use a framework which significantly reduces development time.

If you tell me what sort of basic layout you want, I can build it in code view using Bootstrap classes in under 20 minutes.   Previously, the layout alone would have taken about 1 hour + extra time for all the breakpoints & media queries.   That doesn't even factor in typography, navigation and all the other element styles.

So that's where Bootstrap can really help you.  It's not a replacement for good coding skills but rather an enhancement to what you already know.

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 26, 2017 1
LEGEND ,
Dec 26, 2017

Copy link to clipboard

Copied

But surely you dont just stick to the 3 or 4 set breakpoints that Bootstrap offers, right. You introduce break points when the design starts to break down, which means if you are developing correctly you would need to add additional break points as and when, to at least try and cater for more mobile device widths.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 26, 2017 0
Adobe Community Professional ,
Dec 26, 2017

Copy link to clipboard

Copied

Bootstrap 4 provides more break points and utility classes than before which gives use more to work with. 

xs = less than 576

sm =  576 or more

md = 768 or more

lg = 992 or more

xlg = 1200 or more

But yes, in rare cases I might add or fine tune the existing xs, sm, md, lg & xlg break points either sitewide or in specific sections.  Fortunately, this is easily done with Saas mixins.

https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 26, 2017 0
LEGEND ,
Dec 27, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Bootstrap 4 provides more break points and utility classes than before which gives use more to work with. 

xs = less than 576

sm =  576 or more

md = 768 or more

lg = 992 or more

xlg = 1200 or more

But yes, in rare cases I might add or fine tune the existing xs, sm, md, lg & xlg break points either sitewide or in specific sections.  Fortunately, this is easily done with Saas mixins.

https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

So really its not much different than analysing where the break is needed if using Bootstrap or not. I rarely find these days that that the 'sensible' break points address the problem properly, they are too general, so end usually having to adjust where the design morphs into another structure by adding extra breaks or reajdusting the 'sensible, (default)' break points, but then again maybe I'm just too obssesed with coveriing more situations that others might be bothered about.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 27, 2017 0
Enthusiast ,
Dec 27, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

AnotherMe   wrote

I have been in this field a while... but I never started a website writing my own code from scratch. Is that what you do? I relied on Dreamweaver.

I've always written code from scratch because that's how I learned to code.  But later when everyone wanted responsive web sites, I decided enough is enough and started using frameworks.   I still manually code 90% except now I use a framework which significantly reduces development time.

If you tell me what sort of basic layout you want, I can build it in code view using Bootstrap classes in under 20 minutes.   Previously, the layout alone would have taken about 1 hour + extra time for all the breakpoints & media queries.   That doesn't even factor in typography, navigation and all the other element styles.

So that's where Bootstrap can really help you.  It's not a replacement for good coding skills but rather an enhancement to what you already know.

Nancy

Hi Nancy,

So you will start to code the HTML 5, CSS3 and Javascript from almost scratch on the coding panel? By coding, I mean actually typing the commands, like I am typing this reply to you right now? Or by coding from scratch, do you choose Dreamweaver's commands?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 27, 2017 0
LEGEND ,
Dec 27, 2017

Copy link to clipboard

Copied

AnotherMe  wrote

Hi Nancy,

So you will start to code the HTML 5, CSS3 and Javascript from almost scratch on the coding panel? By coding, I mean actually typing the commands, like I am typing this reply to you right now? Or by coding from scratch, do you choose Dreamweaver's commands?

Nancy means typing directly in the code editor. I can't see her really using too many of the features built into DW like the CSS designer panel, etc - its far too slow but useful for beginners until they get up to speed and then hopefully they will abandon such practices. You usually have a few snippets of regularly used code like the doctype or may use something like emmet to navigate around the 'boring' stuff but use it sensibly, don't become depend on it ,so frequently test your coding ability to code without an aid, make sure your fully up to speed and at the top of your game.

It seems strange that you say you've been in this field for some time but never really coded before? Dont you find it a bit slow and frustrating relying on the panels, maybe its become second nature to you. Consider slowly doing some more coding directly within the coding environment.  Its really not so daunting. There are code patterns that will emerge and become obvious to you after some practice and they will be a lot faster and easier to implement than usiing design view or whatever workflow you are currently using.

Its not going to happen overnight but if you have a few spare minutes here and there, are enthusiatic to progress, then perhaps give it a go and see how you get along.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 27, 2017 1
Adobe Community Professional ,
Dec 27, 2017

Copy link to clipboard

Copied

I begin all projects with a basic HTML5 doc type.  File > New > New Document > HTML, hit the create button.  Save it.

I type in Code View.  I have a vast collection of code Snippets that I use to speed up workflow.   I find that  for most things, code hinting and auto code completion are much faster than using panels. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 27, 2017 1
Adobe Community Professional ,
Dec 25, 2017

Copy link to clipboard

Copied

I depends entirely on what you want to do For instance, if you want to create styling rules for a

In fact, if you want to learn Bootstrap, see Bootstrap 3 Tutorial


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2017 3
Enthusiast ,
Dec 25, 2017

Copy link to clipboard

Copied

BenPleysier  wrote

I depends entirely on what you want to do For instance, if you want to create styling rules for a

In fact, if you want to learn Bootstrap, see Bootstrap 3 Tutorial

Thanks for the great links!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 25, 2017 0