Create a documentation site from scratch in Framer

Key Takeaways

framer now supports code blocks and inline code which means you can create a stunning documentation style website using the CMS and it's really easy to do I'm going to be teaching you guys how to create one inside a framer there is a remix link down below let's go ahead and get right into it we're going to be creating a docs website that walks a user through how to use specific product in this case it would be documentation for programming and we can detail out using Code blocks inline code Cod and all of these cool features that are native within the framer CMS so I have these different pages here we have navigation between them over here on the left I have this nice fixed navigation and we also have search if we wanted to uh search between these different pages we have that ability as well so the first thing that you want to do is either start from the file that I already have created for this and remix it and that's going to give you these different styles that we're going to be using throughout this project so um if you don't want to do that you can just create new Styles here we're going to need some Tex Styles and some code Styles so you're going to want some headings you're going to want to Define what your inline code looks like and you're going to want to Define what your code blocks look like framer makes this really really easy so don't stress out too much about it you're basically just selecting from the list that they have here what kind of code Snippets do I want and once you actually have the content in there it'll be easier to visualize it so you could even just skip this step for now so let's go into our CMS I'm going to delete this and we're going to create a new collection so we'll just call it docs and we're going to go up here and click edit Fields so what they give us out of the box we're going to use all of that your title is just the title of the page the slug is the URL and then the content is where we're actually going to define the information within our docs so the only thing we want to add in here is a option selector and this is going to be for us to define the type of Doc that we have so for this example we really only have two we have guides and reference so if you have more in your docs you just click add here and you can Define it you know as you need to components for example um so I'll remove that and this pretty much sets up our CMS so the CMS is going to power everything that we need for this we just need to Define everything so if you have other types of content let's say your docs has an image on each page or something else you just Define it in here you can see the different options that you have um maybe you have a published date that you want to specify you can do that here okay so now next up let's go back into the C C Ms and we're going to click new item so this is where we can actually start adding in our docs pages so the first one is getting started and you'll see the slug gets added in here for me the type for this one is a guide and we can start adding in the content so from our reference example we have some text here so the first thing is our title and I'll just add that in here and then we have this block of text below so since the this is coming from a framer site it is already defined for me so if you're pulling your content in from notion or GitHub it'll probably already be stylized for you but if not if you had some plain text in here you just bump it up to whatever you need for this case it's an H2 and then we have already either previously defined that or you can do that in your Styles as needed for the next part we have this use animate little code so we'll add that in here use animate and for these These are actually inline code so just like we defined in our style gu previously you can click inline code and since this one's a heading we'll bump it up to our H2 so that was super easy now we've already defined some of our code and like I said if you're bringing this in from GitHub or something like that you could probably just copy the entire snippet or the entire block of text and paste it in just like that and you'll see that since this is coming from framer it's already been defined for me if it's not I'll just select what I need and then I can turn that into inline code as needed for the code Snippets um these will not be automatically stylized for us so you'll see if I drop this in here it just looks like plain text this is very easy to fix we're just going to select it and add in our code block so now very simply it has been stylized for us and now we have this beautiful code block inside of our docs so now you can go ahead and just start adding in the rest of the content that you need so now that we have all of the content that we need in here for our getting started page we have everything defined as far as our title slug type and any other fields that you may have ADD you can just click save and now we have our first cm item which is also a page so we come back in here we go to Pages under CMS we can go to docs and your index page is actually going to be the page that allows you to navigate through these different pages so that would be like um a browse page for your blog for example for this we just want to have the details page so I'll click Details page and now you'll see just like that everything has been added in here nicely for me everything is stylized based on what I've defined previously for my code Snippets in line my code block my titles and all that and you'll also see that over here so anything that you have previously defined you can customize it and it will be nicely represented over here so if I wanted to I could come over here and select maybe a different code snippet type or anything like that so you guys are free to mess with this as you'd like gone ahead and added in the rest of our docs Pages everything is now loaded into the CMS and now we can start customizing our navigation let's just go ahead over here to the side and we're just going to create a frame real quick so this is going to act as our kind of navigation I'll add a color fill to it real quick and now we can start filling in some of the information that we need so up here just going to write logo for now as a placeholder and now we can customize it later on I'll put that up here in the corner I'm going to also press option command return and that will add a stack around this and then I can just add a little bit of padding we'll give it 16 pixels and I'm also going to add a stack to this Frame I just pressing shift a and I will just leave that as is for now so now that I have have my row and my column for my logo I can insert something called a content list or a collection list and that's going to basically act as our navigation in this case so let's take this uh navigation that we have for our header and our logo and I'm just going to set that to fill and set it to distribute from the start okay so now for our collection list we're going to do two different on ones so I can duplicate this and we're going to filter them based on whether they are guide or reference so I'm just going to add some text in here real quick add guide and the next one we'll say reference so these are going to kind of act as our highlevel navigation to the different types that we've defined previously inside of our CMS so in here I'm going to add a filter and I'm G to filter by type so if type equals guide then it will show up here in this list so I'm just going to rename this list real quick to be guide and I'm going to rename this one to be reference so the reason we're doing it this way is because later on when we start adding in new pages they will all automatically show up here in our navigation and we won't need to manually Define them later on so I'll do the same thing down here for my ref reference I'm going to add a filter filter by type if the type equals reference then it will appear here so now I have my two references and my four guides I'm going to set this to fill the container real quick I'm going to do the same thing over here and we'll do a little bit of styling here just to make this look Okay add 12 pixels there and now since this is a um collection list we'll only need to define the first one and then the rest of them will fall in line with that so I'm just going to set this to be my body and I can do the same thing down here so you'll see there I pressed option command C option command V and that allows me to paste The Styling and I can do the same thing for the container okay so now I have my left hand navigation I'm just going to select everything that I've just added here and press option command return to put it inside of a stack and I will set it to fill and I will set the content to fit and some of this content within here should also be filling the container and it looks like it is so now this will allow me to just add a little bit of padding in here going to bump that up to 16 pixels all right so now I'm just going to turn this into a component pressing option command C or option command K rather and we're going to call this navigation so now what we can do is we're going to start customizing this to match our different displays you'll notice here as I resize this um there is probably a minimum width on one of these links somewhere so I'm just going to click into here and yep there it is so you if if you have this problem as well just go ahead and remove that we don't need that for now just right click and remove this so now that should be working nicely our content is scaling we want to have this at a fixed width though so I'm just going to put 250 and I'm going to rename this and call it desktop so this is going to be our desktop and we're going to also later in our design set this to be filling the height of our display so we don't need to worry about the height on this one I'm going to add another variant and we're going to call it mobile and we'll actually rename it to be mobile collapsed and for this one we don't need this bottom section and I'm going to have another one that we'll call mobile expanded and then this is going to be the one after people click on the hamburger menu which we're about to create it will show them this second version so let's go ahead and draw out a frame we can do 32 pixels should be plenty and I'm just going to draw out some other frames real quick so I just need two frames I'll call one of them top and one of them bottom and this is going to be our hamburger menu and since framer uses framer motion and animation we can very simply just drop them in and we'll have two and then as the frames change framer will just automatically animate it for us you can customize this a little bit further if you'd like if you want it to be a different height maybe or different thickness so now I'm going to turn this into a component as well and we'll call it hamburger menu and now we just need to create that open State we'll rename this one to be closed and our next variant will be open so now we can just rotate these real quick to be at 45° angle TOS pop that one up pop that one up and if we Center these should give us a nice little X okay so now that we have our hamburger menu I'm just going to drop it into our navigation here I'm going to just set my text to be filling the container since I have nothing else in here for now so on desktop I don't actually need it so I'm going to turn off the VIS ability and then on mobile I do want it so it's here and it's also here and for this version we're just going to set it to the open one okay so that's looking nice some of these probably you might want to customize a little bit so like this thickness can probably slim it down a little bit can probably make it a little bit Slimmer but I'll allow you guys to customize this as you'd like that looks pretty good for my purposes though okay so now that we have our navigation we need to actually create little animations between them so as someone clicks this icon we want to bring them here as someone clicks this icon we want to bring them here and I'll just click play here real quick and make sure that's working so you'll see framer's already added some nice little animations here for me you'll see that my hamburger menu is animating my menu is popping open nicely so that looks pretty good now we can go back to our frame into our actual page and I'm just going to drop this navigation in here so if I set this back to be fit contents it'll go back to the size that I previously defined and now I can just set the distribution here to be left to right and I want to align my content to the top here you'll see I have 100 pixels up here which I don't need anymore so I'll just bring that down to zero and for my left hand navigation I want to actually set this to be sticky so that it stays to the left as my content over here Scrolls on the right so since I removed that padding for my main container I still need some padding in here I'm just going to bump this up to like 6 maybe and I want to align my title to the left so if you set something to be sticky just make sure that the container it's inside of has overflow set to visible so I'll do that real quick and now you'll see that my content is scrolling nicely in the center while I have my navigation over here since we used a collection list for our actual navigation items we don't need to Define them any further because they're already connected to the pages in which they represent the next thing that we want to do is actually start defining our different break points so we've created this navigation and we have a mobile version but we haven't actually made any break points for our different pages yet so you can do this by just clicking this Plus for the break points and now everything looks nicely on desktop and tablet at least for mobile we just want to do a few different customizations I'm going to change it to be my mobile collapsed variant and I'm going to set the direction of my page to be organized left to right from left to right to top to bottom rather and I'm going to set this to be fill I can also remove that Gap that I have I don't need that 80 pixels spacing anymore because my content's not hanging out over here on the left and you'll see now that as I scroll my content Scrolls nicely behind it I can open up this menu and the menu is popping open nicely um the only thing that might be causing a little bit of weird Behavior there is the alignment here so I'm going to distribute here from the start and I'm going to distribute here from the start as well so we try this again you'll see that now that my content is being aligned from the start not from the center the animation is actually dropping down all right we're just going to do a few more quick customizations to this navigation and then it will be perfect so for the height I want to set it to be filling my viewport and I want to make sure that I'm aligning my content to the start not the center so my distribution here um of the actual navig a that will bring it up here nicely to the left I'm also just going to customize some of the styling on it so I want to give it this layer color and in here I'm going to add a quick divider just to divide up my content nicely so I'm going to add a border we'll use our divider styling and I'm just going to add only to the bottom in this case and on my entire container I'm going to add that divider to the right just so that we can kind of nicely split up our content here so here just going to change it so it's only on the right and that's looking pretty good in the future we're going to add in our search and all that good stuff but for now at least we have that and if you have a logo feel free to drop that in here as well I have this little logo I got from logo ipsum so if you have something something like that go ahead drop it in here let me just copy and paste this into here real quick and that's looking pretty good I can drop this down to be about 24 and I'm going to put it inside of a container and set it to fill we'll just add one more quick customization I can select this post and you'll see around my post I have a container that actually is where it's linking from so I'm going to remove that and click on my text and add the link there that way I can customize it further so it's the same link we're just going to the slug and for my navs I'll just select this one and if you click edit you can add your different customizations here so now if we go ahead and view you'll see it's now very easy to tell which one I'm on because I have a nice nice hover state that tells me and then once it's selected I know exactly which page I'm on okay so now that we have our navigation created for our different breakpoints and we've created the different breakpoints for our content let's go ahead and create the ability to search between different pages I'm just going to draw out a frame really quick and I'm going to type search into it so I'm just going to remove the fill on it and I want to get a nice icon so we'll type in you could just type in icons and see which pack works for you for me I'm going to be using phosphor and I'll see if they have search or it's probably called magnifying glass if I had to guess okay so now this is going to act as my search bar and we're going to kind of create like a fake search bar which I'll show you in a second because framer gives us some styling for a search bar already but we want to create our own for this use case so I'm going to set the width the width can stay fixed I'm going to set the height to be fit and that looks pretty nice the only other thing that I want to add is my little divider down here at the bottom so I'm going to add that divider and I'm going to set it to only be at the bottom so I can put zero for the top right and left and I'm just going to put this into my page here real quick so you can come over here just drop it into my desktop and now I can select these two layers and press option command return to put them inside of a stack you'll notice that things look a little wonky right now but that's okay I'm going to set that to be fitting my contents and I'm going to set this container to fill I also want to set the order to be top to bottom and now I can just simply bring my content below and my search is going to be right above so we had some styling on our Pages already and we're going to kind of change it up a little bit so the Gap we can get rid of that and I want to set my search to be Phil and now everything should be lining up somewhat nicely you'll see that these are aligned pretty nicely as well so if you'd like you can take this search and turn it into a component real quick and now we're just going to go to the insert menu and look for search so when you have the search you'll notice you just get this icon here we're just going to get rid of that for a second so turning the opacity all the way down and now we're just going to do like I said we're going to kind of fake the search so that when someone Clicks in here they still get search but they have our styling instead of the default one so now you can set the position here to be absolute and just add zero to all sides and that should work nicely let's go ahead and click play real quick and you'll see as we click on this our search actually begins I'm going to add one more quick customization in here which is just a nice little ux thing if we go to the cursor you can change your cursor to be a highlight I'm going to set this to be sticky as well up here at the top so that everything will scroll behind it I just need to make sure that my container has overflow set to visible otherwise this will not work okay so there we go my search is sticking nicely up there the only thing that we want to change here is probably adding a little bit of a fill just so that our content isn't showing behind it okay I'm pretty pleased with how that's looking now we just need to make our customization on our different break points you'll see that on tablet everything's looking nice on mobile however we start to encounter some issues so here what we're going to do is I'm just going to make it invisible and then inside of here we can just drag in that search we're just going to drop this right into our main component and we'll set it to not be visible until we need it so here on mobile I can bring it back real quick set it to visible and I'll just put it over here so what this allows me to do is kind of have my search always with me whether I'm on desktop or on mobile but it's not clogging up a lot of the real estate that I have right there on mobile let's bring this back in here as well okay so that's looking great now if we go ahead and actually preview this it works nicely I have my search that pops over I have my navigation here if you wanted to customize this further you can do that in here but otherwise that's looking nice all right so now let's go ahead and create our homepage we've created our different docs pages and now we want that welcoming screen when someone comes to our page for the first time so on our docs page we're just going to copy over these three elements our nav our search and our content and I'm just going to paste it inside of here since my page already has layout on um I can easily just use the arrow keys to move this back over to the left and on my content I'm just going to unlink it from my CMS you can come down here find your content and just unlink it for now I'm going to add my body styling there this one has H1 so that's okay and now if we look in our reference we have introduction and then this block of text below so I'll just add that in real quick introduction and then I can paste my content right there below I want to change the gap between here to be about 16 pixels for now and next up we have our different Navigation items so first off just going to drag in some icons and let's just find the content that we have so we have just beginning and then below we have our subheading so I'll just add in an H2 here then I'll paste in my content below and for that we can use our body style and if it copied a link like it did for me you can just remove it up here so now I can select all of this and press option command return to put it inside of a stack I'm going to change the fill to be my layer color and I want to change the direction to be vertical I'm going to align to the left and from the start and we can just add maybe 16 pixels in here and I'll put 12 pixels between so then we can just set everything to fit our content for now and we have two navigation items here so create the next one so now I can take both of these press option command return to put them inside of a stack I'll remove the fill on it and I'm just going to set both of these to fill the container real quick I'm going to also set the content within to fill the container that way when we shrink it down to a smaller display our text doesn't run off okay I'm GNA give this 16 pixels between and now I think we're ready to drop it in here and I just want to set this to fill the container and fit my contents okay so now that's in there pretty nicely I think I probably want to put this below my content down here and I can give it that same 600 pixels of Max width okay so that's looking pretty good I want to also navigate these to different pages within my website so for just beginning this is going to link to my getting started page and this one is going to link to my motion page okay that's looking nice I now have a nice little introduction page for people that are coming to my website for the first time and then they can jump in to the docs that they're looking for all right guys if you've made it to this point then that means you have created your documentation style website inside it framer using the CMS I hope you found this video helpful in some way if you did please leave a like And subscribe and I'll see you guys in the next video