Frequently Asked Questions
Let us know if there are any questons you feel are missing, and we will add to the list for everyone to see.
Nope. We understand there’s those that love it and those that hate it. So rather than conforming to one system, we created our own that’s easy to read, understand, and write. Since BEM is best used for large projects with consistent unique classes and modifiers, it would be impossible to anticipate and accommodate everyones naming conventions with BEM, so we standardized our own naming conventions with BEM principles in mind to make class names easy to read, understand, and know what does what.
We do not. The only icons we use in our stitch library are free open source icons to avoid any commercial licensing issues. Our code is written for you to easily swap out icons and svgs for ones better suited for your project. When choosing svgs and icons, we recommend flaticon.com.
We will have weekly drops of new stitches and designs every other Friday, and we will even let you know what is new in your dashboard so you’re never out of the loop and always up to date on our latest designs. We don’t want our selections to get stale and want you to always feel like you’re getting your money's worth every month. We aren’t just going to sit back and get comfy. We will continuously be investing in new designs, new features, and improving our product.
Use code stitch for anything! When you subscribe you get free creative license to use our designs and code for personal projects and commercial ones. We’re here to make your job easier. There’s no restrictions on how you use CodeStitch.
Nothing. You don’t need to initiate or download anything from NPM or install any dependencies or frameworks. Just copy and paste our code into your project and it will just work! It’s that simple! You don’t need to do anything else or know how to use your terminal.
We're excited about the potential of creating a dedicated React library in the future. For now, though, our focus is on crafting top-notch HTML and CSS components. If you're working with React, you'll find that integrating our code is a breeze. You can easily incorporate our components into your React projects and apply React-specific features to them. While React is definitely on our radar, our current priority is to enhance our core offerings in HTML and CSS. As our team grows and we gain more resources, we plan to bring on React specialists to develop an extensive range of React components. This will allow us to offer an even broader array of tools to our subscribers.
Only the free ones please. We are self funded and self built with no outside investors. So ideally we’d like people to not share our premium stitches and instead encourage your friends to sign up for their own premium account and help support us and allow us to keep pumping out new content every other week. We know there’s absolutely nothing we can do about it and will be near impossible to enforce. We just ask that if you and your friends or coworkers like the service and it provides value to your work, to please each sign up for a premium account so we can continue to add new features, designs, and improvements.
ID's are useful when used properly. They're great for javascript when you have to target elements, but they are also useful for scoping. It's one of the core mechanisms that ensure our code is resuable, interchangeable, and self contained. By having every section's selectors scoped by a unique ID for that stitch, it keeps the CSS from interfering with the rest of your site and vice versa. It's how we create little CSS "components" that can go anywhere. If you need to change something or allow it to inherit the fonts and sizings of the text in the rest of your site, just remove the font family code at the beginning of each Stitch's CSS sheet, and remove their font sizes. They will then adopt those properties from your sites current styles for those texts. All styling information can be found in the mobile media query. So there's no need to have to go hunt down multiple font sizes and others in multiple media query spots. They are all in one so edits are a breeze.
clamp() is a powerful and amazing CSS tool that allows us to set a minimum value, a growth rate that is tied to the viewport width, and a maximum value to stop growing at. It looks like this: clamp(2rem, 5vw, 4rem). This means that the minimum value should be 2rem (32px on mobile) and grow at a rate of 5 times the viewport width, and stop growing once the value reaches 4rem (64px, on tablet or desktop). So if the value of 5vw is less than 2rem (32px), nothing changes and the minimum stays. Once the viewport width grows to a certain value that exceeds 2rem (32px) then that value will now grow with every pixel wide the viewport grows by and stops once it reaches 4rem (64px). The higher the vw unit, the faster it scales to reach the maximum. The lower the number, the slower it grows by. You can adjust this to make the values hit their maximum at whatever screen size you want. Just change the growth rate until the max is reached at that screen size.
By using clamp(), we can set all our margins, paddings, fonts, and any other values for mobile and desktop in one line of code in one spot, rather than having to change those values in seperate media queries. This allows us to keep our CSS code to an absolute minimum, have all styles and sizes in one spot instead of two or three, and make our sites truly and 100% responsive. It is also supported by all browsers except for...Internet Explorer.
Oh definitely. However, it serves another purpose - to be collapsible. We group all our media queries for each section one on top of the other, with mobile starting on top. All the media queries for tablet and desktop are collapsible, so we just wrap our mobile css in a 0em media query so it can also collapse and make your CSS much more readbale, easier to scan and navigate at a glance, and make edits really quick and easy. I know it might look silly and you've never seen that done before, but it's another unique aspect of our code that makes it easy to use, move around to different pages or projects, and edit. At the end of the day, our code is built to be easily edited, flexible, and able to be plopped into any project and just work without messing things up. In order to reach that goal, we have to also toss our mobile css in an arbitrary and functionless media query purely for the convenience and organization of it. It's a tool, and we just found another use for it to make our lives easier.
Yes! All our Stitches are designed specifically to be stacked with each other. We set strict design guidelines to have the same paddings top and bottom on each Stitch, the same h2 and paragraph font sizes, 1 font, and the same button sizes. We know not everyone's project will match our fonts and sizes perfectly, so we designed and built our catalog to be stackable and uniform, and leaving all the edits to the user to make as they see fit. Maybe you're working on a project with a different font or font sizes. Thats OK! We already assumed many of our styles will need to change so we designed them all to be consistent so you always know what to change and where to make the change so the Stitch can fit seamlessly into whatever project and style you're working on. Or you can just stitch an entire website together using our library and everything will be spaced perfectly and cohesively. They won't look out of place. They are designed to fit together and help you make a whole website FAST.
You can then go in and change the fonts yourself, or remove the font sizes on each Stitch and instead set them in a global CSS file for every Stitch to pull from. They are built to be customized by developers. We know there is no one design to rule them all and fit every possible website. So we worked hard to set certain standards for our Stitches to be as easy to understand and edit as possible so they can morph to fit any project and save you time from having to build these components yourself from scratch - because we already did!
Yup! Accessibility is very important to us and we make sure to research and stay on top of the latest best practices to ensure the code is legible to screen readers and easy for them to parse. We do this by using semantic elments and as few divs as possible combined with the proper ARIA attributes that are used on an as-needed basis depending on the design and code structure. We also make sure all our Stitches pass color contrast ratio tests so the content is always the right constrast between background and foreground of our text.
Absolutely! In fact, we tailored all our stitches to have a minimum desktop container size of 1280px wide. This is the same standard as Tailwind's desktop breakpoint. So if you plop a Stitch in the middle of a Tailwind project, all the container sizes should match up and all you need to do is remove the font sizes and colors from the mobile media query and add your Tailwind classes to them in the HTML so they match the rest of your site and tweak the CSS as needed to adjust top and bottom paddings for a more precise fitting.
That's what's so unique about our components - they aren't tied to one framework so you can use them ANYWHERE and inside ANY framework. It's all just HTML and CSS scoped by ID tags. They shouldn't be overidden by the default styles of the frameworks. So regardless of what your project is built on, if you need to add a certain section to your site you can grab one of ours and drop it in your project without any concerns.
Only the free ones please. We are self funded and self built with no outside investors. So ideally we’d like people to not share our premium stitches and instead encourage your friends to sign up for their own premium account and help support us and allow us to keep pumping out new content every other week. We know there’s absolutely nothing we can do about it and will be near impossible to enforce. We just ask that if you and your friends or coworkers like the service and it provides value to your work, to please each sign up for a premium account so we can continue to add new features, designs, and improvements.