Tips for organizing your CSS from scratch without relying on a pre-existing framework such as bootstrap, bulma, or materialize

As I embark on a new Angular project, the decision has been made to create our own component library instead of using frameworks like Bootstrap, Bulma, or Materialize. Despite some initial research, I'm feeling a bit lost on where to begin (other than implementing a CSS reset). While I am a junior developer with experience working on features in existing projects, starting the front end for this new one has me seeking guidance on how to structure everything in a structured and reusable way.

How do you approach creating your angular components library? What steps do you take to ensure organization and reusability from the start? Are there any tutorials you recommend that could provide valuable insights into this process?

Answer №1

In my perspective, tackling this task is no easy feat. However, a good starting point would be to delve into utilizing SCSS, which opens up a plethora of possibilities in terms of reusability. Additionally, delving into the world of flexbox and grid-layout (unless you need to cater to older browsers like IE 11 and below) can help you in implementing a variety of stylish components. By combining scss with 'flexbox`, many components can be easily created and reused as needed.

I highly recommend steering clear of depending on libraries and instead opt for writing our own code. The potential we unlock through this method is boundless. You'll be pleasantly surprised by what you can achieve.

However, if the project is long-term and evolving, it might be wise to reconsider ruling out libraries like 'bootstrap or materialize. As requirements change over time, you may find yourself needing various libraries to meet the functionalities required. (Experience truly is the best teacher)

Answer №2

Up until now, I've opted to create my own CSS library instead of relying on a framework for most of my projects. While I haven't worked with Angular, I do have experience with React and can tell you about my current setup.

I utilize gulp to compile SASS files into a main.css file following the BEM methodology (You might also want to explore SMACSS). Each 'block' according to BEM has its own separate file in either Layout or Modules directories.

My SASS files are organized into the following folders:

Base - includes resets, grids, helpers, typography, and base styles
Layout - contains containers like headers, footers, sidebars, etc.
Lib - where mixins are kept
Modules - for components such as forms, buttons, alerts, icons, accordions, etc.
Settings - houses variables for colors, fonts, responsive design that are utilized across other files.

I hope this information proves useful to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

html css responsive-design

Adding a new line in the configurations of MatDialogConfig (Angular)

Here is a code snippet: private mDialog: MatDialog, const dialog = new MatDialogConfig(); msg = "I enjoy coding in Angular.\r\n I am learning TypeScript." dialog.data = { message:msg }; alert (msg); mDialog.open(AB ...

angular typescript

Excessive text overflowing in a chat interface can be resolved through CSS styling

After conducting a thorough search, it appears that very few individuals are taking this important element into consideration. I currently have a chat interface set up with a div element containing a ul, which then houses li elements that contain p element ...

html css

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

javascript css typescript less

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

javascript html css word-wrap

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...

html angular typescript angular-ng-if angular-pipe

Encountered an error while loading resource: net::ERR_CONNECTION_REFUSED in Nodejs

I am currently working on a form in my angular 6 app with nodejs, utilizing nodemailer for sending emails. Unfortunately, I am encountering an error that reads: Failed to load resource: net::ERR_CONNECTION_REFUSED : :3000/contact/send:1 Below is the form ...

node.js angular typescript express bootstrap-4

Encountering a problem while installing an Angular 2 npm package from an enterprise registry

We are utilizing an enterprise repository for NPM packages that mirrors the traditional registry "http://registry.npmjs.org/". I am currently attempting to fetch the following packages (listed in package.json) "@angular/common": "2.0.0-rc.4", "@angular/co ...

angular npm

Error when using Angular CLI: npm error! The call stack size has exceeded the limit

While attempting to develop an Angular app using ng new testApp -routing, I encountered the following error. Command: ng new testApp -routing Error: npm ERR! Maximum call stack size exceeded Does anyone have a possible solution for this issue? ...

node.js angular npm angular-cli

The issue with downloading all files in Firefox persists when attempting to download multiple files simultaneously due to an anchor click

I am currently facing an issue with downloading multiple files using TypeScript in Angular 6. I am receiving an array of blobs from a web API service. Here is the service method used to get multiple blobs for downloading: private downloadTest(): void { ...

angular typescript firefox download anchor

Using DIV to "enclose" all the elements inside

I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...

javascript html css ajax

Responsive Input Navigation Bar CSS

How can I create a top bar that resembles the design of Google Play? https://i.sstatic.net/tdLVz.png I am struggling to make the input box flexible and fit the window size... The minimum width of Div.search is set to 250px but it's not working ...

css flexbox

Is there a way to efficiently compare multiple arrays in Typescript and Angular?

I am faced with a scenario where I have 4 separate arrays and need to identify if any item appears in more than two of the arrays. If this is the case, I must delete the duplicate items from all arrays except one based on a specific property. let arrayA = ...

javascript angular typescript ecmascript-6 ecmascript-2016

Angular 2 Quickstart encountered a 404 error when trying to retrieve the /app/main.js

I'm attempting to follow the Angular 2 quickstart guide, but I'm having trouble getting it to work. I've searched for similar questions but haven't found a solution yet. Can anyone assist me with this? Here is my code: app.component.t ...

typescript angular

A visible white line appears within the image when the Windows scaling is set to 125%

I encountered a peculiar issue. A certain website displays an image with a 5px solid border, but when I adjust the Windows scale settings to 125%, there is a noticeable gap between the image and the border. https://i.sstatic.net/FWLIN.png https://i.sstat ...

html css image google-chrome scaling

Using jQuery to iterate through an array and reverse its order

Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...

javascript jquery css

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

css gridview yii2

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

php css

What is the method for activating scrolling in an inner div instead of the browser window?

In the code snippet provided, I am encountering an issue where the browser window scrolls instead of the specified div with overflow-y: scroll when minimizing the browser window. How can I ensure that scrolling occurs within the div itself without making ...

css

Make the background image within a button stretch to completely cover the button

I need assistance with creating a button that has a large image as its background. The challenge I'm facing is that the image fits vertically within the button, but horizontally it repeats unless I use 'no-repeat', which leaves empty space i ...

html css

CSSer Q&A