Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Strategies for modifying styles

From: CSS: Frameworks and Grids

Video: Strategies for modifying styles

Almost no project is going to be able to use a framework's styling right out of the box with no modifications. Now take the page that I have open in the browser currently, this is the redesign that we're going to be doing for the SimplePrimate blog site over the course of the next couple of chapters. This is based on the Foundation framework, and if you remember from looking at some of the Foundation sample files from earlier, there are some obvious styling differences between this particular blog page and the Foundation styles. So they're not going to be the same for every project, you are definitely going to need to modify them one way or another.

Strategies for modifying styles

Almost no project is going to be able to use a framework's styling right out of the box with no modifications. Now take the page that I have open in the browser currently, this is the redesign that we're going to be doing for the SimplePrimate blog site over the course of the next couple of chapters. This is based on the Foundation framework, and if you remember from looking at some of the Foundation sample files from earlier, there are some obvious styling differences between this particular blog page and the Foundation styles. So they're not going to be the same for every project, you are definitely going to need to modify them one way or another.

You're likely going to want to overwrite some of the element's stylings and in most cases you are also going to want to add to the framework styles in a way to organize sections of your pages in a way that's unique to the project. Although I have briefly discussed the style strategy that we're going to be using and before we do that I just want to some of the high points of what we're going to be building over the next chapter or two. Now remember, we're not going to be going too deeply into the Foundation framework styling, so we're going to be hitting the high points of most of these. But I want to point out some of the features that we'll be experimenting with over the next couple of chapters.

So this is the index page, we're going to be using Foundation's grid to help us control page layout. You'll notice we have a navigation bar up top. It's also responsive, you'll notice if we resize the browser window, the top menu bar sort of goes away at a certain size and then the users can sort of expand and contract that, to help save a little bit of space on tablets and mobile devices. Now we also have an individual blog post that we'll be styling and taking advantage of some the framework's specific capabilities like callouts and modal windows, and we also have an About page that's going to allow us to experiment a little bit with Foundation's form styling and what we'll need to do to modify that.

So before we can go ahead and tackle those individual style overrides, we need to structure our site in a way that's going to allow us to do that in a very organized manner. So let's take a look at how we would do that. So I am back in my Code Editor and in this exercise we're working with the files in the 04_02 directory, I have the index file opened up. And this isn't the SimplePrimate page yet, this is actually one of the starter pages that comes with Foundation. And it's not unusual if you're working with a framework to use some of the templates that come with it. A lot of times you'll find a starter page where a template within the framework that is going to suit you perfectly.

And the nice thing about using that instead of starting from scratch is that a lot of the things that are unique to the framework, such as the conditional comments that I'm seeing up here, setting the viewport width, those are already done, so I don't have to reproduce those when I start adding my own content to the site. So a lot of times, you might want to start with one of the starter pages and then just delete all of their sample content and replace it with your own. I also have a link to a stylesheet here that's not part of the original Foundation framework. So I created a custom.css stylesheet.

Now if you remember from our earlier discussion about different strategies, one of the strategies that I talked about was creating a separate stylesheet for the styles that are unique to that site and using it to overwrite the framework's stylesheet, which in this case is the foundation.css. And that's the approach we're going to be using for this particular project and of course, there are pros and cons for either approach, but I like this one a little bit better because it allows me to swap out with foundation.css if it changes, so if they come out with an update, it's very easy for me to do that. And I don't have to worry about overwriting any of the custom styles for this particular project.

It also allows me to organize and find those styles in one central location. I am going to click over to the custom.css file, feel free to open that up if you are using another editor, something other than Dreamweaver, you can just open up the custom.css that's found here in the _css directory. And you can see it's very, very simple right now. It just has this one little header up top that says Custom styles and everything else is going to go underneath that. I'm a big fan and proponent of keeping styles organized. So as I go through this project, one of the things that I'll do before I begin styling is I'll identify areas of the page either structurally or thematically that are going to require its own unique styling, and I sort of create sections for those.

I have a method of working where I usually work from the top down, so if the navigation is up top, I'll probably have a lot of the navigation styles towards the top of my CSS, it just makes them easier for me to find then. So what I am going to do is I am going to create sections for each of the different either themes or areas of elements that I need to style. So I am just going to go ahead and copy the comment that I already have that says Custom styles, I am just going to give myself a little bit of space, and I am going to paste it. And down below that I am going to type in Global resets.

Global resets are what are used to reset any of the global properties from the Foundation framework, like all link styling or all h1 styling or some of the special class styles that the Foundation framework has, so this isn't any one specific region, these would be styles that we'll apply to the entire site. I am just going to keep doing this, I am just going to keep copying and pasting these comment regions and then leaving a little bit of empty space between them so that I can start styling. After Global resets I am going to do top navigation styles.

After top navigation styles I am going to do header styles. After header styles I am going to do main article styles, so I am really, literally going down through the structure of my page and creating sections for that. Now obviously that requires--you just sort of understand how you're going to structure your page before you do this. After main article styles, I am going to do form styles. Of course, not every page is going to have form, so it's not like I'm going down through every single page and determining the structure, at this point I am also thematically putting stuff together like, hey, if I ever need to get forms, my custom form styling is going to go here.

After that, I am going to do my sidebar styles. After that I am going to do news styles, so I actually have a couple of sections for recent news or current news and they might appear on the index page or on other pages as well, so I want to go ahead and create some styles for those too. And finally, I am going to finish it up with footer styles. So obviously you can see from this that I already have a pretty good idea of what my page structure is going to be like and what my content is going to be within my site. Obviously, before you begin working on a project, you're going to need to do some type of content survey, or you're going to be creating some mockups or some prototyping.

So you should have a pretty clear idea as to how your pages are going to be structured and what the content is that's going to be inside of them. It's a pretty easy thing to do to come into a file like this and to go ahead and create some basic structure, something already in place so that as you begin working on the project you know where to put those styles in a very organized manner, makes them easier to find, makes it easier to work with. This is especially true if you're working in a collaborative environment. Now I am not quite finished yet, because one of the things I wanted to do is make sure that my site was responsive. So the foundation.css has several different media queries inside of it that make the page and the Foundation framework respond to different screen sizes.

I want to carry that through and my custom styles as well so that I am not overwriting any of those in the foundation.css. Now I am going to create a media query, but before I can do that I just noticed something about these comments, they are not closed, and that's going to create some problems, so I am just going to go ahead and close each one of these by doing a little star forward slash at the end of them. And that's why it always helps to pay attention, and if any of you were doing this exercise, and you were copying and pasting these going, hey, these comments aren't closed. You were 100% right, one last one.

So be sure to do that, and it's just something that obviously I missed out on when I was putting these together the first time. So now I am ready to do my media queries. So right down below the footer styles I am going to do an @media, and I am going to do only screen and, and we'll give it a maximum width of 720 pixels. So what this means is these styles that I have inside this media query will only apply if the maximum size of the screen is 720 pixels, so this is primarily going to affect tablets and smartphones.

I also organized my media query styles too. So I am just going to go ahead and copy all of these except for Global resets. Global resets are going to apply to any screen size, so it doesn't really matter. And then I am just going to paste those directly into my media query as well. Excellent. So I am going to save that. That gives us a custom css file that's organized in a way that's specific to our site, and now we can use that to overwrite or extend the default Foundation styles.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 13420 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.